Tracking Pixels

Checkout Champ supports a variety of tracking pixels with easy installation

Make sure to publish your funnel after adding or editing your pixels.

Edit the funnel settings and open the Tracking Pixels section:

Choose how to fire the Purchase event. Purchase events are Javascript events.

You can simply add your GTM, FB Pixel, SnapChat, TikTok, Listrak or AppLovin Pixel IDs into the provided fields.

You will find additional information below:

Google

If you add the Tracking Id in the left column, you do not need to add the custom tracking code in the right column. Conversely, if you add the custom tracking code, you do not need to add the Tracking Id.

Checkout Champ supports both Google Tag Manager (GTM) and G4. For both the following events are fired:

Purchase (with an option to fire after initial sale or after all upsells or after each upsell), including
- order ID
- total amount
- currency (G4 only)
- total tax
- total shipping
- coupon code (GTM only)
- item information

Checkout Champ by default sends only transaction data to Google. If using Tag Manager (GTM) you have an option to also send enhanced conversion data by enabling the "Send User Data" toggle.

The two steps below are for manual implementation and are not necessary when using the "Send User Data" toggle. For manual implementation, follow the 2 steps below (do this even if using only the Tracking Id entry).

Step 1: In the Tracking Pixels settings, add the following to the custom head tracking code section.

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha256/0.9.0/sha256.min.js" integrity="sha512-szJ5FSo9hEmXXe7b5AUVtn/WnL8a5VofnFeYC2i2z03uS2LhAch7ewNLbl5flsEmTTimMN0enBZg/3sQ+YOSzQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Step 2: Add the following to the custom body tracking code

<script type="text/javascript">
	$(document).ready(function () {
		function getHash(param) {
			var value = param && param.trim(); 
			if (!value) {
				return "";
			}
			return sha256(value);
		}
		try {
			var serializedOrderData = sessionStorage.getItem("orderData");
			if (!serializedOrderData) {
				return;
			}
			var orderDataTmp = JSON.parse(serializedOrderData);
			var emailAddress = orderDataTmp.emailAddress;
			var firstName = orderDataTmp.firstName;
			var lastName = orderDataTmp.lastName;
			var city = orderDataTmp.city;
			var country = orderDataTmp.country;
			var postalCode = orderDataTmp.postalCode;
			if (gtag && emailAddress && firstName && lastName && city && country && postalCode) {
				gtag("set", "user_data", {
						"sha256_email_address": getHash(emailAddress),
						"address": {
							"address.sha256_first_name": getHash(firstName),
							"address.sha256_last_name": getHash(lastName),
							"city": city,
							"postal_code": postalCode,
							"country": country
						}
				});
			}
		} catch(error) {
			console.log(error);
		}
	});
</script>

Google Ads Conversion Tracking

For Google Ads conversion tracking, you can add your Google Ad Words conversion snippet to the Thank You page above the <title> tag, but after the Google tag. In that snippet, you can specify a “value” in the conversion snippet OR dynamically populate the “value” using information passed in the sessions' “orderData”. To correctly collect dynamic conversion data, you must parse orderData from sessionStorage using the correct naming conventions.

For example, one way you could modify the conversion snippet would be to include the order’s “totalAmount” and “orderId”. Be sure to use your own Google Ads AW-CONVERSION_ID/CONVERSION_LABEL in place of the “AW-XXXXXXX/XXXXXXXXXXXXXX” and customize as needed.

<script>
 var orderDataTmp = JSON.parse(sessionStorage.getItem("orderData"));
 if(orderDataTmp) {
 var orderValue = orderDataTmp.totalAmount;
 var transactionId = orderDataTmp.orderId;
 gtag('event', 'conversion', {
 'send_to': 'AW-XXXXXXXX/XXXXXXXXXXXXXXXXXXXX',
 'value': orderValue,
 'currency': 'USD',
 'transaction_id': transactionId
 }
 );
 }
</script>

Facebook

For Facebook the following events are fired:

ViewContent (presell pages)
Lead (when a lead page is submitted)
AddToCart (when an item is added to the shopping cart)
CustomizeProduct (when variant details are changed by the consumer)
InitiateCheckout (when a checkout page loads and there is a card number input on the page)
AddPaymentInfo (when a checkout page is submitted with card information)
Purchase (with an option to fire after initial sale or after all upsells)

If you wish to fire other FB pixel events, you can use the Custom Head Tracking Code section on the right side of the page.

You can optionally fire the Facebook Conversions API. Enter your access token (be sure to whitelist your domain and generate token by a system user to avoid expiration). The Conversions API fires the same events as the pixel. It can be advantageous when the pixel (client-side) is blocked by the consumer’s browser.

