Google Ads Purchase Event Conversion Tracking on Shopify using Google Tag Manager

In today's video, we're diving deep into setting up e-commerce Purchase conversion tracking using Google Ads and Google Tag Manager (GTM) on your Shopify store! 馃洅馃捇 From adding GTM container snippets to your Shopify theme to creating custom conversion actions in Google Ads, we've covered it all. We begin by ensuring our GTM container is properly firing across Shopify pages, including the crucial 'Thank You' page. Then, we move on to the nitty-gritty of configuring conversion tracking in your Google Ads account and setting up the necessary data layers for tracking purchase events. Whether you're a seasoned pro or just starting out, this step-by-step guide is designed to help you optimize your e-commerce tracking for better performance and insights.

Shahzada Ali Hassan

5 min read0 views

Watch on YouTube

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 audit

Introduction

Conversion tracking is crucial for e-commerce businesses to measure the success of their campaigns and understand customer behavior. In this guide, we will walk you through configuring Google Tag Manager (GTM) and Google Ads conversion tracking specifically for a Shopify store. This step-by-step tutorial covers setting up GTM, creating data layers, and configuring tags and triggers to accurately track purchase events.

Step 1: Adding Google Tag Manager to Shopify

Get GTM Snippets

  1. Access Google Tag Manager: Log in to your GTM account and select your container.
  2. Copy GTM Snippets:
    • Click on the container ID in the top right corner.
    • Copy the head tracking snippet.

Integrate with Shopify

  1. Navigate to Shopify Admin:
    • Go to Online Store > Themes.
    • Click Actions on your current theme and select Edit Code.
  2. Insert Snippets:
    • In the theme.liquid file, find the opening <head> tag and paste the head snippet just below it.
    • Similarly, find the opening <body> tag (usually around line 294) and paste the body snippet below it.
    • Click Save.

Add GTM to Checkout Page

  1. Go to Shopify Settings:
    • Navigate to Settings > Checkout.
  2. Insert Snippet in Order Status Page:
    • Scroll down to Order Status Page and paste both the head and body snippets.
    • Click Save.

Step 2: Verify GTM Installation

  1. Enter Preview Mode in GTM:
    • Click the Preview button in GTM to enter debug mode.
  2. Test on Shopify:
    • Open your Shopify store and navigate through various pages.
    • Ensure the GTM debug window shows that GTM is firing correctly on all pages, including the thank you page after a purchase.

Step 3: Creating Conversion Action in Google Ads

  1. Log in to Google Ads:
    • Navigate to Tools & Settings > Measurement > Conversions.
  2. Create New Conversion Action:
    • Click the + button to create a new conversion.
    • Select Website and enter your website URL.
    • Since the purchase event is under the sales category, select Purchase.
    • Configure conversion settings, including the conversion name (e.g., Purchase), value, and any other required details.
    • Click Save and Continue.
  3. Obtain Conversion ID and Label:
    • Select the option to use Google Tag Manager.
    • Copy the Conversion ID and Conversion Label.

Step 4: Configure Variables in GTM

  1. Create User-Defined Variables:
    • In GTM, go to Variables and create two new variables:
    • Google Ads Conversion ID: Paste the conversion ID.
    • Google Ads Conversion Label: Paste the conversion label.

Step 5: Adding Data Layer Code to Shopify

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_purchase whenever a user visits the final /thank-you/ page on Shopify after making the payment.

Order Status DataLayer Code

  1. This script, embedded within a Shopify platform, serves to track purchase-related data for analytics purposes.
  2. When a user accesses a site for the first time (first_time_accessed), the script checks if the user is a registered customer. If so, it fetches the user's order count and total spend.
  3. The script then initializes the dataLayer object if it doesn't already exist and populates it with purchase details like transaction ID, total value, shipping, tax, currency, and details of items in the order.
  4. These details include individual product attributes such as the product's ID, SKU, name, price, brand, variant, quantity, and other related info.
