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

[Matthew]

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.