For various Facebook pixels you would need to get the Jave script code from Facebook and then paste it in the “Custom Head Tracking Code” section on our side.

Sygnal

For Sygnal the following events are fired:

ViewContent (presell pages)
Lead (when a lead page is submitted)
AddToCart (when an item is added to the shopping cart)
CustomizeProduct (when variant details are changed by the consumer)
InitiateCheckout (when a checkout page loads and there is a card number input on the page)
AddPaymentInfo (when a checkout page is submitted with card information)
Purchase (with an option to fire after initial sale or after all upsells)

If you wish to fire other Sygnal pixel events, you can use the Custom Head Tracking Code section on the right side of the page.

SnapChat

For SnapChat the following events are fired once the cardholder’s email address is known:

Page View (all pages)
Purchase (with an option to fire after initial sale or after all upsells)

TikTok

For TikTok the only requirement is that the pixel ID is entered here. Using the pixel ID, TikTok's base tracking code is added to the <head> of each page. This base code includes the standard "page view" event. All remaining configuration is done at TikTok. Any additional events would require you to use TikTok's custom script to be added in the "Custom Tracking Code" section of your funnel's "Tracking Pixels" section.

If using a Shopify or TikTok pixel

Shopify TikTok pixels do not allow you to edit the events, you will need to add the scripts manually using your Shopify TikTok pixel ID on each page.

Example:

// BASE CODE TEMPLATE:
<script>
//Part1
!function (w, d, t) {
w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="
https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new
 Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};
//Part 2
ttq.load('YOUR PIXEL ID WILL BE LOCATED HERE');
ttq.page();
}(window, document, 'ttq');
</script>

Multiple TikTok Pixels

CheckoutChamp does not limit the number of pixels you can use at a time. You will however need to add them manually and place the correct events on them.

On Part 2 of the code provided by TikTok you will add your pixel id’s.

// BASE CODE TEMPLATE:
<script>
//Part1
!function (w, d, t) {
w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="
https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new
 Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};
On Part 2 you will add your multiple TikTok pixels
//Part 2
ttq.load('YOUR PIXEL ID WILL BE LOCATED HERE');
ttq.load('YOUR PIXEL ID WILL BE LOCATED HERE');
ttq.load('YOUR PIXEL ID WILL BE LOCATED HERE');
ttq.page();
}(window, document, 'ttq');
</script>

TikTok Event API Access Key

If you want to fire TikTok's Event API then enter your Access token here. This must be entered along with the TikTok Pixel ID. Events fired are the same as noted in the Pixel ID tooltip.

Triple Whale

Enable the Triple Whale checkbox to automatically add the Triple Whale script to the funnel. This requires a Shopify plugin attached to the funnel’s campaign.

Listrak

For Listrak an email is captured as soon as it is entered on a lead or checkout page. Once that is complete an UpdateCart event is called for any product or price changes. The order is automatically submitted based on the setup option - after initial sale or after all upsells.

The following information is sent to Listrak on a purchase: email address, first name, last name, order ID, customer ID, order total amount, shipping total amount, tax total amount, and item information (sku, quantity, price).

AppLovin

Custom Head/Body Tracking Code

These sections can be used to place custom tracking scripts on all pages of your funnel. The custom tracking code is meant to be used when not using the standard tracking pixel ID inputs. You should use one or the other. Entering tracking IDs in both places could lead to tracking abnormalities.

Any scripts added in this section are added programmatically and will not be seen in the HTML of the pages in the builder. Similarly, the scripts will not be seen if you "view source" on the live page. To see these scripts on the live page, right click to "Inspect" the page and find the script in the <head> element or view the Network tab to see the network calls.

Scripts wrapped in a tag cannot be entered here, please use the Global Scripts for these types of scripts or place them directly on the pages.

Place the code directly on the page

Checkout Champ allows you to directly add code to a page by clicking the Edit button in the page builder.

Global Scripts

PreviousEdit Funnel Settings NextOffers and Upsells

Last updated 2 months ago

Make sure to publish your funnel after adding or editing your pixels.

Edit the funnel settings and open the Tracking Pixels section:

Choose how to fire the Purchase event. Purchase events are Javascript events.

You can simply add your GTM, FB Pixel, SnapChat, TikTok, Listrak or AppLovin Pixel IDs into the provided fields.

You will find additional information below:

Google

If you add the Tracking Id in the left column, you do not need to add the custom tracking code in the right column. Conversely, if you add the custom tracking code, you do not need to add the Tracking Id.

Checkout Champ supports both Google Tag Manager (GTM) and G4. For both the following events are fired:

Purchase (with an option to fire after initial sale or after all upsells or after each upsell), including
- order ID
- total amount
- currency (G4 only)
- total tax
- total shipping
- coupon code (GTM only)
- item information

