Adobe Analytics Tracking in React Components | Community
Skip to main content
pradeep_07
pradeep_07
Level 4
June 21, 2023
Solved

Adobe Analytics Tracking in React Components

  • June 21, 2023
  • 1 reply
  • 5579 views

Hi ,

 

We are building React App where components will be created and used anywhere. Idea is to add adobe analytics to the components which will enable analytics on wherever the component is used.

 

Is there any documentation or steps available to Install Adobe Analytics on React Web app?

 

Thanks,

Pradeep

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Jennifer_Dungan

Ahhh.. well this all depends on how you want to code your analytics, what you want to track, and how to take into account re-usability of components where AA is not in use....

 

It sounds like you might be running a service to build websites for different clients that may or may not be using Adobe?

 

So first off... no.. you definitely don't want to add specific "App Measurement" code to components, especially if they may be used on sites without AA.

 

Here is some general ideas, cause I don't know what you want to actually track....

 

On our react pages, I had our developers add data attributes... I had one to hold information about the Activity Map Region (something like data-region) I used code in AA to use this data attribute for regions, instead of just reading the default id value (which was completely un-readable to most of the business)... I had rules to take the container header and make it into a slub... or have a backup region name if no title exists.

 

If there are specific call to action buttons, I have the developers add another data attribute, these ones can contain JSON formatted data about the clickable element with classification type info, so that I can create click tracking (IF needed) that can parse and use the JSON to have contextual information about the click... (stuff that might not be parse-able from the anchor href, or if a button, showing the link where that button is going).

 

IF you need to know what containers are loaded on the page, each container could add a value to a page level object variable set in the main app.js...

 

Basically, add some basic, generic context that can be used if AA exists, ignored if not, or even be used by other analytics programs if they need to leverage it...

 

I wouldn't make it AA specific... but something that AA can use when the code exists in Launch to use it.....

 

 

You could then provide some basic guides on how to read these elements, and then no matter what tool is in use (Adobe, GTM, etc) the generic data can be turned into specific tracking depending on needs.....

1 reply

Jennifer_Dungan
Community Advisor and Adobe Champion
Jennifer_DunganCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
June 21, 2023

What kind of analytics are you trying to do at a component level? 

 

Analytics is "page views" and "actions"... it not component based....

 

If you are trying to understand when a page loads what components are on the page, that would be a custom solution... I would work with your developers to have an object or something on the page that lists the components in a way that you can read, process, and then figure out how to represent that on your page load...

 

Similarly, if you are trying to associate "actions" to interactions on those components, you should just be able to create your click listeners as always... if the component is on the page and someone clicks it, it will track... if it's not on the page, and therefore not clickable, nothing else will happen....

    pradeep_07
    pradeep_07Author
    Level 4
    June 22, 2023

    Thanks @jennifer_dungan 

     

    Its kind of developer playbook where other developers can copy the code and use it for different websites and pages . 

     

    Questions here is they might use this component on a page where Adobe analytics is not used . That being said , do we need to add App meaurement code to each component they use ? and add dataleyer to capture click event ?

     

    Please suggest if there is any other way.

     

    Thanks,

    Pradeep

    Jennifer_Dungan
    Community Advisor and Adobe Champion
    Jennifer_DunganCommunity Advisor and Adobe ChampionAccepted solution
    Community Advisor and Adobe Champion
    June 22, 2023

    Ahhh.. well this all depends on how you want to code your analytics, what you want to track, and how to take into account re-usability of components where AA is not in use....

     

    It sounds like you might be running a service to build websites for different clients that may or may not be using Adobe?

     

    So first off... no.. you definitely don't want to add specific "App Measurement" code to components, especially if they may be used on sites without AA.

     

    Here is some general ideas, cause I don't know what you want to actually track....

     

    On our react pages, I had our developers add data attributes... I had one to hold information about the Activity Map Region (something like data-region) I used code in AA to use this data attribute for regions, instead of just reading the default id value (which was completely un-readable to most of the business)... I had rules to take the container header and make it into a slub... or have a backup region name if no title exists.

     

    If there are specific call to action buttons, I have the developers add another data attribute, these ones can contain JSON formatted data about the clickable element with classification type info, so that I can create click tracking (IF needed) that can parse and use the JSON to have contextual information about the click... (stuff that might not be parse-able from the anchor href, or if a button, showing the link where that button is going).

     

    IF you need to know what containers are loaded on the page, each container could add a value to a page level object variable set in the main app.js...

     

    Basically, add some basic, generic context that can be used if AA exists, ignored if not, or even be used by other analytics programs if they need to leverage it...

     

    I wouldn't make it AA specific... but something that AA can use when the code exists in Launch to use it.....

     

     

    You could then provide some basic guides on how to read these elements, and then no matter what tool is in use (Adobe, GTM, etc) the generic data can be turned into specific tracking depending on needs.....

      Terms & ConditionsAccessibility statement

      Loading footer...