Why Headless Shops Require Manual Pixel Install
At Triple Whale, we want to ensure that we're constantly capturing all the data you need to make informed decisions that drive growth for your brand. That is why we encourage users to utilize our one-click Pixel Auto-Install method.
However, If you have a headless front-end built on top of your Shopify store, our Auto-Install method will not be able to add the Pixel script to those pages. Because those pages are technically hosted outside of your Shopify store (even though your site visitors may not notice it), Triple Whale does not have the permissions needed to write code to those pages.
In this article, we will show you how to manually install the Triple Pixel to your headless front-end Shopify store. We will also provide guidance how to record ‘Add to Cart’ events in the Triple Pixel, as well as record contact info events (these two are optional).
If you have a site manager on your team who is more comfortable dealing with Javascript code, we'd recommend sending him these instructions.
Related Articles:
For installing the Triple Pixel on a third-party Landing Page, click here.
For installing the Triple Pixel on a front-end Headless Shopify store, click here.
For installing the Triple Pixel on a third-party Checkout, click here.
For instructions on modifying your headless installation for Sonar, click here.
Basic Headless Site Installation Instructions
Copy the code provided on the Pixel Settings page.
Paste the code within your
<head>tags.This 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.
Save the changes.
Verify the code works: Visit the page you installed the Triple Pixel snippet on. Open up the JavaScript console in whatever browser you're using (e.g. in Developer Tools in Chrome), and type
TriplePixelData, then hit enter. You should see the values from the TriplePixelData object.If you see
undefined, please go back and ensure:The code was added within the
<head>tags of the pageAny cached HTML content is purged (this varies per platform and content delivery network - please consult with your technical team)
Note - Single Page Applications (SPA)
The Triple Pixel will automatically capture a page view when it first loads. However, if your shop is built as a Single Page Application (SPA), in order to capture all page views, you must manually trigger a Triple Pixel page load event as your visitors navigate between pages after they first visit. To do this, simply fire the following when the visitor navigates to a new page:
TriplePixel('pageLoad')
Capture Visitor & Add to Cart events (Optional)
You also want to track each time a product is added to a customer’s cart. Use the Add to Cart script provided on the Pixel Settings page.
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.
Verify 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. At that moment, in the “Network” list, you should see a request “/add?r=2.5...”.
Capture Visitor Contact Info (Optional)
You can also record your visitor’s info - this allows us to assign an email or phone number to the visitor and reconnect future events if the journey was disrupted.
All ‘Contact Info’ events are tracked using the
‘Contact’event. Email or phone numbers can be included as parameters. Exactly one value for each parameter should be included.Here’s an example of the function for a
‘Contact’event where the email address is madison@gmail.com and the phone number is 123-456-7891TriplePixel('Contact', {email:'madison@gmail.com', phone:'123-456-7891'});
Use the Capturing Visitor Contact Information script provided on the Pixel Settings page.
Supporting GDPR opt-outs (for EU shops)
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')Or
TriplePixel('gdpr', true)Calling it multiple times won't break anything, but is unnecessary.
If a user opts in to tracking, you can reinitiate the Triple Pixel by firing the following event:
TriplePixel('gdpr', false)
Additional Installation Instructions for Sonar Customers
If you plan to use Triple Whale Sonar, additional instructions for proper integration can be found in the following KB article: Sonar Setup for Headless Shopify Sites
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, and 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 sites. This will allow you to easily re-market to your mobile visitors, exclude them, or create lookalike audiences.