TrackingAcademy.comContact

GA4 BeginCheckout Event on Shopify using Google Tag Manager

by ShahzadaAliHassan - 3rd November 2023

Google Analytics
Shopify
Google Tag Manager
Tutorial
Begin Checkout

Introduction

Hello, everyone! In today's blog, we'll be diving deep into the configuration of Google Analytics 4 (GA4) and Google Tag Manager for your Shopify store. Our main focus will be on tracking the "begin checkout" event, which indicates the user is nearing the final "thank you" page but is still on the cart page.

Prerequisites

Before we jump in, ensure you have the following:

If you haven't set these up yet, you can refer to this page.

Tip:  Ensure you have your prerequisites in place for a smooth setup process.

Sections Covered

This blog is divided into three main sections, aiming to cover everything from basic event tracking setup to the specifics of configuring 'begin_checkout' events.

  1. Web Configuration Tags: This covers how to track basic events like page views, user engagement, and session starts.
  2. Begin Checkout Data Layer: How to directly trigger the Begin Checkout event from Shopify and send enhanced e-commerce data to Google Analytics 4.
  3. Configuring GTM for dataLayer event & Testing: Ensuring everything has been configured correctly and publishing the Google Tag Manager containers.

Section 01: Web Configuration Tags

First up, let's set the groundwork with a configuration tag on Google Tag Manager.

  1. Analytics Measurement ID: Navigate to your analytics account to obtain the GA4 measurement ID. This unique ID facilitates data transmission from your website back to Google Analytics.

    • On the lower left corner, choose Admin.
    • Within the 'Property Settings' column, select Data Stream. These data streams operate akin to pipelines, bridging data flow.
    • If you already possess a data stream, great! If not, you can create one. Once set, copy the measurement ID.

  2. Google Tag Manager - Creating Variables: Switch over to the Google Tag Manager container. Here, we'll create variables to reuse IDs efficiently.

    • Head to the Variable section.
    • Click New > Tag Configuration.
    • Opt for the Constant variable (since the Measurement ID remains unchanged across users).
    • Label it GA4 Measurement ID.
    • Save your changes.

  3. Tag Creation: With the Measurement ID constant in place, it’s time to create our first tag.

    • Top right, select New.
    • This configuration tag should be active across all website pages. Hence, choose the trigger for built-in all pages.
    • Under tag configuration, select the Google Tag (the newer version of the older Google Analytics 4 configuration tag).
    • For the tag ID, opt for the GA4 measurement ID constant we created earlier.
    • Label the tag as GT GA4 Configuration Tag.
    • Save.

Testing the Configuration Tag

To ensure our configuration tag operates smoothly:

  1. Click Preview > Input your website’s URL.
  2. Use the Google Tag Assistant Chrome extensions to make sure the tags active on your website.
  3. Cross-verify by navigating directly to the analytics account. Under Admin, choose Debug View. All default events (page_view, session_start) connected through the preview window to your Shopify store will be displayed here.

Section 02: Begin Checkout DataLayer with Enhanced E-Commerce Data

This segment is designed for users who want to enhance data capture during the "custom_begin_checkout" event, specifically for tracking elements like item_id, item_name, value, and quantity. It outlines how to integrate the dataLayer object with a Shopify store, utilizing Google Tag Manager (GTM). The primary objective is to ensure that the custom_begin_checkout event is activated when a user presses the Begin Checkout button on Shopify's Cart page.

Initializing DataLayer on Head

Here, we set up the dataLayer array, ensuring its initialization. The code assesses if the user is on a 'product' page and accordingly deploys a 'datalayer-checkout' snippet across all pages.

Main Checkout DataLayer Script

This section details the key steps in loading product information into the dataLayer when the Begin Checkout Event is activated on the Cart page:

  1. Script Verification: Confirms the script's activation.
  2. Gathering Cart and Product Information: Extracts and formats cart data from Shopify to suit Google's ecommerce tracking needs.
  3. Calculating Cart Total: Determines the overall value of the cart's contents.
  4. Checkout Button Monitoring: Post-page load, it locates checkout buttons, clears any existing dataLayer ecommerce data upon click, and inputs new ecommerce data into the dataLayer for GTM tracking.

