A listicle might recommend the best laptops, compare travel destinations, rank accommodation options or catalogue enterprise software. Every result may contain a similar call-to-action button, but each click has different commercial meaning.

Without listing-level data, analytics might only report that 500 visitors clicked a button labelled View Website. That does not reveal whether the activity came from a specific product, travel experience or comparison result.

Dynamic event tracking adds context to a single interaction type. Each click can be associated with an item name and destination while remaining part of one consistent GA4 event.

Where this approach works

• Ecommerce buying guides: Track which recommended products drive clicks to product pages or external merchants.
• Travel blogs: Identify which hotels, destinations, tours or booking partners receive referrals.
• Affiliate publications: Measure outbound clicks by featured offer or product.
• Software comparison sites: Compare clicks to individual platforms and vendors.
• Directories and marketplaces: Track visits to listed organisations, venues and service providers.

The key idea: track the interaction once, and let the item information change dynamically with each click.

There are two common approaches to event naming. The first generates a different event name for every listing, such as click_wireless_headphones or click_city_hotel. The second uses one shared event name and passes the clicked item as a parameter.

For most large websites, the second approach is easier to manage and analyse. It keeps GA4's event taxonomy predictable and avoids attempting to register a separate key event for every item.

When a visitor clicks a different item, the listing_referral_click event stays the same. Only its parameters change. If this action represents a meaningful business outcome, you can mark the shared event as a GA4 key event.

Measurement caveat: An outbound click is evidence of a referral attempt, not proof that a purchase, booking or lead happened on the destination website. Use separate purchase or lead tracking when those outcomes are available.

Start by inspecting the page in your browser's developer tools. Find the common parent element around each listing, the element containing its title and the link visitors click. A repeatable structure lets one GTM variable identify the relevant content for any clicked item.

Example HTML — placeholder only

The following code illustrates a sample listing component. It is displayed as text and does not create a functioning product card in this article.

<article class="YOUR_LISTING_CARD_CLASS">
  <h3 class="YOUR_LISTING_TITLE_CLASS">
    Example Product, Hotel or Service
  </h3>
  <a class="YOUR_OUTBOUND_LINK_CLASS"
     href="https://example.com/destination">
    Visit Website
  </a>
</article>

• .YOUR_LISTING_CARD_CLASS identifies one complete listing.
• .YOUR_LISTING_TITLE_CLASS contains the name you want reported in GA4.
• .YOUR_OUTBOUND_LINK_CLASS identifies the link that should trigger tracking.

Replace these three example classes with the actual selectors from your website. For a robust implementation, prefer stable classes or data-* attributes controlled by your CMS or application, rather than brittle selectors based on deeply nested page layout.

In Google Tag Manager, go to Variables → Configure under Built-In Variables. Enable Click Element and Click URL. You can also enable Click Classes and Click Text for debugging.

Click Element gives the Custom JavaScript variable access to the selected HTML element. Click URL supplies the destination for the GA4 event parameter.

If GTM reports that {{Click URL}} is an unknown variable, return to the built-in variable configuration and enable it before attempting to save or publish the tag.

In GTM → Variables → New, select Custom JavaScript and name it JS - Listing Name. Paste the following template into GTM after replacing the two CSS selector placeholders.

function() {
  var element = {{Click Element}};

  if (!element) return undefined;

  if (element.nodeType === 3) {
    element = element.parentElement;
  }

  if (!element.closest) return undefined;

  // REPLACE with the selector for one listing container.
  var card = element.closest('.YOUR_LISTING_CARD_CLASS');
  if (!card) return undefined;

  // REPLACE with the selector for its title or name.
  var title = card.querySelector('.YOUR_LISTING_TITLE_CLASS');
  if (!title) return undefined;

  return title.textContent.trim() || undefined;
}

When the visitor clicks a link inside a listing, the variable walks up the DOM to the closest listing card, finds its title and returns the text. This means the same JavaScript can handle new items published through the same template.

Alternative: use a data attribute

For applications with dynamic components or complex markup, a dedicated attribute can be more reliable than extracting display text. For example, each card can expose a stable item identifier or name through data-item-name.

<article class="YOUR_LISTING_CARD_CLASS"
         data-item-name="Example Product">
  ...
</article>

In that case, replace the title lookup in the GTM variable with return card.getAttribute('data-item-name') || undefined;. Use the approach that best matches how your website renders listings.

Go to GTM → Triggers → New and select Click – Just Links. Under Some Link Clicks, choose Click Element, set the operator to matches CSS selector, and enter a selector targeting links within your listing cards.

