How can I track product images on Shopify product pages using Google Analytics 4 (GA4)?

Google Analytics 4

How can I track product images on Shopify product pages using Google Analytics 4 (GA4)?

Posted by Benjamin on 6 June 2022 at 8:42 pm
Hey there, I’m still pretty new to Google Analytics 4 (GA4) and right now I’m going through the user guide for the Google API. So far, so good. I even managed to create a custom dimension.

Check out my code below:
```
  const customDimensions = {
    'ab_page_image': 'AB Image',
  }
  for (let p in customDimensions) {
      await analyticsAdminClient.createCustomDimension({
          parent: properties/<span class="hljs-subst">${propertyId}</span>,
          customDimension: {
              scope: 'EVENT',
              parameterName: p,
              displayName: customDimensions[p],
          }
      }).catch(console.error)
  }
```
It’s working fine so far, but I’m a bit unsure about how to tie my custom dimension (I called mine ab_page_image) into Shopify. Anyone know how I can make it so GA4 can pick up and return the value for ab_page_image?
Matthew replied 1 year, 4 months ago 3 Members · 2 Replies
2 Replies

Benjamin

Member
23 July 2022 at 9:41 pm

To tie your custom dimension ab_page_image into Shopify, you would need to modify the Google Analytics tracking script on your Shopify website. This modified script should send the ab_page_image value to Google Analytics whenever a relevant event occurs. The changes would need to be put in the Shopify system either in the form of Liquid code in your Shopify theme, or through additional JavaScript code based on where you’re collecting the ab_page_image values from. For instance, if ab_page_image is a metafield associated with a product, you would retrieve it using Shopify’s Liquid templating language and pass this value into the GA4 event being sent. A developer familiar with both Shopify and GA4 should be able to help set this up for you.
Matthew

Member
2 May 2023 at 8:21 pm

To tie your custom dimension ab_page_image into Shopify, you can make use of Shopify’s liquid templating language to dynamically assign value to your custom dimension. Firstly, you should integrate Google Analytics 4 with your Shopify store. Once integrated, you can modify the tracking code to include events that involves your custom dimension.

For an example, if ab_page_image is associated with a particular product’s image on your Shopify site, you can define this custom dimension when a certain event, like viewing a product, is triggered.

Here’s a brief example of how you can proceed (this is just a pseduo-code and the actual implementation may differ as per your setup):

`js
const image = {{ product.featured_media.src | img_url: '1024x1024' }};

// Event to track product view
gtag(‘event’, ‘view_item’, {
items: [{
item_id: {{ product.id }},
item_name: {{ product.title }},
…
}],
// Assigning value to custom dimension
ab_page_image: image,
});
`

The code above fetches the image associated with a product using Shopify’s liquid templating to get the product’s image, and then assigns it to the ab_page_image custom dimension during a ‘view_item’ event.

Remember, the way you assign value to your custom dimension would highly depend on the scope of the dimension you’ve set (In your case, it’s an ‘EVENT’ scope), and where and when you want to capture the data. You may need to repeat similar process for other events where ab_page_image needs to be captured.

How can I track product images on Shopify product pages using Google Analytics 4 (GA4)?

Benjamin

Matthew