Tracking TikTok Pixel View Content Events on Shopify with Google Tag Manager

by ShahzadaAliHassan - 10th December 2023

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

To effectively monitor user interactions on your Shopify store, it's crucial to integrate the Google Tag Manager (GTM). Here's a revised guide for setting up GTM scripts on your Shopify platform.

Integrating Google Tag Manager with Shopify

Begin by incorporating the essential Google Tag Manager scripts into your Shopify store to efficiently capture user behavior and gather insightful data.

Embedding GTM Scripts

Proceed to embed the head and body scripts of the GTM container within the theme files of your Shopify store.

Access the theme.liquid file via Shopify's admin interface.
Embed the GTM container's head script immediately after the <head> tag.
Place the GTM container's body script right after the <body> tag opens.

Scripts for GTM Container

For the head script:

And for the body script:

Post-script insertion, confirm the setup's accuracy to ensure GTM's optimal performance on your Shopify site.

Process for GTM Implementation on Shopify:

Sign into your Shopify admin and head to the Themes area.
Choose your current theme and select 'Edit code'.
In the theme.liquid file, insert the GTM scripts as previously described.
Save your modifications and evaluate the setup with GTM's preview mode.

Script Addition Procedure for Shopify

Start by adding both the head and body scripts from Google Tag Manager to your Shopify store. Retrieve these scripts from your GTM container. While the head script is crucial, including both scripts guarantees a comprehensive setup.
Locate and modify your Shopify theme file, typically found at the top of your theme directory. In this file, insert the Google Tag Manager scripts below the opening tags of head and body.
Post insertion, employ Shopify's 'Format Liquid' tool to neatly organize the code, enhancing its readability and reducing error likelihood.

Verifying GTM Setup

Use Google Tag Manager’s preview mode to confirm the correct setup. This step is vital to ensure that the GTM container is functioning as intended on your Shopify site, forming a solid foundation for future Analytics and Ads tracking enhancements.

Note Substitute 'GTM-XXXX' with your specific Google Tag Manager container ID.

Section 2: Integrating TikTok Base Script in Tag Manager

We're delving into the integration of the TikTok base configuration tag into Google Tag Manager (GTM), a pivotal step for optimizing your digital marketing strategies. This detailed process involves acquiring the unique TikTok Pixel ID and the corresponding base script from the TikTok Ads Manager. Once these elements are in hand, they're incorporated into GTM as a custom HTML tag. Additionally, for streamlined future modifications, a dedicated variable for the TikTok Pixel ID is established.

1. Accessing Your TikTok Ads Manager

Initial Login: Start by logging into your TikTok Ads Manager.
Pixel Setup:
- For New Users: Navigate to the pixel section and initiate the creation of a new pixel.
- For Existing Users: Locate and record your existing pixel ID for later use.

2. Manual Pixel Configuration

Selection for Manual Setup: Opt for a manual setup of the pixel, allowing for customization specific to your needs.
Pixel Naming and Setup Avoidance: Assign a unique name to your pixel, ensuring to skip any automatic setup prompts to maintain control over the configuration.

3. Embedding the Pixel in Google Tag Manager

Access GTM Dashboard: Open your Google Tag Manager interface.
Creation of a Custom Tag: Initiate a new custom HTML tag within GTM.
Embedding Pixel Code: Carefully paste the TikTok pixel script into this newly created tag.
Trigger Configuration: Set up the tag trigger to activate on all pages, thereby enabling comprehensive page view tracking.

4. Establishing a Variable for the Pixel ID

Variable Creation in GTM: Forge a new variable specifically in Google Tag Manager.
Assignment of Pixel ID: Link your TikTok Pixel ID to this newly created variable.
Future-Proofing: This step is crucial for simplifying future updates and ensuring uniformity in your tracking configurations.

5. Validating TikTok Pixel Functionality

Utilizing Diagnostic Tools: Employ the TikTok Pixel Helper, or similar browser extensions, for diagnostic purposes.
Site Navigation and Verification: Traverse through your Shopify store, meticulously checking if the pixel events (such as page views) are triggering as intended.
Comprehensive Event Tracking: Confirm the accurate tracking of all intended events, ensuring no critical interactions are missed.

6. Finalizing and Publishing Your Configuration

Post-Testing Review: Once you're satisfied with the testing phase, return to Google Tag Manager.
Configuration Audit and Finalization: Thoroughly review your configurations for accuracy and completeness.
Going Live: Publish your changes to activate the TikTok pixel on your Shopify store.

Following these steps will ensure a robust and effective TikTok pixel setup on your Shopify store, paving the way for insightful data on customer interactions and behaviors, thereby enhancing your marketing strategies and customer engagement.

Section 3: Writing View Content Script in Shopify

