Ultimate Shopify DataLayer for Google Tag Manager
👉 Contact me for support: info@leomeasure.com
How to use:
- Go to theme edit and paste GTM tracking code right after
<head>
tag in theme.liquid
file
- Inside the
snippets
folder create a new file as ultimate-datalayer
. Copy all of the code from ultimate-datalayer.liquid
of this repository to sinppet file ultimate-datalayer.liquid
.
- In the
theme.liquid
file after your GTM tracking code include ultimate-datalayer.liquid
file as {% render 'ultimate-datalayer' %}
- From shopify admin dashboard go to Settings >> Checkout (Scroll Down) >> Additional scripts. Copy all code from
checkout.liquid
from this repository to the Additional scripts
field. Change the example GTM example tracking ID 000-00000 to the real GTM ID
- Depending on your Shopify theme, you might have to make some adjustments. For more information, please refer to the video below.
Events Included!
- view_item
- view_item_list
- select_item
- add_to_cart
- remove_from_cart
- view_cart
- view_item_list
- begin_checkout
- add_to_wishlist
- add_payment_info
- add_shopping_info
- purchase
- contact_form_submit
- newsletter_signup
- search
- phone_number_click
- email_click
- Logged customer and on the checkout page customer details included as customer object with dataLayer
- Event Parameters: currency, value, transaction_id, coupon, shipping, vat, items, item_list_name, item_list_id
- Items Parameters item_id, item_name, quantity, price, discount, item_brand, item_category, item_variant, sku, item_list_name, item_list_id
Features
With all general event tracking it also tracks following special events
- DataLayer event prefix
- Quick View Event Tracking (as view_item)
- Mini Cart and Dropdown Cart, Cart Drawer Tracking (as view_cart)
- Shopify Direct Checkout Tracking ( as add_to_cart & begin_checkout)
- Sticky Cart, Sidebar Cart, etc Tracking ( as add_to_cart)
- Shopify Ajax Search Tracking ( as search )
- Events was tacked by Ajax Response so no data discrepancy for edge cases
- No jQuery, no 3rd Party Scripet was included, all code was written ES6 Object Oriented Way. Added proper error handling so that there is no JS error
Testing
To test GTM events
- Method 1: Open https://tagmanager.google.com/ and add your domain to view all GTM Data layer events inside the GTM debugger interface
- Method 2: Right clicking on the page, select "Inspect" and click on "Console". Anytime page is interacted with Shopify website i.e Searching on the website then a datalayer event will log inside the console.
To test GA4 events
- Method 1: Open https://analytics.google.com/ then Admin > Data Display > Debug view. Also Install & enable Google analytics debugger.Now all web events should flow into GA4 debugger.
- Method 2: You can use "Network" tab in "inspect" window to filter GA4 request with string "Collect?v=2". Now click on most recent network request and then click on "Payload" to view content of that request that was sent to GA4
For more information, please watch the video below.