Skip to main content
All CollectionsGetting StartedPixel Installation
Installing the Triple Pixel to your Shopify Store
Installing the Triple Pixel to your Shopify Store

Follow a few simple steps to add Triple Pixel tracking to your online store.

Chaim Davies avatar
Written by Chaim Davies
Updated over 4 months ago

Overview

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. To track visitors, the Triple Whale Pixel must be installed on all of your online store pages and on your Order Confirmation page.

To learn more about Pixel tracking & attribution, visit: How the Triple Pixel Works.

Standard Installation

To begin the installation, head to Settings > Pixel Settings and click Enable Pixel. You will be directed to your Shopify theme editor, where you should see the Triple Pixel app block toggled "on". Click Save in your theme editor to enable the pixel on your online store pages.

Checkout Pages

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.

Checkout.liquid Checkout

If you use Shopify's "old checkout" with a checkout.liquid page, follow these steps to install the Triple Pixel on your checkout pages.

  1. In Shopify Admin, head to Settings > Checkout. Locate the "Order status page" section.

  2. Copy the Order Confirmation snippet provided on the Pixel Settings >Manual Installation page.

  3. 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.

Post-Purchase Upsell page

If your shop leverages Shopify’s Post-Purchase Upsell Page, you will need to install the Pixel snippet on this page as well by following the steps below.

  1. In Shopify Admin, head to Settings > Checkout. Locate the "Post-purchase page" section.

  2. Copy the Post-Purchase Upsell snippet provided on the Pixel Settings >Manual Installation page.

  3. Paste the code into the Additional scripts field area. Click Save.

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 stream 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, head to Settings > Pixel Settings. Under the Triple Pixel Installation Status section, in the Checkout component, click Manage. Click Enable Web Pixel.

Confirm Web Pixel Enablement

To ensure the Web Pixel Extension is properly installed and enabled, visit Shopify's Settings > Customer Events page and ensure Triple Whale appears with a Connected Status.

Pixel Tracking for Third-Party Pages

There are several instances that require different or additional steps beyond the standard installation. Please refer to the relevant documentation linked below.

To confirm the Triple Pixel is properly installed on a particular page, you may use our test tool on the Pixel Settings page.. Simply input the URL you’d like to test and click “Test”. A popup window will show briefly with the test URL and you will see a success or failure message.


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

  1. In GTM, create a new Tag

  2. Select "Custom HTML"

  3. Copy the code provided on the Pixel Settings page.

  4. Paste the code into the script area.

  5. Select "All Page Views" trigger.

  6. Name the tag.

  7. Click Save.

B. Thank you page

  1. Create a new Tag

  2. Select "Custom HTML"

  3. Copy the Order Confirmation page script provided on the Pixel Settings page.

  4. Paste the script into the script area.

  5. Choose a page view trigger that fires when the customer lands on your thank you page.

  6. Name the tag.

  7. Click Save.

C. Additional Scripts

  1. In Shopify Admin, head to Settings > Checkout. Locate the Order status page section.

  2. Copy the Order Confirmation page script provided on the Pixel Settings page.

  3. Paste the script into the Additional scripts field.

  4. Click Save.

  5. Alternatively, you can paste the GTM script that you generated in Step B. Then, click Save.

    1. Found by visiting Settings > Checkout > Order Status Page

Did this answer your question?