Checkout Champ by default sends only transaction data to Google. If using Tag Manager (GTM) you have an option to also send enhanced conversion data by enabling the "Send User Data" toggle.

The two steps below are for manual implementation and are not necessary when using the "Send User Data" toggle. For manual implementation, follow the 2 steps below (do this even if using only the Tracking Id entry).

Step 1: In the Tracking Pixels settings, add the following to the custom head tracking code section.

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha256/0.9.0/sha256.min.js" integrity="sha512-szJ5FSo9hEmXXe7b5AUVtn/WnL8a5VofnFeYC2i2z03uS2LhAch7ewNLbl5flsEmTTimMN0enBZg/3sQ+YOSzQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Step 2: Add the following to the custom body tracking code

<script type="text/javascript">
	$(document).ready(function () {
		function getHash(param) {
			var value = param && param.trim(); 
			if (!value) {
				return "";
			}
			return sha256(value);
		}
		try {
			var serializedOrderData = sessionStorage.getItem("orderData");
			if (!serializedOrderData) {
				return;
			}
			var orderDataTmp = JSON.parse(serializedOrderData);
			var emailAddress = orderDataTmp.emailAddress;
			var firstName = orderDataTmp.firstName;
			var lastName = orderDataTmp.lastName;
			var city = orderDataTmp.city;
			var country = orderDataTmp.country;
			var postalCode = orderDataTmp.postalCode;
			if (gtag && emailAddress && firstName && lastName && city && country && postalCode) {
				gtag("set", "user_data", {
						"sha256_email_address": getHash(emailAddress),
						"address": {
							"address.sha256_first_name": getHash(firstName),
							"address.sha256_last_name": getHash(lastName),
							"city": city,
							"postal_code": postalCode,
							"country": country
						}
				});
			}
		} catch(error) {
			console.log(error);
		}
	});
</script>

Google Ads Conversion Tracking

For Google Ads conversion tracking, you can add your Google Ad Words conversion snippet to the Thank You page above the <title> tag, but after the Google tag. In that snippet, you can specify a “value” in the conversion snippet OR dynamically populate the “value” using information passed in the sessions' “orderData”. To correctly collect dynamic conversion data, you must parse orderData from sessionStorage using the correct naming conventions.

For example, one way you could modify the conversion snippet would be to include the order’s “totalAmount” and “orderId”. Be sure to use your own Google Ads AW-CONVERSION_ID/CONVERSION_LABEL in place of the “AW-XXXXXXX/XXXXXXXXXXXXXX” and customize as needed.

<script>
 var orderDataTmp = JSON.parse(sessionStorage.getItem("orderData"));
 if(orderDataTmp) {
 var orderValue = orderDataTmp.totalAmount;
 var transactionId = orderDataTmp.orderId;
 gtag('event', 'conversion', {
 'send_to': 'AW-XXXXXXXX/XXXXXXXXXXXXXXXXXXXX',
 'value': orderValue,
 'currency': 'USD',
 'transaction_id': transactionId
 }
 );
 }
</script>

Please read Google’s article on for more information.

To learn more about configuring Google Analytics, .

Facebook

For Facebook the following events are fired:

ViewContent (presell pages)
Lead (when a lead page is submitted)
AddToCart (when an item is added to the shopping cart)
CustomizeProduct (when variant details are changed by the consumer)
InitiateCheckout (when a checkout page loads and there is a card number input on the page)
AddPaymentInfo (when a checkout page is submitted with card information)
Purchase (with an option to fire after initial sale or after all upsells)

If you wish to fire other FB pixel events, you can use the Custom Head Tracking Code section on the right side of the page.

You can optionally fire the Facebook Conversions API. Enter your access token (be sure to whitelist your domain and generate token by a system user to avoid expiration). The Conversions API fires the same events as the pixel. It can be advantageous when the pixel (client-side) is blocked by the consumer’s browser.

For various Facebook pixels you would need to get the Jave script code from Facebook and then paste it in the “Custom Head Tracking Code” section on our side.

Sygnal

For Sygnal the following events are fired:

ViewContent (presell pages)
Lead (when a lead page is submitted)
AddToCart (when an item is added to the shopping cart)
CustomizeProduct (when variant details are changed by the consumer)
InitiateCheckout (when a checkout page loads and there is a card number input on the page)
AddPaymentInfo (when a checkout page is submitted with card information)
Purchase (with an option to fire after initial sale or after all upsells)

If you wish to fire other Sygnal pixel events, you can use the Custom Head Tracking Code section on the right side of the page.

SnapChat

For SnapChat the following events are fired once the cardholder’s email address is known:

