[Shopify Customer Pixel] How to Configure GA4 View Item Event Using Google Tag Manager

Discover how to configure the GA4 View Item event on your Shopify store using Google Tag Manager. This step-by-step guide covers everything from setting up the data layer to verifying event tracking in GA4 for effective ecommerce analytics.

Shahzada Ali Hassan

4 min read0 views

Watch on YouTube

Check your site's tracking

Enter your website to see how good its tracking is, and whether Meta is likely restricting it.

Run a free audit

If you're running a Shopify store and want to track your users' interactions effectively, setting up events in Google Analytics 4 (GA4) is crucial. This guide will walk you through configuring the "View Item" event using the new customer pixel option on Shopify, with the help of Google Tag Manager (GTM).

We'll cover everything from the required access to the final verification of the event in GA4, ensuring that your e-commerce tracking is set up perfectly.

1. Required Access for Shopify, GTM, and GA4

Before starting the setup, ensure you have the following access:

  • Shopify: Access to settings and customer pixel events.
  • Google Tag Manager (GTM): Published access to the container.
  • Google Analytics 4 (GA4): Editor or Admin access.

To verify your access:

  1. GA4: Navigate to Admin > Property Access Management.
  2. GTM: Go to Admin > Container > User Management.
  3. Shopify: Confirm access to the "Customer Pixel Events" under Settings.

2. Configuring Data Layer for View Item Event

The data layer is a key part of tracking user interactions. You'll need to configure it for the "View Item" event.

  1. Create a custom pixel in Shopify.
  2. Name this pixel "Data Layer Code."
  3. Copy the code provided (you can find it in the description of the video or source) and paste it into the custom pixel area.
view_item.js
1// Initialize the dataLayer 2window.dataLayer = window.dataLayer || []; 3(function (w, d, s, l, i) { 4 w[l] = w[l] || []; 5 w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" }); 6 var f = d.getElementsByTagName(s)[0], 7 j = d.createElement(s), 8 dl = l != "dataLayer" ? "&l=" + l : ""; 9 j.async = true; 10 j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl; 11 f.parentNode.insertBefore(j, f); 12})(window, document, "script", "dataLayer", "GTM-EXAMPLE"); 13function logEventToConsole(dataLayerEvent) { 14 const customStyle01 = 15 "color: #FFFF00; background-color: #000000; font-size: 10px; font-weight: bold; padding: 2px 0;"; 16 console.log("%cDataLayer Event: view_item ", customStyle01, dataLayerEvent); 17} 18analytics.subscribe("product_viewed", (event) => { 19 const getEventData = (obj, path, fallback = "") => { 20 return ( 21 path.split(".").reduce((acc, part) => { 22 if (acc && part.includes("[")) { 23 const [key, index] = part.replace("]", "").split("["); 24 return acc[key] ? acc[key][index] : undefined; 25 } 26 return acc ? acc[part] : undefined; 27 }, obj) || fallback 28 ); 29 }; 30 const page_data = { 31 hostname: getEventData(event, "context.document.location.hostname"), 32 location_query_string: getEventData(event, "context.document.location.href"), 33 path: getEventData(event, "context.document.location.pathname"), 34 referrer: getEventData(event, "context.document.referrer"), 35 page_title: getEventData(event, "context.document.title"), 36 url: getEventData(event, "context.document.location.href"), 37 }; 38 const user_data = { 39 id: event.clientId, 40 language: getEventData(event, "context.navigator.language"), 41 userAgent: getEventData(event, "context.navigator.userAgent"), 42 }; 43 const event_data = { 44 timestamp: event.timestamp || "", 45 id: event.id || "", 46 }; 47 const ecommerce_data = { 48 currency: getEventData(event, "data.productVariant.price.currencyCode"), 49 value: getEventData(event, "data.productVariant.price.amount"), 50 items: [ 51 { 52 item_id: getEventData(event, "data.productVariant.product.id"), 53 item_name: getEventData(event, "data.productVariant.product.title"), 54 item_brand: getEventData(event, "data.productVariant.product.vendor"), 55 item_category: getEventData(event, "data.productVariant.product.type"), 56 price: getEventData(event, "data.productVariant.price.amount"), 57 item_variant: getEventData(event, "data.productVariant.title"), 58 item_list_name: "Product Page", 59 index: 0, 60 product_id: getEventData(event, "data.productVariant.id"), 61 product_image: getEventData(event, "data.productVariant.image.src"), 62 product_url: getEventData(event, "data.productVariant.product.url"), 63 product_untranslatedTitle: getEventData(event, "data.productVariant.untranslatedTitle"), 64 product_sku: getEventData(event, "data.productVariant.sku"), 65 quantity: 1, 66 }, 67 ], 68 }; 69 const dataLayerEvent = { 70 event: "view_item", 71 user_data: user_data, 72 page_data: page_data, 73 event_data: event_data, 74 ecommerce: ecommerce_data, 75 }; 76 const newUrl = new URL(dataLayerEvent.page_data.location_query_string, window.location.origin); 77 const newTitle = dataLayerEvent.page_data.page_title; 78 if (newUrl && newTitle) { 79 history.pushState(null, newTitle, newUrl.toString()); 80 } 81 dataLayer.push({ ecommerce: null }); 82 window.dataLayer.push(dataLayerEvent); 83 logEventToConsole(dataLayerEvent); 84});

