Google Ads Remarketing Tracking: Shopify AddToCart Tracking with GTM and DataLayer
Google Ads Dynamic Marketing is exceptionally effective in utilizing e-commerce event data, including product details, IDs, and names, for creating precise and efficient marketing strategies. By the end of this guide, you'll learn how to set up Add To Cart event tracking and transmit dynamic parameters to Google Ads.
Shahzada Ali Hassan
2 min read0 views
Check your site's tracking
Enter your website to see how good its tracking is, and whether Meta is likely restricting it.
Run a free auditSection 1: Setting Up Google Tag Manager on Shopify
To begin tracking, the first step is integrating Google Tag Manager with your Shopify store:
- Access GTM Account: Log into your GTM account and note your container ID.
- Implement GTM Snippets:
- Go to your Shopify admin, navigate to Online Store > Themes.
- In the theme editor, find the
<head>and<body>tags. - Insert the GTM head snippet below the opening
<head>tag and the body snippet immediately after the opening<body>tag.
- Verify the Integration:
- Use GTM's 'Preview' mode to confirm that the container is firing correctly across all Shopify pages.
Section 2: Implementing 'Add To Cart' Tracking in Shopify Using Google Tag Manager's Data Layer
This section is dedicated to integrating Google Tag Manager's dataLayer with a Shopify store to track the custom_add_to_cart event. This event is triggered each time a user accesses a product page and clicks the AddToCart button.
Initial Setup of DataLayer in the Head Section
This part involves setting up the dataLayer array. If it isn't already in place, the code will initialize it. Specifically, it checks if the page is a product page and, if so, implements a 'datalayer-product' snippet.
1
2 <script>
3 window.dataLayer = window.dataLayer || [];
4 </script>
5
6 {%- if template contains 'product' -%}
7 {%- render 'datalayer-product', product: product -%}
8 {%- endif -%}
9 Embedding Product Details in DataLayer
Here, the code captures essential data when a product page is loaded:
- It identifies the product's current variant.
- An
itemObjectis created, holding key product information. - Upon the page's full load, this information is pushed to the
dataLayer.
1
2 {%- liquid
3 assign current_variant = product.selected_or_first_available_variant
4 -%}
5
6 <script>
7 console.log("datalayer-product snippet is loaded")
8 var itemObject = {
9 item_id: {{ current_variant.id | json }},
10 id: {{ current_variant.id | json }},
11 item_name: {{ product.title | json }},
12 currency: {{ shop.currency | json }},
13 item_brand: {{ product.vendor | json }},
14 item_category: {{ product.type | json }},
15 item_variant: {{ current_variant.title | json }},
16 price: {{ current_variant.price }} / 100,
17 google_business_vertical: 'retail',
18 quantity: 1
19 }
20
21 document.addEventListener('DOMContentLoaded', () => {
22 const addToCartBtn = document.querySelector('[name="add"]')
23 addToCartBtn?.addEventListener('click', () => {
24 dataLayer.push({ ecommerce: null });
25 dataLayer.push({
26 event: "custom_add_to_cart",
27 ecommerce: {
28 currency: {{ shop.currency | json }},
29 items: [itemObject]
30 }
31 });
32 })
33 })
34 </script>
35 Inserting DataLayer Code into the Theme
This section of code links the head-datalayer snippet to your Shopify theme. This is generally where the head datalayer code is placed. It should be added to the GTM Body Code.
1
2 {% render 'head-datalayer' %}
3 Steps for Integrating DataLayer Code Snippets into Shopify:
- Backup First: Always create a backup of your current theme before any modifications.
- Access Theme Files: Log into your Shopify Admin, navigate to Online Store > Themes. Under your live theme, click the "Actions" dropdown and choose "Edit code".
- Insert Head DataLayer Code: Find
theme.liquidin the left sidebar and add the "Head DataLayer Code" snippet within the<head>section. - Place Product DataLayer Code: Select "Add a new snippet" as per your Shopify version. Name it
datalayer-product.liquid. Input the "Product DataLayer Code" snippet into this file and save. - Apply Theme DataLayer Code: Decide the placement (usually within the
<head>oftheme.liquid). Add the "Theme DataLayer Code" snippet accordingly and save your changes. - Verification: To test, visit a product page on your Shopify store and open the developer console in your browser. Check that the
custom_add_to_cartevent triggers and that thedataLayerreflects accurate product details.
Note: These steps are based on a standard Shopify configuration. Custom themes may require a different approach. Always conduct thorough tests before and after applying these changes.