Page View (all pages)
Purchase (with an option to fire after initial sale or after all upsells)

For more information on configuring your SnapChat pixel, please visit the SnapChat resource center, here:

TikTok

For TikTok the only requirement is that the pixel ID is entered here. Using the pixel ID, TikTok's base tracking code is added to the <head> of each page. This base code includes the standard "page view" event. All remaining configuration is done at TikTok. Any additional events would require you to use TikTok's custom script to be added in the "Custom Tracking Code" section of your funnel's "Tracking Pixels" section.

If using a Shopify or TikTok pixel

Shopify TikTok pixels do not allow you to edit the events, you will need to add the scripts manually using your Shopify TikTok pixel ID on each page.

Example:

// BASE CODE TEMPLATE:
<script>
//Part1
!function (w, d, t) {
w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="
https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new
 Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};
//Part 2
ttq.load('YOUR PIXEL ID WILL BE LOCATED HERE');
ttq.page();
}(window, document, 'ttq');
</script>

For more event codes visit

Multiple TikTok Pixels

CheckoutChamp does not limit the number of pixels you can use at a time. You will however need to add them manually and place the correct events on them.

On Part 2 of the code provided by TikTok you will add your pixel id’s.

// BASE CODE TEMPLATE:
<script>
//Part1
!function (w, d, t) {
w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="
https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new
 Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};
On Part 2 you will add your multiple TikTok pixels
//Part 2
ttq.load('YOUR PIXEL ID WILL BE LOCATED HERE');
ttq.load('YOUR PIXEL ID WILL BE LOCATED HERE');
ttq.load('YOUR PIXEL ID WILL BE LOCATED HERE');
ttq.page();
}(window, document, 'ttq');
</script>

For more event codes visit

TikTok Event API Access Key

If you want to fire TikTok's Event API then enter your Access token here. This must be entered along with the TikTok Pixel ID. Events fired are the same as noted in the Pixel ID tooltip.

Triple Whale

Enable the Triple Whale checkbox to automatically add the Triple Whale script to the funnel. This requires a Shopify plugin attached to the funnel’s campaign.

More information is

Listrak

For Listrak an email is captured as soon as it is entered on a lead or checkout page. Once that is complete an UpdateCart event is called for any product or price changes. The order is automatically submitted based on the setup option - after initial sale or after all upsells.

The following information is sent to Listrak on a purchase: email address, first name, last name, order ID, customer ID, order total amount, shipping total amount, tax total amount, and item information (sku, quantity, price).

AppLovin

Enable AppLovin and enter the Product Category ID from your AppLovin account. All AppLovin events are processed through Google Tag Manager. It is required to enter your GTM id on the page.

Follow these instructions to enable AppLovin within GTM

Product Category ID information can be found here

Install the Pixel Helper for testing live pages

Custom Head/Body Tracking Code

These sections can be used to place custom tracking scripts on all pages of your funnel. The custom tracking code is meant to be used when not using the standard tracking pixel ID inputs. You should use one or the other. Entering tracking IDs in both places could lead to tracking abnormalities.

Any scripts added in this section are added programmatically and will not be seen in the HTML of the pages in the builder. Similarly, the scripts will not be seen if you "view source" on the live page. To see these scripts on the live page, right click to "Inspect" the page and find the script in the <head> element or view the Network tab to see the network calls.

Scripts wrapped in a tag cannot be entered here, please use the Global Scripts for these types of scripts or place them directly on the pages.

Place the code directly on the page

Checkout Champ allows you to directly add code to a page by clicking the Edit button in the page builder.

Global Scripts

Scripts can be automatically added to specific funnels that you determine. For more information, please view our Global Scripts section of the article.

Please read Google’s article on for more information.

To learn more about configuring Google Analytics, .

For more information on configuring your SnapChat pixel, please visit the SnapChat resource center, here:

For more event codes visit

More information is

Enable AppLovin and enter the Product Category ID from your AppLovin account. All AppLovin events are processed through Google Tag Manager. It is required to enter your GTM id on the page.

Follow these instructions to enable AppLovin within GTM

Product Category ID information can be found here

Install the Pixel Helper for testing live pages

Scripts can be automatically added to specific funnels that you determine. For more information, please view our Global Scripts section of the article.

https://support.google.com/google-ads/answer/12785317

How to Use the Google Tag for Ads Conversion

see here for more information

SnapChat Business Help

API Documentation (tiktok.com)

here

Google Tag Manager

https://developers.applovin.com/en/audience-plus/google-tag-manager

https://developers.applovin.com/en/audience-plus/events-and-objects#category-ids

https://ecomm.applovin.com/p/MkMMcd2CDvebN1/Pixel-Helper-Checklist

CheckoutChamp Account Settings

Google