TrackingAcademy.comEnroll Now

Optimizing Shopify Sales: Mastering Purchase Event Tracking with TikTok Pixel and Google Tag Manager

by ShahzadaAliHassan - 14th December 2023

Purchase Event
Shopify Sales
E-commerce Conversion Tracking
Google Tag Manager Integration
TikTok Pixel Analytics

In this Blog , we'll explore how to effectively integrate TikTok Pixel Purchase 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 essential to integrate the Google Tag Manager (GTM) Container.

Integrating Google Tag Manager into Shopify

Begin by embedding the necessary Google Tag Manager scripts into your Shopify store. These scripts are pivotal for capturing user activities and gathering insightful data.

Implementing GTM Container Scripts

Proceed by embedding the GTM container's head and body scripts into the theme files of your Shopify store.

  1. Access the theme.liquid file via the Shopify admin interface.
  2. Embed the GTM container head script immediately following the <head> tag.
  3. Embed the GTM container body script right after the <body> tag.

Code for GTM container's head section

Code for GTM container's body section

Post-implementation, it's crucial to confirm the functionality of Google Tag Manager in your Shopify store.

Implementing GTM on Shopify: Key Steps

  1. Log into the Shopify admin area and head to the Themes section.
  2. Choose the active theme and opt for 'Edit code'.
  3. In the theme.liquid file, insert the GTM scripts as detailed earlier.
  4. Save and verify the setup through GTM's preview mode.

Embedding Scripts in Shopify

  1. Begin by retrieving the head and body scripts from your Google Tag Manager container and adding them to your Shopify store. While the head script is necessary, adding both scripts is recommended for a comprehensive setup.
  2. Find and edit your theme file in Shopify, typically listed at the top of your theme directory. Insert the Google Tag Manager scripts below the opening tags of the head and body sections of this file.
  3. Post-insertion, format the scripts using Shopify's 'Format Liquid' feature, ensuring neat code arrangement and minimizing errors.

Verifying GTM Setup

Use Google Tag Manager’s preview mode to verify correct setup, ensuring the container is operational on your Shopify store. This step is critical for the effective functioning of Google Tag Manager, paving the way for subsequent Analytics and Ads tracking enhancements.

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

Section 2: Integrating TikTok Base Script in Tag Manager

Our next objective involves integrating the TikTok base configuration tag into Google Tag Manager (GTM). This procedure starts with acquiring the unique TikTok Pixel ID and the foundational script directly from your TikTok Ads Manager. Once these components are in your possession, they are to be incorporated into GTM as a bespoke HTML tag. To streamline future modifications, we will also establish a dedicated variable for the TikTok Pixel ID.

Step 1: Access and Setup in TikTok Ads Manager

  1. Sign into your TikTok Ads Manager account.
  2. For newcomers, initiate a pixel setup by going to the pixel section and creating a new pixel. Existing users should locate and record their existing pixel ID.

Step 2: Customized Pixel Configuration

  1. Opt for a manual setup of your TikTok pixel, allowing for a more customized integration.
  2. Assign a unique name to your pixel, making sure to avoid any default setup options.

Step 3: Implementing Pixel in Google Tag Manager

  1. Navigate to your Google Tag Manager dashboard.
  2. Initiate a new custom HTML tag within GTM.
  3. Carefully insert the TikTok pixel script into this new tag.
  4. Set up the tag's trigger to activate on every page visit, thereby enabling comprehensive tracking of page views.

Step 4: Efficient Management of Pixel ID

  1. Within GTM, proceed to create a new variable.
  2. Link this variable to your specific TikTok pixel ID.
  3. This approach simplifies future updates to the pixel ID and ensures consistent tracking configurations.

Step 5: Verifying Functionality of TikTok Pixel Events

  1. Employ diagnostic tools, such as the TikTok Pixel Helper browser extension, for testing.
  2. Conduct a thorough walkthrough of your Shopify store to check the firing accuracy of pixel events, particularly page views.
  3. Confirm that all critical events are being captured and reported correctly.

Step 6: Finalizing and Activating Your Setup

  1. After thorough testing and confirmation of functionality, return to your Google Tag Manager dashboard.
  2. Review and finalize all configurations, ensuring they meet your requirements.
  3. Publish these changes to activate the TikTok pixel on your Shopify store.

By adhering to these comprehensive steps, you will successfully establish a fully operational TikTok pixel in your Shopify store. This setup is key to gaining deeper insights into customer interactions and behaviors, enhancing your digital marketing strategies.

Section 3: Writing Purchase Script in Shopify

The provided instructions outline how to incorporate the dataLayer object of Google Tag Manager (GTM) with a Shopify storefront. This setup is designed to trigger a custom_purchase event when a customer lands on the Shopify /thank-you/ page following a payment.

