Master TikTok Ads: Track View Category Events on Shopify with GTM

by ShahzadaAliHassan - 15th December 2023

In this Blog , we'll explore how to effectively integrate TikTok Pixel ViewCategory 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 begin, it's crucial to confirm that your Shopify store includes the Google Tag Manager (GTM) Container, as this is key for tracking user interactions.

Implementing Google Tag Manager on Shopify

Start by embedding the Google Tag Manager scripts in your Shopify store. These scripts are vital for monitoring user activity and gathering significant data.

Integrating GTM Container Scripts

Proceed by embedding the head and body scripts from your Google Tag Manager container into the theme files of your Shopify store.

Access the theme.liquid file in your Shopify admin area.
Embed the GTM container head script immediately following the opening <head> tag.
Embed the GTM container body script right after the opening <body> tag.

Code for GTM Container Head

Code for GTM Container Body

Post-script insertion, it's vital to check the setup to confirm that Google Tag Manager operates effectively on your Shopify store.

Steps to Implement GTM in Shopify:

Log into your Shopify admin and head to the Themes section.
Choose your active theme and opt for 'Edit code'.
In the theme.liquid file, embed the GTM scripts as detailed above.
Save the adjustments and assess the setup through GTM preview mode.

Embedding Scripts in Your Shopify Store

Initially, integrate both the head and body scripts from Google Tag Manager into your Shopify store. Acquire these scripts from the Google Tag Manager container. Though the head script is crucial, adding both guarantees comprehensive implementation.
Next, find and modify your Shopify theme file. This file is usually prominently placed in your theme directory. After finding it, place the Google Tag Manager scripts beneath the opening head tag and the opening body tag of your theme file.
Post-script insertion, format the edits using Shopify's 'Format Liquid' feature to ensure the code is well-organized, enhancing readability and reducing error likelihood.

Testing Google Tag Manager

To confirm correct setup, utilize the Google Tag Manager’s preview feature. This helps verify that the container is operational on your Shopify store. Such a setup guarantees that Google Tag Manager is correctly configured in your Shopify store, essential for subsequent Analytics and Ads tracking and optimization.

Note Be sure to substitute 'GTM-XXXX' with your specific Google Tag Manager container ID.

Section 2: Integrating TikTok Base Script in Tag Manager

In this comprehensive guide, we delve into the detailed process of integrating the TikTok base configuration tag into Google Tag Manager (GTM). This advanced setup involves acquiring the TikTok Pixel ID and the corresponding script from the TikTok Ads Manager, and subsequently embedding them into GTM as a custom HTML tag. Additionally, for streamlined future modifications, we will establish a variable specifically for the TikTok Pixel ID.

Step 1: Access TikTok Ads Manager for Pixel ID

Sign in to your TikTok Ads Manager.
If you're initiating TikTok ads, create a new pixel by locating the pixel section in the dashboard. For those already using TikTok ads, simply jot down your existing pixel ID.

Step 2: Custom Manual Setup of TikTok Pixel

Opt for manual configuration to customize the pixel setup according to your specific needs.
Assign a unique name to your pixel, and carefully avoid any automatic setup options to maintain full control over the configuration.

Step 3: Embedding the Pixel in Google Tag Manager

Navigate to your Google Tag Manager dashboard.
Initiate a new custom HTML tag creation.
Embed the TikTok pixel script within this newly created tag.
Set the tag's trigger to activate on all page loads, which is crucial for tracking page views.

Step 4: Establishing a Variable for the Pixel ID in GTM

In GTM, go to the 'Variables' section and create a new variable.
Link this new variable to your TikTok pixel ID.
This approach is advantageous as it simplifies the process of updating the pixel ID in the future and ensures consistency in your tracking configurations.

Step 5: Rigorous Testing of the TikTok Pixel Implementation

Utilize the TikTok Pixel Helper, a browser extension tool, for testing.
Browse through your Shopify store and monitor whether the pixel events (such as page views) are being triggered correctly.
Confirm the accurate tracking of all targeted events to ensure comprehensive data collection.

Step 6: Finalizing and Publishing Your GTM Configuration

After thorough testing and ensuring everything works flawlessly, return to your GTM dashboard.
Re-examine your configurations for accuracy and completeness.
Proceed to publish these changes, which will activate the TikTok pixel on your Shopify store.

