Install GroundTruth Pixel with Shopify

Overview

Unlike a tag manager (e.g., Google Tag Manager), Shopify’s built-in “Custom Pixel” feature simplifies adding tracking codes directly within your store's settings.

Key Shopify Components

  • Custom Pixels: Code snippets for tracking events (e.g., the GroundTruth Pixel) that you add directly into your store’s settings.
  • Customer Events: Actions taken by shoppers (e.g., add to cart, purchase) that trigger pixel scripts to report key conversion insights.

💡 Important Dual-Placement Requirement: To capture the full range of user behaviors, place the pixel in two separate locations in Shopify:

  • Theme Code (theme.liquid): Place the Base Pixel in your theme file for standard site engagement (pageviews, clicks, scrolls).
  • Shopify Custom Pixel: Place e-commerce event scripts in Shopify Settings to listen for sandboxed customer events (Add to Cart, Purchase).

For more information about native Shopify capabilities, refer to Shopify’s Pixels Overview and Pixels and Customer Events.


Part 1: Install the GroundTruth Pixel Into Theme Code

Follow these steps to implement the base pixel code into your active Shopify theme file:

  1. From your Shopify admin dashboard, select Online Store > Themes from the left menu.
  2. Locate your active theme, click Actions (the three dots next to Customize), and select Edit Code.
  3. In the code editor, open Layout > theme.liquid from the left sidebar.
  4. Search for the closing </head> tag in the file.
  5. Copy your auto-generated Base Pixel code snippet from Ads Manager (Step 6: Measurement) and paste it just above the </head> tag.
  6. Click Save.
  7. Test implementation using our [Validation Steps] to confirm standard engagement events fire across all pages.

Part 2: Install GroundTruth Custom Events via Shopify Pixels

To measure e-commerce bottom-funnel conversions, configure native Custom Pixels inside Shopify Settings.

🛍️ Add to Cart

  1. In Shopify, navigate to Settings > Customer Events (bottom left).
  2. Click Add custom pixel, name it (e.g., GroundTruth Cart Pixel), and click Add pixel.
  3. Copy your Base Pixel script from Ads Manager and paste it under // Step 1. Initialize the JavaScript pixel SDK (ensure you exclude HTML <script> wrappers).
  4. Paste the following code under // Step 2. Subscribe to customer events with analytics.subscribe():

    analytics.subscribe('product_added_to_cart', (event) = {
      // Access 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', { 
        'amount': cartLineCost
      });
    });
  5. Review privacy settings, click Save (top center), and then click Connect (top right).

💳 Purchase

  1. In Shopify, navigate to Settings > Customer Events > Add custom pixel.
  2. Name the pixel (e.g., GroundTruth Purchase Pixel) and click Add pixel.
  3. Paste your Base Pixel script from Ads Manager under // Step 1. Initialize the JavaScript pixel SDK (exclude HTML wrappers).
  4. Paste the following code under // Step 2. Subscribe to customer events with analytics.subscribe():

    analytics.subscribe('checkout_completed', async (event) = {
      // Access event data
      const checkout = event?.data?.checkout;
      const checkoutTotalPrice = checkout.totalPrice?.amount;
      gtpx('purchase', { 
        'value': checkoutTotalPrice
      });
    });
  5. Review privacy settings, click Save (top center), and then click Connect (top right).
💡 Testing Tip: Place a test order using Shopify’s Bogus Gateway to simulate a completed transaction and verify connected status on the Customer Events page.

Troubleshooting & Support

If you experience issues during configuration:

  • Review Shopify's developer guides for Add to Cart Events and Purchase Events.
  • Consult your store developer to confirm pixel scripts align with custom theme modifications.

⚠️ Using Classic Ads Manager? Setup workflows and UI views in this guide reflect the updated platform experience. If you are using our legacy interface, please contact a GroundTruth representative for guidance.

 

Frequently Asked Questions

  1. How do I generate the pixel? Your Base Pixel snippet is automatically generated with your unique account identifier (gtid) inside Ads Manager at Step 6 (Measurement) during campaign creation.
  2. Do I need to generate a new pixel for every campaign? No. Pixels are managed at the account level and can be reused across campaigns driving traffic to the same domain.
  3. What if my site uses a 3rd-party checkout platform? If users are redirected to an external domain during checkout, tracking data may be lost. We recommend directing ad traffic and conversion tracking to pages hosted on your primary domain whenever possible.

Need Help?

For additional support and to ensure your campaign is set up for success, please reach out to your dedicated GroundTruth representative, or contact our Self-Serve team directly at selfservehelp@groundtruth.com.

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.