by ShahzadaAliHassan - 2nd November 2023
In this blog, we will walk through the process of configuring the 'add_to_cart' event for a Shopify store using Google Tag Manager (GTM) and Google Analytics 4 (GA4).
Before we jump in, ensure you have the following:
If you haven't set these up yet, you can refer to this page.
This blog is divided into four main sections, aiming to cover everything from basic event tracking setup to the specifics of configuring 'add_to_cart' events.
To start tracking basic events on your site, follow these steps:
Admin located at the bottom left corner. Under the Property column, you'll find the option for Data Streams. These streams act like pipelines connecting your website to Google Analytics 4.Measurement ID as you'll be referencing it multiple times in the Google Tag Manager.Variables section. Here, create a constant variable named G4 Measurement ID to store the copied ID. This makes it easily accessible throughout the setup.Tag section. Create a new tag named GT G4 Configuration Tag to track all website pages. Under Tag Configuration, select the Google Tag option. This new method replaces the old Google Analytics 4 configuration tag. Point the Google ID field to the G4 Measurement ID you just created.Preview to connect it to your website. You should now be able to see the tag firing on your site. In the Debug View, confirm that the configuration tag is triggered and a page event (page_view) is sent.Tip: The Configuration tag is essential as all page events are sent through this tag.
Tip: Tracking 'Add to Cart' without code might not be the most accurate way. However if you lack programming skills or don't have a developer as this method can be quite handy.
Tip: The aim here is to identify this button's action and capture it as an event.
Creating the Trigger in GTM: If you've noticed that the event hasn't triggered upon button click, it's likely because there isn't an active trigger set up in GTM for this action. Navigate to the triggers in GTM and create a new trigger for button click events. Initially, you might not want to be specific; instead, create a general button click trigger. Name it something like "All Elements" and preview it.
Gathering Additional Information: Clicking the "Add to Cart" button after previewing the trigger will allow you to see additional information about the event in GTM's debug view. Here, you might notice that details like click ID and click Text are missing. This is because the relevant variables haven't been enabled yet.
Tip: To get detailed info, you need to enable the built-in variables related to button elements in GTM.
Enabling Button Element Variables in GTM: Within GTM, head to the variable section and enable built-in variables like button element classes, target URLs, and especially click text. Once enabled, re-preview and click the "Add to Cart" button again. Now, you should see that the click Text variable has captured the "Add to Cart" action.
Creating a Specific Trigger: With the new information gathered, modify the generic button click trigger you created. Instead of having it fire on all clicks, specify it to trigger only when the click Text contains "Add to Cart". This ensures the trigger is only activated for the desired action.
Creating a Tag for the Event in GTM: Now, create a tag that will fire upon this trigger. Use a GA4 event tag, and for the event name, use the standard "add_to_cart". This naming convention follows GA4's standards. Name this tag something indicative, like "GA4 EEC AddToCart".
Testing Your Configuration: After saving, re-preview and test the configuration by heading back to your Shopify store, selecting a product, and clicking "Add to Cart". Ideally, the "Add to Cart" event should trigger in the debug view of GTM. Furthermore, you can validate this event in your GA4 property's debug view or real-time report.
Tip: Always test your configurations to ensure accurate data tracking.
This section is for those who wish to capture more data, like the item ID, name, value, quantity, etc., when the "Add to Cart" event is triggered.
Tip: For this section, some programming knowledge is beneficial. If that's not your strength, you can share our document with your developer.
This section provides instructions for incorporating Google Tag Manager's dataLayer object into a Shopify store. The primary objective is to track the custom_add_to_cart event when a user clicks the AddToCart button on a product page in Shopify.
This script sets up the dataLayer array, if not already in place. It specifically targets 'product' page templates to activate a unique snippet, termed 'datalayer-product'.
This portion of code is crucial for updating the dataLayer object with detailed product information when a product page is accessed:
itemObject filled with extensive product information.dataLayer object.This snippet, which typically resides in the head-datalayer, is included here. It should be added to the GTM Body Code section within your Shopify theme.
Steps for Integrating DataLayer Scripts into Shopify:
Backup First: Ensure you back up your existing theme before making modifications.
Enter Theme Files: Log in to the Shopify Admin panel. Navigate to Online Store > Themes. Use the "Actions" dropdown for your active theme and choose "Edit code".
Insert Head DataLayer Script: Find theme.liquid in the left sidebar and place the "Head DataLayer Code" within the <head> tags.
Incorporate Product DataLayer Script: Select "Add a new snippet" in line with your Shopify version. Name it datalayer-product.liquid and paste the "Product DataLayer Code". Save the updates.
Place Theme DataLayer Script: Identify the appropriate location for this script (usually in the <head> tags of theme.liquid). Add the "Theme DataLayer Code" there and save.
Verification: Open a product page on your Shopify site and access the browser's developer console. Check if the custom_add_to_cart event triggers and the dataLayer shows accurate product data.
Note: These steps are based on a standard Shopify configuration. Custom themes might necessitate a different approach. Always conduct extensive testing before and after applying these changes.
custom_ADD_to_cart. This ensures there are no naming conflicts with other potential events or plugins.Tip: Custom events provide more flexibility and specificity than generic button click events in GTM.
With GA4, you can provide additional details such as currency, items added, and their values. These details offer deeper insights into customer behaviors.
Tip: Using standardized parameters ensures a seamless flow of data between GTM and GA4.
After setting up your events in GTM, it's crucial to ensure that they're being captured correctly in GA4.
Tip: Consistent validation ensures the reliability of your tracking setup and the integrity of the data captured.
Setting up enhanced event tracking using Google Tag Manager and Google Analytics 4 is an invaluable asset for e-commerce retailers. It provides insights into customer behaviors, preferences, and potential bottlenecks in the buying process. As always, regular validation ensures you're on top of any changes or issues that might arise. Happy tracking!