Need help to track anchor link clicks in richText component for SPA React based components

[VishnuRe4]

We are using SPA react based components. Need to track link clicks authored in RichText fields used in multiple components and push them to adobeDataLayer . 

Please advise, how to target and trigger those events

[pradnya_balvir]

Hi @VishnuRe4 ,

Tracking anchor link clicks (<a> tags) in RichText fields inside a SPA React-based app and pushing them to adobeDataLayer involves a few key steps.

Track anchor clicks:

Delegate listener via event.target.closest('a')

Limit to RichText

Use .rich-text class for targeting

Push to Adobe

Use adobeDataLayer.push({...})

In Adobe Tags:

• Create a Rule:

  • Event Type: Custom Event

  • Event Name: anchorClick

• Use linkText, href, or component from the adobeDataLayer object as Data Elements

• Map these to your desired Adobe variables (eVars, props, events)

Example Data Pushed

window.adobeDataLayer.push({
event: "anchorClick",
linkText: "Learn more",
href: "/support/faq#payment-issues",
component: "RichText"
});

Hope it helps you.

Thanks.

Pradnya

[Jennifer_Dungan]

I am not sure why if you are detecting the link clicks, why you need to push the information into the data layer instead of just using it directly? 

The data layer is for developers to set information from the server or site interactions for you to use... if you're doing the work yourself you are just adding extra work for no reason....

The flow you are talking about is:

1. Rule: Identify the links and detect when they are clicked
   • Get information about that link
   • Push the information into the Data Layer
2. Rule: Listen for "link click" event in Data Layer
   • Extract data from the data layer
   • Build the Tracking Request
   • Send the s.tl beacon

However, you could just be doing:

1. Rule: Identify the links and detect when they are clicked
   • Get information about that link
   • Build the Tracking Request
   • Send the s.tl beacon

As for detecting the Links, you probably don't need to go as complicated as using ".closest('a')"

While I cannot see your site, you should just be able to identify your links using standard CSS Selectors, and use that in the Core Click event:

You should then be able to use custom code using "this" notation, or set into your dimensions using event.element.href for example....

I mean, you can do the full push to data layer then extract from the data layer... to me, it doesn't make a lot of sense, as you are just adding unnecessary work.... if would be different if your developers were doing the detection and push to the data layer, passing you the information... and all you had to do was read from the data layer...

[Vinay_Chauhan]

Hi @VishnuRe4 

You're on the right track with wanting to track anchor link clicks inside RichText components in a React SPA — and you’ve got two solid paths depending on how your team prefers to handle tracking.

Option 1: Direct Tracking (simpler + lighter)

If you're already able to detect the clicks in your components, you can skip pushing to the data layer altogether and just send the tracking call directly.

document.addEventListener('click', function (e) {
const anchor = e.target.closest('.rich-text a');
if (anchor) {
// Call Adobe beacon directly (e.g., s.tl or sendEvent)
// You can use anchor.href, anchor.textContent, etc.
}
});


This keeps things lightweight and avoids unnecessary steps, especially if your marketing/dev teams aren’t relying on the data layer for consistency.

Option 2: Data Layer Push (if you need structure or reusability)

If your setup relies on the Adobe Client Data Layer (ACDL) for capturing events more consistently across the app (and Launch is listening for those events), then pushing to the data layer makes sense.

Step 1: Add a delegated click handler that pushes info to the data layer:


document.addEventListener('click', function (e) {
const anchor = e.target.closest('.rich-text a');
if (anchor) {
window.adobeDataLayer.push({
event: 'anchorClick',
linkText: anchor.textContent,
href: anchor.href,
component: 'RichText'
});
}
});

Step 2: In Adobe Launch (Tags):

• Set up a rule:

  • Event Type: Adobe Client Data Layer – Data Pushed

  • Event Name: anchorClick

• Use data elements to map linkText, href, etc. to your eVars, props, or events

I hope one of them suits your style of implementation.