A Comprehensive Guide on Adding Products to Cart and Tracking Conversions with Google Ads and Shopify
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: Enhancing Shopify with Add To Cart Data Layer Integration for Google Tag Manager
The provided code snippets aim to integrate the dataLayer object for Google Tag Manager (GTM) with a Shopify store. The main goal is to send an event called custom_add_to_cart whenever a user visits a product page and clicks on the AddToCart button on Shopify.
Head DataLayer Code
This code initializes the dataLayer array if it hasn't been already. It then checks if the current page template is a 'product' page and renders a specific snippet called 'datalayer-product'.
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 Product DataLayer Code
This code snippet contains the main logic for populating the dataLayer object with product details whenever a product page is viewed:
- It first captures the current variant of the product.
- It constructs an
itemObjectcontaining various product details. - On document load, it pushes this data to the
dataLayerobject.
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 Theme DataLayer Code
This code renders the head-datalayer snippet. Depending on the setup of your Shopify theme, this is likely where the head datalayer code resides. Add this code GTM Body Code.
1
2 {% render 'head-datalayer' %}
3 Steps to Add the DataLayer Code Snippets in Shopify:
- Backup: Before making any changes, always backup your current theme.
- Access Theme Files: Login to your Shopify Admin. Then, go to Online Store > Themes. Click on the "Actions" dropdown for your live theme and select "Edit code".
- Add Head DataLayer Code: In the left sidebar, locate and click on
theme.liquid. Insert the "Head DataLayer Code" snippet within the<head>tags. - Add Product DataLayer Code: Click "Add a new snippet" depending on your Shopify version. Name it
datalayer-product.liquid. Insert the "Product DataLayer Code" snippet into this new file. Save changes. - Add Theme DataLayer Code: Determine where you want this code to render (usually within the
<head>tags intheme.liquid). Insert the "Theme DataLayer Code" snippet in the desired location. Save changes. - Test: Visit a product page on your Shopify store. Open browser's developer console. Confirm that the
custom_add_to_cartevent is fired and thedataLayerobject contains the correct product details.
Remember, these instructions assume a typical Shopify setup. Some custom themes might require a different approach. Always test thoroughly before and after making changes.