CSS selector — placeholder only

.YOUR_LISTING_CARD_CLASS a.YOUR_OUTBOUND_LINK_CLASS,
.YOUR_LISTING_CARD_CLASS a.YOUR_OUTBOUND_LINK_CLASS *

The second selector accounts for nested elements inside the link, such as a span or icon. Replace both class names to match your real markup. Name the trigger Listing Referral Click.

If you're tracking outbound referrals, make sure this selector is not also matching unrelated actions such as internal navigation, add-to-cart or checkout buttons. Those actions may deserve separate events and measurement rules.

In GTM, go to Tags → New → Google Analytics: GA4 Event. Connect the tag to your existing Google tag or GA4 Measurement ID, then configure a single event.

Enter parameter names on the left and GTM variable values on the right. A common setup mistake is entering {{JS - Listing Name}} as the parameter name instead of its value.

Example payload — illustrative only

{
  "event_name": "listing_referral_click",
  "item_name": "Example Hotel",
  "destination_url": "https://example.com/book",
  "list_page": "/best-city-hotels/"
}

This sample illustrates the information that should reach GA4. It is not JSON that you need to paste into GTM; configure the Event Name and Event Parameters using the tag interface.

Create the item name custom dimension

In GA4, navigate to Admin → Data display → Custom definitions → Create custom dimension. Use Item Name for the display name, Event for scope and item_name as the event parameter. Save the definition.

Optionally create another event-scoped custom dimension for list_page or destination_url if you need those parameter values available as named dimensions in standard reporting. GA4 already has built-in page dimensions that may cover some page analysis needs.

Mark the shared event as a key event

If an outbound referral is an important business action, open Admin → Events and mark listing_referral_click as a key event once it appears, or use the available new-key-event registration option in your GA4 interface.

You do not need one GA4 key event for every product, hotel or listed provider. One shared key event plus the item dimension gives you both overall totals and item-level reporting. If you are using the click only as an engagement signal, you can leave it as a normal event instead.

Important: GTM creates and sends the event. GA4 receives it, records its parameters and reports on the dimensions you register. Do not create a duplicate GA4 event rule for the same click.

Open Explore → Blank in GA4 and create a free-form exploration. Give it a descriptive title such as Listing Referral Performance.

With this configuration, each row represents a different listing rather than a separate event definition. Add a page dimension as a second row when you need to determine which buying guide, itinerary or comparison page generated the clicks.

Illustrative report

Figures above are fictional and demonstrate report structure only. GA4 may take time to populate custom dimensions in reports, and dimensions are generally not retroactive to events collected before registration.

In GTM, select Preview, connect to a page containing sample listings and click more than one eligible link. Inspect each gtm.linkClick event in Tag Assistant and confirm the GA4 tag fires with the expected values.

• Check the item name: Does JS - Listing Name return the clicked item's title, not the same value for every card?
• Check the destination: Does Click URL return the intended target URL?
• Check trigger scope: Does the tag fire only for the listing links you want to count?
• Check duplicate tags: If an older tag tracks the same clicks, pause it or deliberately account for both event streams to avoid confusing totals.
• Check GA4 DebugView: Confirm listing_referral_click arrives with its parameters.
• Check consent requirements: Make sure analytics fires in accordance with the site's consent configuration and applicable privacy requirements.

Common problems and fixes

Item name is undefined: The clicked element may not be inside the expected card, or the title selector may not match. Inspect the rendered HTML and update the placeholders.

Click URL is unknown: Enable the built-in Click URL variable in GTM.

Multiple events fire: Review old tags, overlapping triggers and whether both a generic click event and a dynamic event are being sent intentionally.

The event appears in DebugView but not in the report: Confirm the event and custom dimension are configured correctly, then allow GA4 processing time before evaluating standard reports and Explorations.

Single-page applications behave differently: If the site updates listings without full page loads, verify click handling after client-side navigation and ensure the page context sent with the click remains accurate.

Once listing-level referral tracking works, the same pattern can support richer attributes. A product publisher might capture category, brand or list position. A travel website might record destination, accommodation type or booking provider. A software comparison platform might distinguish product tier or use case.

Where practical, expose these values through CMS-managed data-* attributes or a deliberate data layer rather than repeatedly scraping visible text from the page. A data layer is particularly valuable when names can change, listings are loaded asynchronously or one item appears in multiple places.

Keep your GA4 event naming consistent, plan custom dimensions carefully and avoid sending sensitive or personally identifiable data in event parameters. The objective is a measurement system that remains maintainable as the website expands, not a new tag for each new listing.