Best practices to follow in building a lightweight Javascript pixel code .
INTRODUCTION
Let me brief you about the pixel here, you may be wondering “What is pixel”? ,” pixel code” in web development often refers to the small pieces of code, typically JavaScript, that are embedded in web pages to enable tracking, analytics, advertising, and other functionalities. The term is commonly associated with the implementation of tracking pixels for various online services. Giants like Facebook and Google have their tracking pixels to track permitted user activities like user clicks, scrolls, and visits on a particular website or an app.
Pixel snippets are mostly added to the <head> section of the website.
Let’s have a look into a pixel snippet, so below snippet is of a Facebook pixel
<! — Facebook Pixel Code →
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '{your-pixel-id-goes-here}');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&noscript=1"/>
</noscript>
<! - End Facebook Pixel Code →The below snippet is my pixel code , through which I will explain the pixel code and its bundling .
(function (p, i, x, e, l) {
if (typeof window !== undefined) {
window._pixel = {};
window._pixel.events_queue = window._pixel.events_queue || [];
window._q = function () {
window._pixel.events_queue.push(arguments);
};
var f = p.getElementsByTagName(i)[0],
k = p.createElement(i);
k.async = 1;
k.src="http://url_to_my_hosted_script/bundle.js?id=${UNIQUE_ID}";
f.parentNode.insertBefore(k, f);
}
})(document, "script");
_q("PIXEL_INIT", {
//You can add your custom data here…
});
_q("PAGE_VIEW");So if we analyse the above snippet when the above code is put into the head of a webpage, it mainly does two operations:
1. Creates a queue attached to the window object, which will help in sequencing the user events.
2. Injects a script tag into the top of all scripts on a page and loads the script bundle into the browser that is hosted, every pixel is distinguished with its unique ID.
Now your hosted script which is now loaded in the browser can do any operations that you would like to do on a web page like tracking the scroll events, clicking events, any button clicking navigations, using an analytical session of 30 minutes (just like Google Analytics ). My pixel can track user events and send them to our backend database
Things to remember while creating a pixel script :
The initial script which you can see above should be written in a way so that it can load in any environment without any support, so try to write your script in the ECMA script version, which is supported widely.
Below are some of the practices that I followed while developing my pixel script:
1. Using Minimal and Lightweight Libraries:
When developing web applications, it’s often a good practice to use minimal and lightweight libraries to reduce the overall size of your application. This can lead to faster load times and better performance for users.
2. Using Packages Widely Supported by Browsers:
It’s essential to use packages and features that are widely supported across different browsers to ensure a consistent user experience. This involves choosing JavaScript language features and APIs that are well-supported in modern browsers and avoiding proprietary or experimental features.
3. Best Compression Techniques in Webpack:
Webpack is a popular module bundler for JavaScript applications. To optimize bundle size and loading speed, it’s crucial to employ effective compression techniques. One such technique is using the Brotli compression algorithm, which tends to achieve better compression ratios than gzip. In your Webpack configuration, you might specify the use of Brotli for compressing your assets.
const CompressionPlugin = require(‘compression-webpack-plugin’);
module.exports = {
// other configurations…
plugins: [
new CompressionPlugin({
algorithm: 'brotliCompress',
test: /\.(js|css|html|svg)$/,
threshold: 10240,
minRatio: 0.8,
}),
],
};This code uses the compression-webpack-plugin to apply Brotli compression to JavaScript, CSS, HTML, and SVG files.
4. Deployment with Cloudflare Wrangler:
Cloudflare Wrangler is a tool designed for deploying applications on Cloudflare Workers. Workers are serverless functions that run on Cloudflare’s edge network. By deploying your code with Wrangler, you can leverage Cloudflare’s global CDN (Content Delivery Network) for faster content delivery and improved performance.
Benefits of using Cloudflare Wrangler for deployment include:
- Global CDN: Cloudflare’s extensive network of servers worldwide helps in distributing your content close to end-users, reducing latency.
- Automatic Compression: Cloudflare performs automatic compression of your assets, further optimizing load times.
- Security Features: Cloudflare provides security features like DDoS protection and a Web Application Firewall (WAF) to enhance the security of your application.
In summary, the combination of using lightweight libraries, widely supported packages, effective compression techniques like Brotli in Webpack, and deploying with Cloudflare Wrangler can contribute to a fast, efficient, and globally accessible web application.