Important: Ensure the pixel is set correctly as a data non-qualifier for sales data. Without this, your pixel codes won't fire.

3. Adding Custom Pixel in Shopify

Now that the data layer code is ready, add the custom pixel:

  1. Go to the Shopify store.
  2. Create a new custom pixel named "Data Layer Code."
  3. Paste the code you copied into this pixel.
  4. Adjust the code to include the correct Google Tag Manager (GTM) container ID.

Tip: Replace any placeholder GTM IDs with your actual GTM container ID.

4. Adjusting Google Tag Manager Container Script

In GTM, you'll need to:

  1. Retrieve your GTM container ID from the GTM admin page.
  2. Replace the placeholder ID in your Shopify custom pixel with this actual ID.
  3. Save your changes in Shopify.

5. Adding Google Analytics 4 Configuration Tag

Next, set up a GA4 configuration tag in GTM:

  1. Go to GTM and create a new tag.
  2. Use a built-in trigger to fire this tag on all pages.
  3. If you plan to use this configuration for other steps, consider creating a custom event trigger instead of a built-in one.

6. Verifying Tags and Events

Now, verify that your tags are working:

  1. Inspect your website using the browser's developer tools.
  2. Filter events based on the data layer to check if the custom event is firing.

Testing Method:

  • Use GTM's Legacy Assistant or the network tab in your browser's developer tools to see if the GA4 configuration tag is firing.

7. Creating View Item Event Trigger and Variables

To track the "View Item" event:

  1. Navigate to an item page in your store.
  2. Identify the event in the data layer named "View Item."
  3. In GTM, create a new trigger for this custom event.
  4. Also, create variables to capture the event data: currency, value, and items array.

8. Publishing and Testing the Configuration

Once everything is set up:

  1. Publish the changes in GTM.
  2. Test the setup by refreshing your website and checking if the "View Item" event fires correctly.

Verification: Use the network tab and Google Tag Assistant to ensure that the event and its data are correctly captured.

9. Verifying Events in Google Analytics 4

To ensure everything is working:

  1. Go to the GA4 real-time view.
  2. Check if the "View Item" event is recorded.
  3. Verify that the event includes the necessary data, such as item array, currency, and value.

10. Reviewing E-commerce Reports

Over time, the data from the "View Item" event will populate your GA4 e-commerce reports. These reports will show how many users viewed a product, added it to the cart, and made a purchase.

Note: Reports take some time to update, so check back after a few days of traffic.

Conclusion

By following these steps, you've successfully set up the "View Item" event on your Shopify store using GA4 and GTM. This setup allows you to track valuable e-commerce interactions, helping you understand your customers' behavior and optimize your store for better conversions.

Stay tuned for the next guide where we'll configure additional events like "Add to Cart" and "Purchase." Don't forget to subscribe for more tutorials!

All guides

Set up in about 5 minutes. Events in Events Manager within about 30.

~5 min setupwithin ~30 min
Setting up
  • 7-day free trialon every eligible domain, one per domain
  • $297/moper subdomain
  • We set up the first domain with youfounder included
  • 30-day money-back guaranteeand cancel any time in the trial
  • We keep working with youuntil it is fixed
Start 7-day trialGet a free consultation

Payment method required at checkout. One trial per domain. The 30 minutes start once tracking is installed and events fire; it is visibility in Events Manager, not same-day ROAS.