Tracking Codes

Overview

If you're running a marketing campaign, it's important to track its effectiveness to gain insights and improve your conversion. One popular tool for tracking website conversions is Facebook Pixel.

To get started, you'll need to set up tracking codes for Facebook.

In this article, we'll guide you through the basics of adding tracking codes to your e-commerce forms.

Should I use the Custom JS or the Pixel section?

Pixels were originally the standard tracking method for website analytics and ad campaigns, so tracking codes are still commonly referred to as "pixels." However, modern tracking codes are often provided as JavaScript scripts that perform a wider range of tasks, but still serve the same tracking and analysis purposes as traditional pixels. So, don't be confused if you encounter a tracking code that is called a "pixel" but is actually a JavaScript script.

In order to determine whether a tracking code is provided as a JavaScript script, you can look at the code itself.

If the tracking code is provided as a JavaScript script, you'll typically see a block of code that is enclosed within <script> tags in the website's HTML. The code may contain a tracking ID or other tracking parameters that are used to identify the website and the user's behavior on the site.

On the other hand, if the tracking code is provided as a traditional pixel, it will typically be embedded in the website as an image file with a
.png,.gif, or .jpg extension. The pixel will often be a 1x1 transparent image that is not visible to the user, but sends tracking data to the tracking server when the user loads the web page.

In some cases, tracking codes may use a combination of pixels and JavaScript to track user behavior. In these cases, you may see both <script> tags and image files with tracking parameters embedded in the website's HTML.

Variables

By including variables in your tracking pixels, you can dynamically pass information back to your analytics tools.

Our widget will use the values that were used during the transaction.

For example, it could send back what was the coupon code that was used, alongside the first and last name of the user that made the purchase.

Below is a list of possible variables and description of the value that would be generated and passed back.

Stripe

Maxio (Chargify)

Authorize.net

Facebook

A typical Facebook "Pixel" code is a Javascript code provided in multiple parts that may look similar to examples below.

Example Code Part 1:

<!-- 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_HERE');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID_HERE&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

Example Code Part 2:

<script>
fbq('track', 'Purchase', {
  value: 25.00,
  currency: 'USD',
});
</script>

The example code part 1 would be inserted into the main HTML code of the checkout page or the page holding the widget.

The example code part 2 would need to be inserted into the Custom JS section of the configuration screen and in the appropriate step.

For example, if you want to track the "Purchase" event, you would insert the code in the Step 3 - Username Form Code of the checkout flow.

In addition, you would use the dynamic variables that are proper to your needs and could be looking like:

fbq(‘track’, ‘Purchase’, {
     value: sf.product.priceincents,
     coupon: sf.coupon,
     currency: 'USD',
     contents: [{
           id: sf.product.priceId
},
          quantity: 1
     }],
     content_type: 'product'
});

For questions or assistance, please contact us at support@lightspeedvt.com