In the third section, we script the View Content event trigger in the Shopify store. This script, found in our detailed blog post, is added to Shopify as a snippet. This snippet ensures that the View Content event is fired correctly when users visit product pages.

Initializing the DataLayer

Initially, we establish the dataLayer array, ensuring it exists before proceeding. This includes checking if the current page is a 'product' page and, if so, activates a specific snippet named 'datalayer-product'.

Gathering Product Information

The 'datalayer-product' snippet's role is to gather key product details when a product page is visited. This involves:

Capturing the current product variant.
Creating an itemObject containing detailed product information.
Pushing this data into the dataLayer upon the document's loading.

Embedding Theme-Specific DataLayer Code

To incorporate the dataLayer code specific to your theme, embed the 'head-datalayer' snippet in the GTM Body Code section, adapting it to fit your Shopify theme's setup.

Steps for Shopify DataLayer Code Implementation:

Backup Creation: Start by backing up your current theme.
Theme File Access: Navigate to Online Store > Themes in your Shopify Admin. Choose "Edit code" from the "Actions" menu of your active theme.
Head DataLayer Code Insertion: Locate theme.liquid in the left sidebar and embed the "Head DataLayer Code" within the <head> tags.
Product DataLayer Code Addition: Make a new snippet (possibly naming it datalayer-product.liquid) and insert the "Product DataLayer Code". Remember to save.
Theme DataLayer Code Integration: Pinpoint the optimal spot within the <head> tags in theme.liquid for your "Theme DataLayer Code" and place it there. Save your modifications.
Verification: Check the functionality by visiting a product page on your Shopify site, open the developer console of your browser, and confirm if the custom_view_item event is activated with correct product details in the dataLayer.

Following these instructions will ensure your Shopify site effectively captures data, enhancing tracking and analytics capabilities.

Section 4: Configuring the TikTok View Content Tag

In this section, we'll dive into the specifics of configuring the TikTok View Content tag in Google Tag Manager (GTM) to track your dataLayer for GTM. This step is essential to ensure that TikTok's pixel can effectively capture the View Content event on your Shopify store.

Access Your Google Tag Manager Container: Log in to your Google Tag Manager account and navigate to the container you've set up for your Shopify store.
Create a New Tag: Within the GTM dashboard, click on "Tags" in the left sidebar. Then, click the "New" button to create a new tag specifically for TikTok View Content tracking.
Tag Configuration: For the tag configuration, choose a tag type designed for TikTok. If available, use the TikTok tag template provided by the TikTok team or the GTM community. If not, you can create a custom HTML tag.
Set Up the Trigger: You want this tag to fire only when the View Content event occurs. Create a new trigger for this purpose, naming it something like "CE custom_view_item" to avoid any spelling errors.
Configure the TikTok Tag: In the tag configuration, specify the TikTok pixel ID. You can use a variable to store the pixel ID for easier management and updates.
Select the Event: Choose the event you wish to track with this tag, which in this case, is "View Content."
Object Properties: Depending on your specific requirements, configure object properties to capture details about the viewed product, such as its name, ID, category, and any other relevant data. This information can be sourced from your dataLayer or provided directly.
Include the Currency Parameter: If your e-commerce setup includes the currency parameter, ensure it's included in the data sent to TikTok along with the event.

Section 5: Testing and Verification of the View Content Script

After configuring the TikTok View Content tag in Google Tag Manager, it's vital to thoroughly test and verify that everything is functioning correctly. This verification phase ensures that the View Content event is accurately captured and transmitted to TikTok for optimal ad campaign performance.

To test the View Content event:

Enable Preview Mode: Activate the preview mode in Google Tag Manager. This connects a temporary debug view to your Shopify store, allowing you to monitor events, tags, and triggers.
Debugging Tools: If you have installed the TikTok Pixel Helper browser extension, use it to monitor TikTok pixel events. Pay close attention to the View Content event and confirm it contains the expected product data.
Visit Product Pages: Navigate to various product pages on your Shopify store to simulate user interactions. Check the debug window to ensure the View Content event fires correctly, including all relevant data.
Validate Event Data: Review the data sent with the View Content event, ensuring it accurately reflects the viewed product. This should include details like product name, ID, category, and the currency parameter if applicable.
Submit Changes: In Google Tag Manager, submit the changes you've made, including the newly created TikTok View Content tag and associated triggers.
Publish Changes: Click the "Publish" button in Google Tag Manager to make the changes live on your Shopify store. This step ensures that the TikTok View Content tag can actively track user interactions and send data to TikTok for campaign optimization.

By following the specific steps outlined in Section 3 and conducting thorough testing and verification as described in Section 4, you can successfully configure the TikTok View Content tag in Google Tag Manager to track your dataLayer for GTM. This meticulous approach will help you ensure the accuracy and effectiveness of your TikTok ad campaigns.