By meticulously following these enhanced steps, you will successfully implement a fully operational TikTok pixel in your Shopify store. This setup not only provides deep insights into customer interactions but also enhances the effectiveness of your digital marketing strategies.

Section 3: Writing ViewCategory Script in Shopify

The script initiates by setting up the dataLayer array. Its first task is to determine if it's on a product page, and if so, it activates the 'datalayer-collection' snippet.

Script for DataLayer on Collection Pages

This script's main role is to add detailed product information to the dataLayer when a collection page is visited:

It starts by pinpointing the current variant of the product.
Next, it constructs an itemObject holding a variety of product details.
As the document loads, these details are incorporated into the dataLayer.
The file should be saved as datalayer-collection.liquid.

DataLayer Script for Shopify Themes

This script runs the head-datalayer snippet, typically embedded in the head section of a Shopify theme. It's essential for embedding the head datalayer code and should be integrated with the GTM Body Code.

Guidelines for Implementing DataLayer Scripts in Shopify:

Initial Backup: Start by creating a backup of your existing theme as a safety measure.
Accessing Theme Files: Go to your Shopify Admin, select Online Store > Themes, choose your active theme, click "Actions," and then "Edit code".
Inserting the Head DataLayer Script: In the theme.liquid file found in the sidebar, insert the "Head DataLayer Script" within the <head> tags.
Adding the Product DataLayer Script: Choose to "Add a new snippet" (this may vary based on the Shopify version). Name this new snippet datalayer-product.liquid and incorporate the "Product DataLayer Script". Remember to save your changes.
Placing the Theme DataLayer Script: Identify a suitable location (usually within the <head> of theme.liquid) for the "Theme DataLayer Script". Insert and save.
Testing the Integration: Confirm the setup by visiting a product page on your Shopify store. Open the developer console in your browser to check if the custom_view_item event is triggered and whether the dataLayer shows correct product details.

Section 4: Configuring the Custom Purchase Tag for TikTok in Google Tag Manager

In this essential section, we delve into setting up a custom purchase tag in Google Tag Manager (GTM) for TikTok's pixel. This process is vital for accurately tracking purchase events in your Shopify store. Follow these straightforward steps:

Log into GTM: Access your GTM account and navigate to the container associated with your Shopify store.
Select TikTok Pixel Template: In GTM, find and use the TikTok Pixel template. This template is specially designed for seamless TikTok pixel integration.
Tag Configuration: Input your TikTok Pixel ID in the 'Pixel ID' setting. Then, choose 'Complete Purchase' as the event type.
Data Layer Variables Setup: Extract essential user data (like email and phone number) through Data Layer Variables for precise tracking.
Define Event Parameters: Utilize the G4 data layer structure to specify event parameters such as 'currency', aligning with your e-commerce configuration.
Create Trigger for the Tag: Develop a custom event trigger that activates for your Shopify store's purchase event, matching the event name in your data layer script.
Save and Name Your Tag: After configuration, save your tag. A clear name, such as 'TikTok Purchase Event', is recommended for easy identification.

Section 5: Testing and Verification of the TikTok Purchase Event Tag

Testing and verifying your tag ensures it functions as intended:

Enable GTM Preview Mode: Activate preview mode in GTM for a live test connection with your Shopify store.
Simulate a Purchase: In your Shopify store, simulate a purchase transaction. You can use test mode or a 100% discount code for this purpose.
Verify the Purchase Event: Post-purchase, in the GTM debug window, check that the custom purchase event triggers correctly.
Use TikTok Pixel Helper: Confirm the correct firing of the 'Complete Purchase' event on the thank you page with the TikTok Pixel Helper tool.
Data Layer Verification: Ensure accurate transmission of transaction details (transaction ID, value, product details) and user data (email, phone number).
Publish GTM Container Changes: Once satisfied with the tracking accuracy, publish the changes in your GTM container to activate live tracking on your Shopify store.

Conclusion

Successfully configuring and verifying a custom purchase tag for TikTok in Google Tag Manager involves a systematic approach. From accessing GTM, choosing the right template, setting up tag configurations, to thorough testing and verification, each step is crucial for accurate event tracking. This setup not only provides valuable insights into customer behavior but also boosts the efficiency of your TikTok advertising campaigns. With this integration, you're well-equipped to harness TikTok's advertising power, leveraging data-driven strategies for your online store.