TrackingAcademyContact

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

by ShahzadaAliHassan - 7th September 2024
Google Tag Manager
Shopify
GA4
Ecommerce Tracking
Add Contact Info
Customer Pixel

Setting up an "Add Contact Info" event on a Shopify store using the customer web pixel and Google Tag Manager (GTM) is an essential step for tracking user interactions. This detailed guide will walk you through the process in a simple, easy-to-follow manner. By the end, you will have successfully created and tested the event, ensuring that it sends the correct data to Google Analytics.

Table of Contents

  1. Overview of the Process
  2. Step 1: Ensure Data Layer Event is Firing
  3. Step 2: Adding Custom Pixels in Shopify
  4. Step 3: Adding the Google Tag Manager Container ID
  5. Step 4: Verify Event Firing
  6. Step 5: Create Tags and Triggers in Google Tag Manager
  7. Step 6: Define Variables for Data Layer in GTM
  8. Step 7: Test and Publish the Setup
  9. Conclusion

Overview of the Process

To track the Add Contact Info event on Shopify, we'll need to:

  1. Add a custom pixel in Shopify's customer pixel settings.
  2. Configure Google Tag Manager (GTM) to capture the event.
  3. Set up the necessary tags, triggers, and variables in GTM to ensure data is sent to Google Analytics 4 (GA4).
  4. Test the configuration to ensure everything is firing correctly.

Step 1: Ensure Data Layer Event is Firing

The first thing you need to do is make sure that the data layer event is firing properly on your Shopify store.

  1. Go to your Shopify store's settings.
  2. Scroll down to the Customer Events section.
  3. This is where the new customer web pixels are added.

Ensure that this section is active because we’ll be adding a custom pixel here.

Step 2: Adding Custom Pixels in Shopify

To set up the Add Contact Info event:

  1. In the Customer Pixels section of Shopify, click on Add Custom Pixel in the top right corner.
  2. Name the pixel based on its function, like "Add Contact Info."
  3. After naming, click on Add Pixel to automatically create it.

Important: Set the permissions to Not Required and ensure that the data sale settings are set to Does Not Qualify.

Step 3: Adding the Google Tag Manager Container ID

Next, we need to link Google Tag Manager to Shopify:

  1. In your Shopify store, paste the code snippet provided (you can find this in the video description).
  2. Replace the placeholder GTM Container ID with your actual GTM container ID.
    • You can find your GTM ID by going to Google Tag Manager, and it will be displayed on the top.
  3. Copy this ID and replace it in the code snippet within your Shopify settings.
  4. Save your changes.

Step 4: Verify Event Firing

Now we need to verify that the Add Contact Info event is firing correctly on the website:

  1. Go to your Shopify store.
  2. Right-click and select Inspect, then switch to the Console tab.
  3. Search for the data layer to ensure the event is firing properly.

When you initiate the checkout process, update the contact information to trigger the event. The event should display in the console with relevant details such as currency, items in the cart, user email, and customer ID.

Step 5: Create Tags and Triggers in Google Tag Manager

Now let’s configure GTM to handle the Add Contact Info event:

a. Create GA4 Configuration Tag

  1. Open Google Tag Manager and create a new tag.
  2. Set the tag to fire on all pages.
  3. Name the tag GA4 Configuration.
  4. Paste the Measurement ID from your Google Analytics account.
    • You can find this in GA4 by searching for "Measurement ID."
  5. Create a constant variable for the measurement ID in GTM for reuse.
  6. Save the configuration.

b. Create the Event Tag

  1. Create another tag specifically for the Add Contact Info event.
  2. Set up a trigger for a Custom Event and name it Add Contact Info.
  3. Create the event tag and link it to the custom trigger.
  4. For the event name, use add_contact_info.

Step 6: Define Variables for Data Layer in GTM

To send additional data to GA4, such as currency and items, we need to set up data layer variables.

  1. In GTM, create a new variable for each piece of information:
    • Value: Go to Variables > Data Layer Variables > Name it dlv_ecommerce_value.
    • Currency: Create a variable called dlv_ecommerce_currency.
    • Items Array: Create one more variable for the items array and name it dlv_ecommerce_items.

By doing this, Google Analytics will receive all relevant event data.

Step 7: Test and Publish the Setup

Testing

Unfortunately, we can't preview the changes in GTM for this specific event. Instead, we’ll publish the changes live and test them directly on the website.

  1. Publish the container in GTM.
  2. Go back to your Shopify store and open the Inspect tool.
  3. Look for the Add Contact Info event in the Console when going through the checkout process.

Verifying with Google Analytics

  1. Check Google Analytics Real-Time View to confirm the event has been sent successfully.
  2. You should see the Add Contact Info event with relevant data like currency and items.

Conclusion

By following these steps, you have successfully configured the Add Contact Info event on your Shopify store using Google Tag Manager and connected it to Google Analytics. Now, you're ready to track user interactions and collect valuable customer information for better insights.