TrackingAcademyContact

Tracking TikTok Pixel Initiate Checkout Events on Shopify with Google Tag Manager

by ShahzadaAliHassan - 12th December 2023
Initiate Checkout
Shopify
E-commerce Conversions
Google Tag Manager
Checkout Optimization

In this Blog , we'll explore how to effectively integrate TikTok Pixel InitiateCheckout 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

Initial Steps for Integrating Google Tag Manager with Shopify

Integrating Google Tag Manager

Begin by integrating Google Tag Manager (GTM) into your Shopify store. This is a crucial step for monitoring and analyzing customer interactions.

Embedding GTM Scripts

Proceed to embed the GTM scripts in your Shopify store. These are fundamental for capturing and analyzing user data.

Implementing GTM Container Scripts

The following steps involve implementing GTM container scripts in your Shopify theme:

  1. In the Shopify admin, access the theme.liquid file.
  2. Insert the GTM container's head script right after the <head> tag.
  3. Immediately following the <body> tag, place the GTM container's body script.

Code for GTM Container Head

Code for GTM Container Body

Ensure to check your setup post-implementation, confirming that GTM operates correctly on your Shopify site.

Configuring GTM on Shopify:

  1. Access the Themes area in your Shopify admin.
  2. Choose your active theme and select 'Edit code'.
  3. In the theme.liquid file, insert the GTM scripts as detailed previously.
  4. Save the changes and employ GTM preview mode for testing.

Adding GTM Scripts to Shopify

  1. Start by adding both head and body scripts from GTM to your Shopify store. These scripts are retrievable from your GTM container. Although the head script is the primary requirement, including the body script completes the setup.
  2. Locate and modify your Shopify theme file, typically at the top of your theme directory. Insert the GTM scripts beneath the opening head and body tags.
  3. Post-script insertion, use Shopify's 'Format Liquid' tool for proper code structuring. This enhances readability and minimizes errors.

Validating GTM Setup

To confirm correct setup, utilize GTM's preview feature. This helps verify the container's activation on your Shopify store, essential for subsequent Analytics and Ads tracking.

Note Replace 'GTM-XXXX' with your specific GTM container ID.

Section 2: Integrating TikTok Base Script in Tag Manager

Our focus now shifts to the integration of the TikTok base configuration tag within Google Tag Manager (GTM). This detailed process involves several key steps, starting with acquiring your unique TikTok Pixel ID and the corresponding base script from the TikTok Ads Manager. Once these elements are in hand, they are incorporated into GTM as a custom HTML tag. To streamline future modifications and ensure ease of management, we also establish a dedicated variable specifically for the TikTok Pixel ID.

Step 1: Initiate Access to TikTok Ads Manager

  1. Begin by signing into your TikTok Ads Manager.
  2. If you're initiating TikTok ads, you'll need to create a pixel in the pixel section. Existing advertisers should retrieve their existing pixel ID.

Step 2: Opt for Manual Pixel Configuration

  1. Select the manual setup option for your pixel to customize its configuration.
  2. Assign a unique name to your pixel, making sure to avoid any default or automatic setup processes.

Step 3: Embedding the Pixel in Google Tag Manager

  1. Navigate to your Google Tag Manager dashboard.
  2. Create a new tag, selecting the 'Custom HTML' option.
  3. Insert your TikTok pixel code into this newly created tag.
  4. Set the trigger for this tag so it activates on every page visit, which is essential for tracking page views.

Step 4: Streamlining with a Pixel ID Variable

  1. Within GTM, proceed to create a new variable.
  2. Link this variable to your TikTok pixel ID.
  3. This strategic move simplifies future updates to the pixel ID and enhances the consistency of your tracking framework.

Step 5: Rigorous Testing of Pixel Functionality

  1. Employ tools such as the TikTok Pixel Helper, available as a browser extension.
  2. Conduct a thorough walkthrough of your Shopify store, checking for correct triggering of pixel events, particularly page views.
  3. Verify the accuracy and completeness of the event tracking to ensure all critical interactions are captured.

Step 6: Finalizing and Activating Your Setup

  1. Post-testing, return to your GTM dashboard for a final review.
  2. Confirm all settings and configurations, then proceed to publish these changes.
  3. This crucial step activates the TikTok pixel on your Shopify store, marking the completion of the setup process.

By meticulously following these steps, you'll establish a fully operational TikTok pixel within your Shopify store. This setup not only garners valuable insights into user interactions but also significantly enhances your understanding of customer behavior and engagement on your platform.

Section 3: Writing InitiateCheckout Script in Shopify

This segment is dedicated to those looking to gather comprehensive data such as item_id, item_name, value, quantity, and more during the "custom_begin_checkout" event. The provided examples of code are designed to link the dataLayer object for Google Tag Manager (GTM) with a Shopify storefront. The primary objective is to activate a custom_begin_checkout event whenever a user initiates the checkout process by clicking the Begin Checkout button on the Shopify Cart page.

Initial DataLayer Configuration