Theme-Related DataLayer Implementation

This script implements the head-datalayer snippet, typically found within your Shopify theme setup. This should be incorporated into your GTM Body Code.

Guidelines for Implementing DataLayer Snippets in Shopify:

  1. Preparation: Secure a backup of your current theme before modifications.
  2. Accessing Theme Files:
    • Log into your Shopify Admin area.
    • Navigate to Online Store > Themes.
    • In the live theme, select "Edit code" from the "Actions" dropdown.
  3. Installing Head DataLayer Script:
    • Find theme.liquid in the sidebar and open it.
    • Place the "Head DataLayer Code" within the <head> section.
  4. Setting up Checkout DataLayer Script:
    • Depending on your Shopify edition, opt to "Add a new snippet."
    • Label it datalayer-checkout.liquid.
    • Embed the "Checkout DataLayer Code" into this file and save.
  5. Applying Theme DataLayer Script:
    • Decide on the location for this script, commonly within the <head> in theme.liquid.
    • Add the "Theme DataLayer Code" accordingly.
    • Save your adjustments.
  6. Verification:
    • Visit a Cart page on your store and initiate the Begin Checkout process.
    • Open the developer console in your browser.
    • Verify the triggering of custom_begin_checkout and correct product details in the dataLayer.

The use of unique event names like 'custom_begin_checkout' is to avoid clashes with other integrations or plugins that might use standard event naming conventions.

Section 03: Setting Up Google Tag Manager for Enhanced Event Tracking

To accurately track these events, we need to set up appropriate triggers and tags in Google Tag Manager.

Setting Up the Trigger

  1. Navigate back to the Tag Manager.
  2. Opt for "Triggers" and create a new trigger.
  3. Under trigger configuration, search for "custom event".
  4. Name the custom event as CE custom_begin_checkout and set the value to "custom_begin_checkout".

Tip:  Using a 'custom_' prefix ensures that the 'begin checkout' does not mix with any other events on your website.

Setting Up Event Parameters

For additional tracking details, such as items, revenue, etc., Google Tag Manager's latest version introduces G4 event parameters, similar to setting variables in Universal Analytics.

  1. Search for "Google tag event settings".
  2. You'll encounter three parameters: items, currency, and value.
  3. For items, currency and value, refer to the Data Layer and create dataLayer varibale for each.
  4. Name it DLV items, DLV currency and DLV value .
  5. Name this event setting as GTES GA4 EEC Event parameters.

Tip:  Ensure you use the correct notations, whether it's a dot for objects or indexes for arrays, to avoid errors.

Creating an Event Tag for Google Analytics 4

  1. Return to the tag section and formulate a new event tag for Google Analytics 4.
  2. Select the previously created trigger for CE custom_begin_checkout.
  3. For the event, choose Google Analytics 4 Event Tag.
  4. Ensure the GA4 Measurement ID matches the one created at the beginning of this blog.
  5. For the event parameter, refer back to the same event setting parameter used earlier i.e., GTES GA4 EEC Event parameters.

Testing and Preview on GA4

After these configurations, test to ensure all parameters are working as expected. You can do this by initiating a checkout on your Shopify store and verifying that the Data Layer populates correctly, and the triggers fire as intended. Additionally, confirm the successful transmission of all parameters, such as items and currency, to Google Analytics 4.

Publish the Changes on GTM

Conclusing this section, always remember to publish your changes in Google Tag Manager. Failing to do so means your edits remain as drafts and won't reflect on the live website.

Conclusion

Integrating Google Analytics 4 (GA4) with Shopify using Google Tag Manager (GTM) offers e-commerce businesses a deeper understanding of their customer's journey. By effectively tracking the 'begin checkout' event, businesses can gain actionable insights into user behaviors and preferences, providing opportunities for optimization. Following this step-by-step guide ensures accurate data capture, enhancing decision-making and strategy formulation. As e-commerce continues to evolve, ensuring robust tracking mechanisms remains crucial. By leveraging the power of GA4 and GTM, retailers can ensure they're well-equipped to navigate the ever-changing landscape of online commerce. Happy tracking!