[Shopify Customer Pixel] How to Configure GA4 Add Payment Info Event Using Google Tag Manager

by ShahzadaAliHassan - 6th September 2024

Google Tag Manager

Shopify

GA4

Ecommerce Tracking

Add Payment Info Event

Customer Pixel

In this guide, we'll walk you through the process of setting up an "Add Payment Info" event for your Shopify store using Google Tag Manager (GTM) and Google Analytics 4 (GA4). This setup will help you track when customers add their payment information during checkout, which is a crucial step in understanding customer behavior and improving your sales funnel.

Table of Contents

• Introduction
• Setting Up Customer Pixel in Shopify
• Adding Code Snippet and Configuring GTM ID
• Connecting Shopify Pixel to Customer Events
• Verifying Event Trigger in Shopify
• Configuring Google Tag Manager for GA4
• Creating Custom Event in Google Tag Manager
• Setting Up Data Layer Variables
• Submitting and Testing Events in Shopify
• Conclusion

Introduction

This guide will show you how to configure an "Add Payment Info" event for a Shopify store using the newer customer pixel section, Google Tag Manager, and Google Analytics 4. This setup allows you to track key customer interactions, which is vital for optimizing your marketing efforts and improving customer experience.

Setting Up Customer Pixel in Shopify

The first step is to ensure that the customer pixel is properly connected to your Shopify store and is triggering the data layer event. Here’s how to do it:

1. Access Shopify Settings:

   • Go to your Shopify store.
   • Click on the Settings button located at the bottom left corner.

2. Add a New Customer Pixel:

   • Scroll down to Customer Events and click on Add a New Customer Pixel.
   • Rename the pixel to Add Payment Info since this is the data layer we’re focusing on.
   • Add "data layer" next to it and click Add Pixel.

3. Set Permissions:

   • Ensure the permissions are set to Not Required and data sale is set to Does Not Qualify.

This setup is crucial as it ensures the pixel is correctly configured to capture the necessary data.

Adding Code Snippet and Configuring GTM ID

Next, you need to add a code snippet to your Shopify store and configure the Google Tag Manager (GTM) ID.

1. Copy and Paste Code Snippet:

   • Use the link provided in the description to copy the required code snippet.
   • Paste it in the designated area within your Shopify store.

2. Update GTM Container ID:

   • Scroll to the top of the code snippet to locate the placeholder for the GTM ID.
   • Replace the placeholder with your actual GTM ID. To find your GTM ID:
     • Go to Google Tag Manager.
     • Click on the ID in your GTM account and copy it.
   • Paste the GTM ID back into your Shopify store.

3. Save Changes:

   • Click Save Changes to apply the new configuration.

Connecting Shopify Pixel to Customer Events

After saving the changes, you need to connect the Shopify pixel to the customer event section.

1. Connect the Pixel:
   • Scroll to the top of the page in your Shopify settings.
   • Click on Connect next to the pixel you just created.
   • Confirm by clicking Connect again.

This will link the pixel to your Shopify backend, enabling it to track customer interactions.

Verifying Event Trigger in Shopify

Before moving forward, it’s important to verify that the "Add Payment Info" event is firing correctly.

1. Test the Event:

   • Go to the front end of your store by clicking on View Online Store.
   • Add a product to your cart and proceed to the checkout page.
   • Enter your payment information as a test.

2. Inspect the Event:

   • Open the Inspect tool in your browser and go to the Console tab.
   • Complete the purchase process to trigger the "Add Payment Info" event.

If everything is set up correctly, you should see the event firing in the data layer with all relevant details like currency, item value, and more.

Configuring Google Tag Manager for GA4

Now, it’s time to configure Google Tag Manager to send the "Add Payment Info" event to Google Analytics 4.

1. Set Up GA4 Configuration Tag:

   • Go to your GTM container.
   • Click on Tags and then Add New.
   • Choose Google Analytics: GA4 Configuration as the tag type.
   • Enter your GA4 measurement ID, which can be found in your GA4 account using the search feature.
   • Name the tag and save it.

2. Create Custom Event in GTM:

   • Since we only want this tag to fire when the "Add Payment Info" event triggers, create a custom event trigger in GTM.
   • Select Custom Event as the trigger type.
   • Enter the event name (e.g., add_payment_info) from the data layer.
   • Save the trigger.

Creating Custom Event in Google Tag Manager

To track the event in GA4, you need to create a custom event tag.

1. Set Up GA4 Event Tag:

   • Choose GA4 Event as the tag type.
   • Use the same measurement ID as before.
   • Name the event add_payment_info.

2. Configure Event Parameters:

   • Add parameters like value, shipping, tax, coupon, items, and currency.
   • These parameters can be extracted from the e-commerce object in the data layer.

Setting Up Data Layer Variables

To accurately capture the event parameters, you need to set up data layer variables in GTM.

1. Create Data Layer Variables:

   • For each parameter (e.g., value, shipping, tax), create a new data layer variable.
   • Name each variable appropriately (e.g., dlv_ecommerce_value for value).

2. Assign Variables to Event Parameters:

   • Use these variables in the GA4 event tag you created earlier to ensure accurate data tracking.

Submitting and Testing Events in Shopify

After setting up the tags and triggers, it’s time to test and publish your changes.

1. Submit Changes in GTM:

   • Submit the container with a descriptive name like "GA4 Add Payment Info Tracking."
   • Click Publish to make the changes live.

2. Test the Event Again:

   • Return to your Shopify store and simulate the "Add Payment Info" event again to ensure everything is working correctly.
   • Use the Inspect tool and check the data layer for the event firing.

If the event is correctly configured, you’ll see all the parameters (value, shipping, tax, etc.) being tracked in GA4.

Conclusion

Setting up the "Add Payment Info" event in Shopify using Google Tag Manager and Google Analytics 4 is a powerful way to track customer interactions. By following this guide, you can ensure that this crucial event is properly monitored, helping you gain valuable insights into your customers’ buying behaviors.

This detailed setup not only improves your analytics but also enhances your ability to make data-driven decisions that can lead to higher conversion rates and better marketing strategies.