Tracking Purchases with Order Status DataLayer in Shopify

  1. The given script, when integrated with a Shopify site, tracks and analyzes purchase data.
  2. It identifies first-time site visitors (first_time_accessed) and, for existing customers, retrieves their order history and spending totals.
  3. The script establishes the dataLayer object, if it isn't present, and fills it with purchase specifics such as transaction ID, total amount, shipping, tax, currency, and item details within the order.
  4. These item details cover various product features, including ID, SKU, name, price, brand, variant, quantity, and other relevant information.

Implementing the DataLayer Code in Shopify:

  1. Accessing Your Shopify Admin Area:

    • Navigate to your Shopify store's URL, appending /admin.
    • Log in to reach the admin area.

  2. Navigating to Checkout Options:

    • Click Settings on the menu to the left.
    • Choose Checkout from the dropdown menu.

  3. Finding the Additional Scripts Option:

    • In the Order processing section, locate the Additional Scripts text box, designed for scripts that execute on the order status page post-purchase.

  4. Inserting the Script:

    • Take the script you've prepared.
    • Insert it into the Additional Scripts field.

  5. Saving Your Work:

    • Post script insertion, scroll down and click Save.

  6. Script Testing (Crucial):

    • Perform a test transaction to confirm the script's functionality on the order status page.
    • Verify the proper data collection and its integration into the dataLayer.

Reminder: The Additional Scripts section under Checkout settings is intended for scripts that activate following a purchase completion. This includes conversion tracking, analytics, and other sale-confirmation scripts.

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

In this section, we focus on setting up a custom purchase tag in Google Tag Manager (GTM) for TikTok pixel integration. To accomplish this, we'll leverage a template provided by the TikTok pixel team. Follow these steps:

  1. Access Google Tag Manager: Log into your GTM account and open the container linked to your Shopify store.

  2. Use the TikTok Pixel Template: Choose the TikTok Pixel tag template, available in GTM's template gallery. This template is specifically designed for TikTok pixel integration.

  3. Configure the Tag Settings: In the tag configuration, set the 'Pixel ID' to the variable storing your TikTok Pixel ID. For the event type, select 'Complete Purchase'.

  4. Set Up Data Layer Variables: Ensure you extract necessary user data, such as email and phone, using Data Layer Variables. This information is crucial for accurate tracking and attribution.

  5. Define Event Parameters: Use the G4 data layer system for defining event parameters like 'currency', ensuring they align with your e-commerce setup.

  6. Assign a Trigger for the Tag: Create a custom event trigger that activates for the specific purchase event. Use the event name that matches your data layer script.

  7. Finalize and Save Your Tag: After setting up the configurations, save your tag. Ensure it's aptly named for easy identification, like 'TikTok Purchase Event'.

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

After configuring the tag, it's essential to test and verify its functionality.

  1. Activate Preview Mode in GTM: In your GTM dashboard, enable the preview mode. This action will connect the GTM container with your Shopify store for testing purposes.

  2. Conduct a Test Purchase: Visit your Shopify store, add a product to the cart, and proceed to checkout. Use a test mode or a 100% discount code to simulate a purchase transaction.

  3. Inspect the Purchase Event on the Thank You Page: After completing the purchase, check the GTM debug window for the custom purchase event. Ensure it's triggered as expected.

  4. Utilize TikTok Pixel Helper for Verification: With the TikTok Pixel Helper tool, confirm that the 'Complete Purchase' event is firing correctly on the thank you page.

  5. Check Data Layer for Accurate Event Data: Ensure that all the transaction details, including the transaction ID, value, and product information, are correctly transmitted. Also, verify that user data such as email and phone number are captured if provided.

  6. Finalize and Publish the GTM Container: Once you have confirmed that the purchase event is tracking correctly and the data is accurate, go ahead and publish the changes in your GTM container. This step will activate the tracking on your live Shopify store.

Conclusion

In summary, setting up and verifying a custom purchase tag for TikTok in Google Tag Manager involves a series of methodical steps to ensure accurate data tracking and integration with your Shopify store. By accessing GTM, creating a new tag using the TikTok Pixel template, configuring tag settings, defining event parameters, and assigning the correct trigger, you establish a robust foundation for tracking TikTok purchase events. Testing and verification are crucial, involving GTM's preview mode, conducting test purchases, using the TikTok Pixel Helper, and thoroughly checking the data layer for correct event data.

The process culminates in the finalization and publication of the GTM container, ensuring that the tracking is live and functional on your store. This setup not only enhances your understanding of customer behavior on your Shopify site but also empowers you to optimize your TikTok advertising campaigns based on precise and reliable data. With this in place, you're well-equipped to leverage the full potential of TikTok's advertising capabilities, aligning your online store's marketing strategies with data-driven insights.