Question from Reddit:
So, in this thread on /r/GoogleAnalytics4 I initially asked,
Photographer here, wondering how to see which images on my site are most popular, but due to gallery display shows as single page visit.
The best answer I got back was:
You need enhanced element tracking similar to enhanced ecommerce tracking where you will be creating the data layer for each photo and tracking the each view over the individual photos & make a photo_view tag, triggers& variable accordingly in the gtm and track it all.
I tried to understand this, but there’s a bit too much technical knowledge I lack to totally understand what is even being said. Just enough to know something is being said that should make sense.
So, can anyone help me implement this?
Answer from Nabil:
The short answer is:
The advice you received is essentially correct: to track individual photo views in a gallery that uses a single URL, you need to use Google Tag Manager (GTM) to fire a custom GA4 event, such as photo_view, every time a new photo is displayed.
Since the URL doesn’t change, the default page_view event won’t help you.
The most straightforward solution is to create a GTM Custom JavaScript Variable to detect which photo is currently visible or being clicked, and then pass the unique photo details, like its ID or name, into a custom event in GA4.
This approach decouples the photo view from the page load, treating each photo as a virtual page that you track explicitly.
The long answer is:
Your situation is common for photographers and anyone using image galleries, sliders, or carousels that use a modern Single-Page Application (SPA) style of display.
Because the URL in the browser’s address bar remains the same as the user clicks the next arrow or thumbnails, GA4 only records a single page_view event, which is why your traffic acquisition data is fine but your image popularity data is missing.
The advice to use enhanced element tracking is the right direction, and we can simplify it.
You don’t necessarily need to involve your website developer for a full data layer implementation if your gallery has recognizable elements.
The first step is to identify a unique trigger and unique data.
The trigger will be the button click or swipe that causes the photo to change.
You can use GTM’s built-in Click Trigger set to fire on the element that changes the photo, such as the Next arrow.
The unique data for each photo – its ID, file name, or title – is the crucial information you need to capture and send to GA4.
Since you want to avoid tedious manual tagging, we’ll try to dynamically capture this data.
You can inspect the image element (right-click the photo and choose Inspect) to see if the unique photo name is already present in an element attribute like the data-id, alt text, or the image’s src URL.
Once you find this unique photo data, you will set up a GTM Variable to extract it.
This is often done using a GTM Custom JavaScript Variable that looks at the currently visible photo element’s attribute.
Next, you create a GA4 Event Tag that fires on your click trigger.
Instead of sending just a basic event, you’ll attach Event Parameters to it.
You would send a custom event named photo_view with a parameter like photo_id and set its value to your new GTM Variable that holds the photo’s unique identifier.
Finally, while the client-side method above works, the most reliable and future-proof solution is to implement server-side tracking using the Google Analytics Data API and a server container (Stape or Google Cloud Platform).
Your GTM (client-side) would send the photo_view event, along with the photo ID and a unique user identifier, to your server container.
The server container then cleans, validates, and enhances this data before sending it to GA4.
The GA4 Data API allows you to then pull this clean, granular data into a custom reporting dashboard, bypassing the standard GA4 interface’s limitations.
This server-side approach prevents data loss from ad-blockers and privacy settings, guaranteeing the most accurate reporting on your most popular images.
About The Author
