In this guide, we’ll show you how to install the Triple Pixel to your headless Shopify site or 3rd party landing page so you can record visitors’ events from your Shopify store in Triple Whale. In this guide, we will:

  • Create a global variable “TripleHeadless” to identify the Shopify store that the website points to

  • Install Triple Pixel to record all events

  • Invoke AddToCart event to record ‘Add to Cart’ events in the Triple Pixel (optional)

  • Invoke Contact event to record contact info events in the Triple Pixel (optional)

To make sure that the Triple Pixel records visitor activity and attributes it properly to your Shopify purchases, access must have already been granted via your Triple Whale dashboard to connect with your Shopify account. To read more on how to do that, see here.


What you’ll need to begin

  • Access to your website’s front-end code, to paste a snippet of JavaScript code in your site’s header and add event function calls

  • 15-30 minutes of time


STEP 1: Identifying the Shopify Store

The Triple Pixel identifies that the website is a Shopify store by accessing the “TripleHeadless” variable with the Shopify domain as its value. This variable should be created within the <head> tag on every page where you will be tracking website visitors. Most developers add it to their website's persistent header, so it can be used on all pages.

Add the scripts to the <head> tag of your website

Placing the code within your <head> tags reduces the chances of browsers or third-party code blocking the Pixel's execution. It also executes the code sooner, increasing the chance that your visitors are tracked before they leave your page.

Here’s an example of the variable declaration and initialization for a store whose Shopify domain is madisonbraids.myshopify.com

<script> TripleHeadless = 'madisonbraids.myshopify.com' </script>

How to find your Shopify Store Domain

Your Shopify store domain is not necessarily the same URL as your website.

You can find your Shopify store domain by logging into your main dashboard in Shopify. The domain you’re on should look like “your-shop.myshopify.com” - that is your Shopify store domain.


STEP 2: Install Triple Pixel

Installing the Pixel

To install the Pixel, you need to add a snippet, that you can find here. We highly recommend that you add the snippet right below the variable you added in Step 1, within the <head> tag of your website. Wherever the variable was added in Step 1, the pixel snippet should also be added.

<script>
/* >> TriplePixel :: start*/
~function(W,H,A,L,E,_){function O(T,R){void 0===R&&(R=!1),H=new XMLHttpRequest,H.open("GET","//triplewhale-pixel.web.app/triplepx.txt?"+~(Date.now()/9e7),!0),H.send(null),H.onreadystatechange=function(){4===H.readyState&&200===H.status?setTimeout(function(){return eval(H.responseText)},50):(299<H.status||H.status<200)&&T&&!R&&(R=!0,O(T-1))}}if(L=window,!L[H+"sn"]){L[H+"sn"]=1;try{A.setItem(H,1+(0|A.getItem(H)||0)),W.includes("⇈")&&A.setItem(H+"Stg",1+(0|A.getItem(H+"Stg")||0)),(E=JSON.parse(A.getItem(H+"U")||"[]")).push(location.href),A.setItem(H+"U",JSON.stringify(E))}catch(e){}A.getItem('"!nC`')||(A=L,A[H]||(L=function(){return Date.now().toString(36)+"_"+Math.random().toString(36)},E=A[H]=function(t,e){return W=L(),(E._q=E._q||[]).push([W,t,e]),E._headless=!0,W},E.ch=W,O(5)))}}("","TriplePixel",localStorage);
/* << TriplePixel :: end*/
</script>

Verifying the code works

Visit the page you installed the Triple Pixel snippet on. Open up the JavaScript console in whatever browser you're using (i.e. in Developer Tools in Chrome), and type TriplePixel.__cc, then hit enter. You should see true. If you see undefined, please make sure:

  • The code was added to the header of the page

  • Any cached HTML content is purged (this varies per platform and content delivery network - please consult with your technical team)

Installing Using a Tag Manager

Although we recommend adding the Pixel directly to your website's <head> tags, the Pixel will work in most tag management and tag container solutions. For specific advice on implementing the Pixel using your tag manager, please refer to your tag manager's documentation, then verify it as described above.

Mobile Websites

If your mobile website is separate from your desktop website, you should add the Pixel to both. This will allow you to easily re-market to your mobile visitors, exclude them, or create lookalikes audiences.


[OPTIONAL STEPS 3-4: FOR HEADLESS SHOPS]

STEP 3: Recording ‘Add to Cart’ Events

If you want the pixel to track each time a product is added to a customers’ cart, use the ‘AddToCart’ event. Item ID and quantity should be included as required parameters.

Here’s an example of the function call for an ‘Add to Cart’ event where the item ID is ‘4428522618989’ and the quantity is ‘10’.

TriplePixel('AddToCart', {item:4428522618989, q:10 });

Optionally, if your system supports and generates unique IDs for each cart, you can also set it as a parameter. For example:

TriplePixel('AddToCart', {item:4428522618989,q:10, token:'a4707c79e1816cbe80ac995be636b693'});

Note: If you're looking for the 'item ID' of a given product — in your Shopify dashboard, when you go to edit a product, the ID is visible in the URL. Here's an example.

Verifying the code works

Visit the page you installed the Triple Pixel snippet on. Open up the JavaScript console in whatever browser you're using (i.e. in Developer Tools in Chrome), go to “Network” tab then reload the page. Now add a product to your cart. Right at this moment, in the “Network” list, you should see a request “/add?r=2.5...”.


STEP 4: Recording the Visitor Contact Info

You can also record your visitor’s info - this allows us to assign an email or phone number of the visitor and to re-connect if the journey was disrupted. However, this step is optional - Triple Pixel has enough power to re-connect journeys on its own. All ‘Contact Info’ events are tracked using the ‘Contact’ event invocation. Email or phone number can be included as parameters. Exactly one parameter should be included.

Here’s an example of the function for a ‘Contact’ event where the email address is [email protected] and the phone number is 123-456-7891

TriplePixel('Contact', {email:'[email protected]'}); TriplePixel('Contact', {phone:'123-456-7891'});

Warning: never send both email and phone in the same object! This is wrong:

/// wrong! TriplePixel('Contact', {email:'[email protected]', phone:'123-456-7891'});

Now the pixel is sending your data to Triple Whale and building the journeys for your visitors. 🎉🎉🎉

How can I check that the pixel is loading on my website?

Visit the page you installed the Triple Pixel snippet on. Open up the JavaScript console in whatever browser you're using (i.e. in Developer Tools in Chrome), and type TriplePixel.__cc, (that is actually two underscores) then hit enter. You should see true. See an example here.

If you see undefined, please make sure:

  • The code was added to the header of the page

  • Any cached HTML content is purged (this varies per platform and content delivery network - please consult with your technical team)


[OPTIONAL STEP 5: FOR EU SHOPS]

STEP 5: Supporting GDPR opt-outs

If a visitor to your shop or landing page opts out of tracking, you can send an event to Triple Whale so that we do not try to track the user's journey and attribute their future order to any source.

When you receive an opt-out from the user call this event once:

TriplePixel('gdpr')

Calling it multiple times won't break anything, but is unnecessary.


More Questions?

  • Learn more about the Triple Pixel here.

  • For specific guidance on installing Triple Pixel on Unbounce pages, click here.

  • For specific guidance on installing Triple Pixel on Zipify pages, click here.

  • For installing Instapage, follow steps 1 & 2 above and then follow Instapage's documentation here.

Don't see your Landing Page here? Reach out to their Support team or check their Knowledge Base for documentation on installing a Pixel into the header of their landing pages.

Did this answer your question?