liquid
1<script> 2 window.dataLayer = window.dataLayer || []; 3 {% if customer %} 4 dataLayer.push({ 5 'event': 'user_data', 6 'ecommerce':{ 7 'currency': {{ shop.currency | json }}, 8 }, 9 'user_data': { 10 'user_id': "{{ customer.id | default: undefined }}", 11 'email_address': "{{ customer.email | default: undefined }}", 12 'address': { 13 {% if customer.default_address %} 14 'city': "{{ customer.default_address.city | default: undefined }}", 15 'address': "{{ customer.default_address.address1 | default: undefined }} {{ customer.default_address.address2 | default: undefined }}", 16 'state': "{{ customer.default_address.province | default: undefined }}", 17 'country': "{{ customer.default_address.country | default: undefined }}", 18 'postal_code': "{{ customer.default_address.zip | default: undefined }}", 19 'first_name': "{{ customer.default_address.first_name | default: undefined }}", 20 'last_name': "{{ customer.default_address.last_name | default: undefined }}" 21 {% else %} 22 'first_name': "{{ customer.first_name | default: undefined }}", 23 'last_name': "{{ customer.last_name | default: undefined }}" 24 {% endif %} 25 } 26 } 27 }); 28 {% endif %} 29</script> 30 31{% if first_time_accessed %} 32 33<script> 34 {% if customer %} 35 var orders_count = '{{ customer.orders_count }}' 36 var total_spent = '{{ customer.total_spent }}' 37 {% endif %} 38 window.dataLayer = window.dataLayer || []; 39 dataLayer.push({ ecommerce: null }); 40 var transaction_id = '{{ order_number }}' || undefined ; 41 var value = {{ checkout.subtotal_price | divided_by: 100.0 }} || 0; 42 var shipping = {{ order.shipping_price | divided_by: 100.0 }} || 0; 43 var tax = {{ order.tax_price | divided_by: 100.0 }} || 0; 44 var coupon_code = Shopify.checkout.discount?.code || ''; 45 var currency = '{{ currency }}' || 'USD'; 46 var line_items = []; 47 Shopify.checkout.line_items.forEach((product_line_item, index) => { 48 line_items.push({ 49 'item_id': product_line_item.product_id || undefined , 50 'item_sku': product_line_item.sku || undefined , 51 'item_name': product_line_item.title || undefined , 52 'affiliation': Shopify.shop || undefined , 53 'price': product_line_item.price || 0, 54 'item_brand': product_line_item.vendor || undefined , 55 'item_variant': product_line_item.variant_title || undefined , 56 'item_variant_id': product_line_item.variant_id || undefined , 57 'quantity': product_line_item.quantity || 1, 58 'currency': currency, 59 'index': index, 60 'google_business_vertical': 'retail' 61 }); 62 }); 63 dataLayer.push({ 64 'event': 'custom_purchase', 65 'datalayer_event_name': "purchase", 66 'ecommerce': { 67 'timestamp': Shopify.checkout.created_at, 68 'transaction_id': transaction_id, 69 'value': value, 70 'orders_count': orders_count || undefined, 71 'total_spent' : total_spent || undefined, 72 'shipping': shipping, 73 'tax': tax, 74 'coupon': coupon_code, 75 'currency': currency, 76 'discount_amount': Shopify.checkout?.discount?.amount || undefined, 77 'items': line_items, 78 }, 79 }); 80</script> 81 82{% endif %}

Steps to Add the DataLayer Code Snippets in Shopify:

  1. Log into Your Shopify Admin Panel:
    • Visit your Shopify store's URL followed by /admin.
    • Enter your login credentials to access the admin panel.
  2. Access Checkout Settings:
    • On the left-hand side menu, click on Settings.
    • From the dropdown, select Checkout.
  3. Locate the Additional Scripts Section:
    • Scroll down until you find the Order processing section.
    • Within this section, you'll see a text box labeled Additional Scripts. This is where you can add scripts that will run on the order status page after a customer completes their purchase.
  4. Paste Your Script:
    • Copy the script you have.
    • Paste it into the Additional Scripts text box.
  5. Save Changes:
    • After you've pasted your script, scroll to the bottom of the page and click on the Save button.
  6. Test the Script (Important):
    • After saving, make a test purchase to ensure that the script runs as expected on the order status page.
    • Check if all data is being collected and pushed to the dataLayer as intended by your script.

Note: The Additional Scripts section in the Checkout settings allows you to add scripts that will run after a customer has completed their purchase. This is a safe place to add conversion tracking codes, analytics scripts, or other scripts you want to trigger once a sale is confirmed.

Step 6: Test Data Layer Implementation

  1. Simulate a Purchase:
    • Add a product to the cart and proceed to checkout.
    • Complete the purchase using test details (e.g., bogus credit card details for Shopify's test mode).
  2. Check Data Layer in GTM Debug Mode:
    • Ensure the data layer contains all necessary information, such as purchase details and user information, on the thank you page.

Step 7: Create Tags and Triggers in GTM

Create Trigger for Purchase Event

  1. Create Custom Event Trigger:
    • In GTM, go to Triggers and create a new trigger.
    • Name it Custom Event - Purchase.
    • Set the trigger type to Custom Event and enter custom_purchase as the event name.
    • Save the trigger.

Create Conversion Linker Tag

  1. Create Conversion Linker Tag:
    • In GTM, go to Tags and create a new tag.
    • Select Google Ads Conversion Linker.
    • Name the tag Google Ads Conversion Linker and save it.
    • Set the trigger to fire on all pages.

Create Purchase Conversion Tracking Tag

  1. Create Google Ads Conversion Tracking Tag:
    • In GTM, go to Tags and create a new tag.
    • Select Google Ads Conversion Tracking.
    • Use the previously created variables for the Conversion ID and Conversion Label.
    • Map the necessary data layer variables (e.g., transaction value, transaction ID, currency) to the appropriate fields.
    • Set the trigger to fire on the Custom Event - Purchase trigger.
    • Save the tag.

Step 8: Final Testing and Publishing

  1. Debug and Test:
    • Use the GTM preview mode to ensure all tags and triggers fire correctly during a test purchase.
  2. Publish Container:
    • Once verified, click Submit in GTM to publish the container.

Conclusion

By following these detailed steps, you will have successfully configured Google Tag Manager and Google Ads conversion tracking for your Shopify store. Accurate tracking of purchase events will enable you to optimize your campaigns and drive better business decisions. Happy tracking!

All guides

Set up in about 5 minutes. Events in Events Manager within about 30.

~5 min setupwithin ~30 min
Setting up
  • 7-day free trialon every eligible domain, one per domain
  • $297/moper subdomain
  • We set up the first domain with youfounder included
  • 30-day money-back guaranteeand cancel any time in the trial
  • We keep working with youuntil it is fixed
Start 7-day trialGet a free consultation

Payment method required at checkout. One trial per domain. The 30 minutes start once tracking is installed and events fire; it is visibility in Events Manager, not same-day ROAS.