TrackingAcademyContact

Tracking TikTok Pixel Add to Cart Events on Shopify with Google Tag Manager

by ShahzadaAliHassan - 11th December 2023
Add to Cart
Shopify
E-commerce Conversions
Google Tag Manager
Online Retail Analytics

In this Blog , we'll explore how to effectively integrate TikTok Pixel Add to Cart Event with your Shopify store using Google Tag Manager (GTM). This integration is crucial for leveraging TikTok's dynamic ad capabilities based on user interactions on your site.

Section 1: Configuring Google Tag Manager on Shopify

First we need to make sure our GTM Container is present on the Shopify store to track all the user interaction.

Setting Up Google Tag Manager Scripts

First, add the Google Tag Manager scripts to your Shopify store. These scripts are critical for tracking user interactions and collecting valuable data.

Inserting GTM Container Codes

Next, insert the head and body scripts from the Google Tag Manager container into your Shopify store’s theme files.

  1. Locate and open the theme.liquid file in your Shopify admin.
  2. Paste the GTM container head script right after the opening <head> tag.
  3. Paste the GTM container body script immediately after the opening <body> tag.

GTM container head script

GTM container body script

After inserting the scripts, it’s important to validate the setup to ensure that Google Tag Manager is functioning correctly on your Shopify store.

Steps for Configuring GTM on Shopify:

  1. Log in to your Shopify admin panel and navigate to the Themes section.
  2. Select your active theme and click on 'Edit code'.
  3. Find the theme.liquid file and insert the GTM scripts as instructed above.
  4. Save your changes and test the setup using the GTM preview mode.

Adding Scripts to Your Shopify Store

  1. To begin, you need to add the head and body scripts from Google Tag Manager to your Shopify store. This can be done by accessing the Google Tag Manager container to retrieve these scripts. Remember, while only the head script is essential, including both ensures thorough implementation.
  2. The next step is to locate and edit your theme file in Shopify. This file is typically the first or second file listed in your theme directory. Once located, insert the Google Tag Manager scripts under the opening head tag and the opening body tag of your theme file.
  3. After pasting the scripts, it's important to format the changes using the 'Format Liquid' feature in Shopify. This ensures the code is properly structured, making it more readable and less prone to errors.

Previewing Google Tag Manager

To ensure that everything is set up correctly, use the Google Tag Manager’s preview function. This will allow you to verify that the container is firing correctly on your Shopify store. This setup ensures that Google Tag Manager is properly configured in your Shopify store, laying the groundwork for other Analytics and Ads tracking and optimization.

Note Remember to replace 'GTM-XXXX' with your actual Google Tag Manager container ID.

Section 2: Integrating TikTok Base Script in Tag Manager

Next, we focus on adding the TikTok base configuration tag in GTM. This process requires obtaining the TikTok Pixel ID and the base script from your TikTok Ads Manager. Once obtained, these are added to GTM as a custom HTML tag. For ease of future use, we also create a variable for the TikTok Pixel ID.

Step 1: Accessing TikTok Ads Manager

  1. Log in to your TikTok Ads Manager account.
  2. If you’re new to TikTok ads, create a new pixel by navigating to the pixel section. For existing users, note down your pixel ID.

Step 2: Manual Pixel Setup

  1. Choose to set up the pixel manually for a more tailored approach.
  2. Name your pixel and ensure to bypass any automatic setup options.

Step 3: Adding the Pixel to Google Tag Manager

  1. Open your Google Tag Manager dashboard.
  2. Create a new custom HTML tag.
  3. Paste the TikTok pixel code into this tag.
  4. Configure the trigger for this tag to fire on all pages, enabling page view tracking.

Step 4: Creating a Variable for the Pixel ID

  1. In Google Tag Manager, create a new variable.
  2. Assign your TikTok pixel ID to this variable.
  3. This step ensures ease of updating the pixel ID in the future, maintaining consistency across your tracking setup.

Step 5: Testing TikTok Pixel Events

  1. Use tools like the TikTok Pixel Helper browser extension.
  2. Navigate through your Shopify store and verify if the pixel events (like page views) are firing correctly.
  3. Ensure that all desired events are being tracked accurately.

Step 6: Publish Your Changes

  1. After successful testing, go back to Google Tag Manager.
  2. Review your configurations and publish the changes.
  3. This action will make the TikTok pixel live on your Shopify store.

