1. GroundTruth Help Center
  2. Getting Started
  3. GroundTruth Pixels

Install Pixel in Shopify

Avatar
Emily Truong

Overview

Unlike a tag manager (i.e., Google Tag Manager), Shopify’s built-in “Custom Pixel” feature simplifies adding tracking codes. 

Key Shopify components include:

  • Custom Pixels: These are code snippets for tracking events (e.g., the GroundTruth Pixel) that you can add directly into your store’s settings.
  • Customer Events: The actions taken by customers (e.g., add to cart, purchase) that can be tracked using pixels to provide insights. Your pixel code will listen for these events and fire a tag accordingly.

Place the pixel in 2 separate places to ensure all engagement events are tracked

  1. Theme code (theme.liquid): The base code snippet should be manually placed in your theme’s theme.liquid file. This is essential for standard engagement events like pageview, click, and scroll.
  2. Shopify custom pixel: The code to track e-commerce specific events (i.e., customer events) like add to cart and purchase needs to be placed in your Shopify Settings as a Custom Events pixel. Because these pixels operate in a sandboxed environment, the pixel will listen for Shopify’s analytics events to specifically track these actions. 

By using both methods, you can capture the full range of user behaviors. To install the pixel manually on your Shopify website, follow the instructions below. For more information about Shopify pixels and customer events, refer to Shopify’s Pixels overview and Shopify’s Pixels and customer events.

Install the GroundTruth Pixel Into Theme Code

Step-by-step guide on how to implement the base pixel code for the web engagement pixel into Shopify's theme code.

  1. From the Shopify admin dashboard, select Online Store → Themes from the left menu.
  2. On the Themes page, locate the theme to which you want to add the GroundTruth pixel for your Shopify store.
  3. Click on Actions (3 dots next to the Customize button).

  4. From the Actions dropdown menu, select Edit Code. This will open the Shopify theme code editor.

  5. In the theme code editor, select layout → theme.liquid from the left side to open the main template file.
  6. Inside the Theme.liquid file, search for the closing </head> tag. This tag marks the end of the <head> section of your website.

  7. Copy and paste the below base code snippet, just above the </head> tag.

    <script>
    window.GTPX_DEBUG = true;
    (function(w, d, s, u, o, q, j) {
        w[o] = w[o] || function() {
            (w[o].q = w[o].q || []).push(arguments);
        };
        j = d.createElement(s); j.async = true; j.src = u;
        d.getElementsByTagName('head')[0].appendChild(j);
    })(window, document, "script", "https://gt-pixel-prod.groundtruth.com/pixel.v1.js", "gtpx");
</script>

  8. Save Changes.

  9. Test implementation to confirm the events are firing on all pages (e.g., pageview, click, scroll) using the validation steps.

Install the GroundTruth Pixel as Shopify Custom Pixel

Step-by-step guide on how to implement the web engagement pixel code into Shopify's custom pixel.

Add to Cart
  1. On your Shopify’s main admin page, click on Settings (bottom left corner) → Customer Events
  2. In Customer Events, click on Add Custom Pixel.

  3. Name the pixel (e.g., GroundTruth Cart Pixel).

     

  4. Click Add pixel.

  5. Copy and paste the following base code into the Code box, under // Step 1. Initialize the JavaScript pixel SDK (make sure to exclude HTML)

    window.GTPX_DEBUG = true;

    window.GTPX_SUPPRESS_DOM = true;

    (function(w, d, s, u, o, q, j) {

      w[o] = w[o] || function() {

        (w[o].q = w[o].q || []).push(arguments);

      };

      j = d.createElement(s); j.async = true; j.src = u;

      d.getElementsByTagName('head')[0].appendChild(j);

    })(window, document, "script", "https://gt-pixel-prod.groundtruth.com/pixel.v1.js", "gtpx");

  6. Copy and paste the following Cart event code, under // Step 2. Subscribe to customer events with analytics.subscribe(), and add tracking. This subscribes you to Shopify's product_added_to_cart analytics event. 

    analytics.subscribe('product_added_to_cart', (event) => {

      // examples for accessing event data

      const cartLine = event.data.cartLine;

      const cartLineCost = cartLine.cost.totalAmount.amount;

      const cartLineCostCurrency = cartLine.cost.totalAmount.currencyCode;

      const merchandiseVariantTitle = cartLine.merchandise.title;

      gtpx('cart', { 

        'value': cartLineCost

      });

    });

     

  7. Review and confirm privacy settings.
  8. Once both sets of code snippets have been added to the Code box and the privacy settings reviewed:
    1. Click Save (top center).

    2. Click Connect (top right corner)

       

  9. You should now see your GroundTruth Cart Pixel with a Connected status in the Customer Events page.

     

  10. Test the installation by Placing a test order to simulate a transaction through Shopify’s Bogus Gateway to verify implementation.
Purchase
  1. On your Shopify’s main admin page, click on Settings → Customer Events
  2. In Customer Events, click on Add Custom Pixel.

  3. Name the pixel (e.g., GroundTruth Purchase Pixel).

  4. Click Add pixel.

  5. Copy and paste the following base code into the Code box, under // Step 1. Initialize the JavaScript pixel SDK (make sure to exclude HTML)

    window.GTPX_DEBUG = true;

    window.GTPX_SUPPRESS_DOM = true;

    (function(w, d, s, u, o, q, j) {

      w[o] = w[o] || function() {

        (w[o].q = w[o].q || []).push(arguments);

      };

      j = d.createElement(s); j.async = true; j.src = u;

      d.getElementsByTagName('head')[0].appendChild(j);

    })(window, document, "script", "https://gt-pixel-prod.groundtruth.com/pixel.v1.js", "gtpx");.

  6. Copy and paste the following Purchase event code, under // Step 2. Subscribe to customer events with analytics.subscribe(), and add tracking. This subscribes you to Shopify's checkout_completed analytics event.

    analytics.subscribe('product_added_to_cart', (event) => {

      // examples for accessing event data

      const cartLine = event.data.cartLine;

      const cartLineCost = cartLine.cost.totalAmount.amount;

      const cartLineCostCurrency = cartLine.cost.totalAmount.currencyCode;

      const merchandiseVariantTitle = cartLine.merchandise.title;

      gtpx('purchase', { 

        'value': checkoutTotalPrice

      });

    });

     

  7. Review and confirm privacy settings.
  8. Once both sets of code snippets have been added to the Code box and the privacy settings reviewed:
    1. Click Save (top center).

    2. Click Connect (top right corner)

       

  9. You should now see your GroundTruth Purchase Pixel with a Connected status in the Customer Events page.

     

  10. Test the installation by Placing a test order to simulate a transaction through Shopify’s Bogus Gateway to verify implementation.

Frequently Asked Questions

  1. How do I generate the pixel? You don’t. The GT Pixel is a universal code snippet, ready to be copied and placed on any website. No unique generation is required.

  2. Where does the pixel need to be placed? On every page of the website to ensure it captures a comprehensive view of the user journey.

  3. Do I need to remove the existing conversion pixel if I want to add a web engagement pixel? No, both pixels can exist on the same page. They track different goals and have separate reporting, so they will not interfere with each other.

If you’re having trouble with the pixel, here are a few steps you can take: 

  • Review Shopify's documentation (See links: Add to Cart Event, Purchase Event)
  • Consult your web developer to help ensure the pixel code is correctly integrated with your Shopify theme and website. 
Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.

Articles in this section