This script sets up the dataLayer array if it isn't already in place. It then verifies if the current page is a 'product' page and implements a specific snippet named 'datalayer-checkout' across all pages.

Core Checkout DataLayer Script

This portion of code is pivotal for adding product specifics to the dataLayer object when a Begin Checkout Event is activated on the Cart page. It involves:

  1. Script Confirmation: Displays a message confirming script activation.
  2. Gathering Cart & Product Info: Extracts cart data from Shopify and formats it for Google's ecommerce tracking.
  3. Total Cart Value Calculation: Determines the overall value of the cart items.
  4. Checkout Event Monitoring: Observes the page load and locates checkout buttons. For each button: Resets the dataLayer ecommerce information upon click and inputs new ecommerce data into the dataLayer for tracking via Google Tag Manager.

Theme Integration DataLayer Script

This code includes the head-datalayer snippet. Depending on your Shopify theme configuration, this script is typically found within the head datalayer code. Incorporate this into the GTM Body Code.

Guidelines for Implementing DataLayer Scripts in Shopify:

  1. Preparation: Always create a backup of your current theme before alterations.
  2. Theme File Access:
    • Sign in to your Shopify Admin.
    • Navigate to Online Store > Themes.
    • Choose "Edit code" from the "Actions" dropdown of your active theme.
  3. Incorporating Head DataLayer Script:
    • Find theme.liquid in the sidebar and click on it.
    • Place the "Head DataLayer Code" within the <head> section.
  4. Integrating Checkout DataLayer Script:
    • Depending on your Shopify version, select "Add a new snippet".
    • Name it datalayer-checkout.liquid.
    • Embed the "Checkout DataLayer Code" in this newly created file.
    • Save the modifications.
  5. Adding Theme DataLayer Script:
    • Decide the placement for this script (commonly within the <head> tags in theme.liquid).
    • Insert the "Theme DataLayer Code" at the chosen spot.
    • Apply the changes.
  6. Verification:
    • Visit a Cart page on your Shopify site and engage the Begin Checkout button.
    • Open the developer console in your browser.
    • Ensure the custom_begin_checkout event is triggered and that the dataLayer contains accurate product details.

The usage of unique prefixes in event names (such as 'custom_begin_checkout') is to avoid any clashes with other integrations or plugins that might use standard event names.

Section 4: Configuring the Custom Initiate Checkout Tag in Google Tag Manager

In this section, we'll cover the steps to configure a custom Initiate Checkout tag in Google Tag Manager (GTM) for your Shopify store. This is key for capturing Initiate Checkout events and optimizing your marketing strategies.

  1. Access Your Google Tag Manager Container: Log in to your Google Tag Manager account and select your Shopify store's container.

  2. Create a New Tag: In the GTM dashboard, navigate to the "Tags" section and click "New" to create a tag for tracking Initiate Checkout events.

  3. Tag Configuration: Choose a tag type that is appropriate for tracking e-commerce checkout events. If there's a specific template for Initiate Checkout events, use it. If not, you can create a custom HTML tag.

  4. Set Up the Trigger: Develop a new trigger that activates on checkout initiation. Name it clearly (such as "CE custom_begin_checkout") to avoid confusion.

  5. Configure the Tag: Input the necessary information, like your tracking ID or pixel ID. It’s advisable to use variables for simpler management and updates.

  6. Select the Event: Specify "Initiate Checkout" as the event that this tag is intended to track.

  7. Object Properties: Set up object properties to capture details about the products at the checkout stage, such as their names, IDs, categories, and other relevant data. This information can be sourced from your dataLayer or inputted directly.

  8. Include the Currency Parameter: Ensure that the currency parameter is included in the data sent with the Initiate Checkout event, especially if your store deals in multiple currencies.

Section 5: Testing and Verification of the Initiate Checkout Script

After configuring the custom Initiate Checkout tag, it's vital to test and verify its functionality for accurate event tracking.

  1. Enable Preview Mode: Activate the preview mode in Google Tag Manager. This allows you to monitor events, tags, and triggers in a debug environment connected to your Shopify store.

  2. Utilize Debugging Tools: Employ browser extensions or similar tools to observe the tracking of Initiate Checkout events. Ensure comprehensive data capture for each event.

  3. Simulate Checkout Process: Navigate through your Shopify store as if you are a customer. Proceed to initiate checkout on various products and observe the debug window to confirm the proper firing of the Initiate Checkout event.

  4. Validate Event Data: Examine the data transmitted with each Initiate Checkout event. Ensure it accurately reflects the details of the products at the checkout stage, including their names, IDs, categories, and currencies.

  5. Submit and Publish Changes: After thorough testing and verification, submit your changes in Google Tag Manager and then publish them. This action will activate the tracking of Initiate Checkout events in your Shopify store.

By following these revised steps, you can effectively set up and validate a custom Initiate Checkout event in Google Tag Manager, enhancing your e-commerce tracking and providing valuable insights into customer checkout behavior.