By following these steps, you'll have a fully functional TikTok pixel set up in your Shopify store, providing valuable insights into your customer's interactions and behaviors.

Section 3: Writing AddToCart Script in Shopify

This section outlines how to enable a dataLayer object for Google Tag Manager (GTM) in a Shopify store. The primary objective is to track when users click the AddToCart button on a product page, triggering a custom_add_to_cart event.

Initialization of Head DataLayer

The following code sets up the dataLayer array if it's not already active. It specifically checks for 'product' page templates and applies a 'datalayer-product' snippet.

Product Page DataLayer Script

This snippet is the core for injecting product details into the dataLayer when viewing a product page. It involves:

  1. Capturing the current product variant.
  2. Creating an itemObject with extensive product information.
  3. Pushing this data to the dataLayer on document load.

Integration of Theme DataLayer

This script calls the head-datalayer snippet. Depending on your Shopify theme setup, this is likely the location for the head datalayer script. Incorporate this into the GTM Body Code.

Procedures for Embedding DataLayer Scripts in Shopify:

  1. Backup First: Always create a backup of your existing theme before modifications.

  2. Theme File Access: Log into Shopify Admin. Navigate to Online Store > Themes. Select "Actions" for your live theme and choose "Edit code".

  3. Embed Head DataLayer Script: Find theme.liquid in the left sidebar and open it. Place the "Head DataLayer Code" within the <head> section.

  4. Insert Product DataLayer Script: Use "Add a new snippet" (varies by Shopify version). Name it datalayer-product.liquid. Add the "Product DataLayer Code" to this file and save.

  5. Place Theme DataLayer Script: Decide the script's location (typically in the <head> of theme.liquid). Insert the "Theme DataLayer Code" accordingly and save.

  6. Verification: Check a product page on your Shopify store. Open the browser's developer console to ensure the custom_add_to_cart event triggers and the dataLayer has accurate product details.

Note: These steps are based on a standard Shopify configuration. Custom themes might necessitate alternative methods. Always conduct thorough testing before and after applying these changes.

Section 4: Configuring the Custom Add to Cart Tag in Google Tag Manager

In this section, we'll explore the steps to configure a custom Add to Cart tag in Google Tag Manager (GTM) to track cart additions in your Shopify store. This is crucial for capturing Add to Cart events and optimizing your marketing efforts.

  1. Access Your Google Tag Manager Container: Sign in to Google Tag Manager and go to your Shopify store's container.

  2. Create a New Tag: Go to the "Tags" section in GTM and click "New" to set up a tag for tracking Add to Cart events.

  3. Tag Configuration: Choose a tag type suitable for tracking e-commerce events. If there's a specific template for Add to Cart events, use it. Otherwise, create a custom HTML tag.

  4. Set Up the Trigger: Create a new trigger that fires on Add to Cart actions. Name it appropriately (like "CE custom_add_to_cart") to prevent any confusion.

  5. Configure the Tag: Enter the necessary information, such as your tracking ID or pixel ID. Use variables for easy management.

  6. Select the Event: Choose "Add to Cart" as the event this tag will track.

  7. Object Properties: Define object properties to capture details about the added product, like name, ID, category, and other relevant information. Pull this data from your dataLayer or define it directly.

  8. Include the Currency Parameter: If your store uses different currencies, make sure to include the currency parameter in the data sent with the Add to Cart event.

Section 5: Testing and Verification of the Add to Cart Script

After setting up the custom Add to Cart tag, it's essential to test and verify its functionality to ensure accurate tracking.

  1. Enable Preview Mode: Turn on preview mode in GTM to debug your Shopify store in real-time.

  2. Use Debugging Tools: Utilize tools like browser extensions to monitor the tracking of Add to Cart events. Ensure that all necessary product data is included.

  3. Test on Product Pages: Visit several product pages and add items to the cart. Check the debug window to confirm that the Add to Cart event is triggering correctly.

  4. Validate Event Data: Review the data sent with each Add to Cart event to ensure it accurately reflects the added product, including name, ID, category, and currency.

  5. Submit Changes: After verifying everything, submit your changes in Google Tag Manager.

  6. Publish Changes: Click "Publish" in GTM to apply the changes to your Shopify store. This activates the Add to Cart tracking for your marketing analytics.

By adapting the steps used for configuring the TikTok View Content tag, you can effectively set up and test a custom Add to Cart event in Google Tag Manager, enhancing your e-commerce tracking and data analysis capabilities.