Standard Installation
The Triple Pixel is designed to capture all visitor activity on your website, from the moment they first visit to when they place an order. In order to track a visitor's journey across your site, the Triple Pixel must be present on all pages a visitor might visit.
For more on how Triple Pixel works, click here.
A standard installation of the Triple Pixel requires the pixel to be installed in the following locations:
On all layouts
On the Thank You page*
Post-purchase page (if you use an Upsell app)*
*Please note that the installation method for your post-purchase pages will differ depending on which Shopify checkout system is enabled for your store.
Enable the Triple Pixel Theme App Embed to your Online Store pages
After installing the Triple Whale app on your Shopify store, you should now see the Triple Pixel App Embed available in your Shopify theme editor. To enable the app embed:
Visit your Shopify Admin homepage
Click on Online Store > Themes
On your live theme, click Customize
Inside your theme editor, click the icon for App Embeds
Find the Triple Pixel App Embed and toggle it on
Click Save
Add the Triple Pixel to Your Checkout
In order to track visitors who place orders and connect their previous site activity to their purchase, the Triple Pixel must be present on your post-purchase checkout pages. Depending on which Shopify checkout system you use, the installation will differ.
Adding the Pixel to your Checkout.liquid Checkout
Add the Triple Pixel to your "Thank You" page
In Shopify Admin, head to Settings > Checkout. Locate the "Order status page" section.
Copy the code provided on the Pixel Settings page.
Paste the code into the Additional scripts field area.
Click Save.
You can automatically install/uninstall the Checkout script on your Thank You page from inside of Triple Whale. Visit the Pixel Settings page and scroll to the Installation Status section. From there, you can click Auto-Install under Checkout to automatically add the script.
On the Post-purchase page (for Upsells):
In Shopify Admin, head to Settings > Checkout page. Locate the "Post-purchase page" section.
Copy the code provided on the Pixel Settings page.
Paste the code into the script area.
Click Save.
Adding Pixel Tracking to Shopify's Checkout Extensibility / One-Page Checkout
If your shop has upgraded to Shopify's new Checkout Extensibility, you will need to enable the Triple Pixel Web Pixel Extension. This extension uses Shopify's Customer Events steam to capture checkout events and order details.
The Web Pixel Extension is installed by default when you install the Triple Whale App. To enable the Web Pixel:
In Triple Whale, navigate to Settings > Pixel Settings
Scroll down to the "Installation Status" Section
In the "Checkout" component, click Manage
In the popup, click Enable Web Pixel
This will initialize your Triple Whale web pixel extension and begin capturing checkout events.
To ensure it the web pixel extension is properly installed and enabled:
From your Shopify admin homepage navigate to Settings > Customer Events
You should see the Triple Pixel Web Pixel Extension and it should show a Connected status.
Manual Pixel Install via Google Tag Manager (GTM)
Google Tag Manager's Cookie Manager allows users to opt in or opt out of cookies on your site. If the user or visitor rejects the cookie prompt on your website, this action will trigger a special function provided in our code which disables our Pixel for that session. That means the session & any purchases in that session will not be tracked or attributed.
For that reason, we highly recommend not using Google Tag Manager for installing the Pixel script.
If do choose to deploy the Pixel script to your Shopify store using GTM, you will need to follow these instructions and add the Pixel script in three locations:
All Page Views (in GTM)
Thank you page (in GTM)
Additional Scripts (in your Shopify store's Settings)
A. All Page Views
In GTM, create a new Tag
Select "Custom HTML"
Copy the code provided on the Pixel Settings page.
Paste the code into the script area.
Select "All Page Views" trigger.
Name the tag.
Click Save.
B. Thank you page
Create a new Tag
Select "Custom HTML"
Copy the Order Confirmation page script provided on the Pixel Settings page.
Paste the script into the script area.
Choose a page view trigger that fires when the customer lands on your thank you page.
Name the tag.
Click Save.
C. Additional Scripts
In Shopify Admin, head to Settings > Checkout. Locate the Order status page section.
Copy the Order Confirmation page script provided on the Pixel Settings page.
Paste the script into the Additional scripts field.
Click Save.
Alternatively, you can paste the GTM script that you generated in Step B. Then, click Save.
Additional Installation Scenarios
There are several instances that require different or additional steps beyond the standard installation. For example:
If you are using a third-party landing page app (such as Zipify or Unbounce)
If you are using a third-party checkout app (such as Recharge, BetterCart, or Upscribe).
If you have a front-end Headless-built Shopify store.
If you are using a third-party blog that directs traffic to your Shopify store.
If you are using an affiliate or partner website that directs traffic to your Shopify store.
In all of the above situations, additional steps must be followed to ensure that the pixel can track your visitors across your site. For any of the above situations, please reference the Related Articles linked below.
Related Articles:
For installing the Triple Pixel on a third-party Landing Page or Blog, 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.