Script injection in React SPA application using Triggerview function | Community
Skip to main content
P
Pravinrams1
Level 2
July 13, 2023
Solved

Script injection in React SPA application using Triggerview function

  • July 13, 2023
  • 1 reply
  • 1651 views

Hello there,

I've recently set up/upgraded to at.js 2.x on our React Application (Using Adobe Node SDK on the server side) and using TriggerView to invoke the campaign. The problem is - Currently we have an element on the page(SPA) with a few cards with buttons and every time each button is clicked it loads data from our Database(JSON) but all 3 button clicks will generate DOM with the same class name and similar structure. My question is - how to differentiate each button clicks on the Target/server side to inject different content for an AB test because if I target classname it will load the same data from my script for all 3 button clicks?

I have attached the sample screenshot below. When someone clicks on the button on each card it will open up another card(like a modal popup) with different data coming from DB with similar DOM.
The goal is to AB test different data for different locations using Target.

 

Thanks and I would appreciate any help 🙂 


Example of the structure below: 
The links for href and text are coming from DB as a JSON object.

 

 

Card 1 <p class="popupWrapper ">Sample Heading</p> <ul id="Menu1"> <a href="https://adobe.com/#1" target="_blank"> <li class="listeitem">Item number 1</li></a> <a href="https://adobe.com#2" target="_blank"> <li class="listeitem">Item number 2</li></a> <a href="https://adobe.com#3" target="_blank"> <li class="listeitem">Item number 3</li></a> </ul> <button type="button" class="btnClass">Button 1</button> Card 2 <p class="popupWrapper ">Sample Heading</p> <ul id="Menu1"> <a href="https://target.com/#1" target="_blank"> <li class="listeitem">Second card item 1</li></a> <a href="https://target.com#2" target="_blank"> <li class="listeitem">Second card item number 2</li></a> <a href="https://target.com#3" target="_blank"> <li class="listeitem">Second card item number 3</li></a> </ul> <button type="button" class="btnClass">Button2</button>

 

    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 alexbishop

    You're right that viewName is typically used to identify state/route changes in SPAs but you can think of it more generally as a way to notify Target that content has changed. The challenge here is that it still depends on you being able to identify which card has been displayed, so that you can pass the relevant "card1", "card2", "card3" viewName param.

    1 reply

    alexbishop
    Adobe Employee
    alexbishopAdobe Employee
    Adobe Employee
    July 14, 2023

    The two most reliable options I can think of are:
    i) Work with a developer to have a unique ID/data attribute added to each card, so you can reliably identify it
    ii) Work with a developer to have a unique viewName for each card e.g. triggerView('cardOne'), triggerView('cardTwo') etc

      P
      Pravinrams1Author
      Level 2
      July 14, 2023

      Hi Alex, 

      I am the developer and those cards are generated dynamically based on the data in the DB through iteration so adding a unique ID to each card is not an option or useless since there can be 1 card or many cards based on how many team needs in the current situation.

       

      Your 2nd option is interesting - I thought ViewName is unique per page for example homepage, searchpage and contact us page. How can I implement ViewName on my applyoffer?

      In my code, we have a Trigger view function in a centralized location and getting ViewName and mbox name from each page for e.g. My Homepage viewName would be "home" and mbox would be "global_home_mbox" sent from my TriggerView function as a param (TrgiggerView('home', 'global_home_mbox') from my home page index.jsx

      Below is my current setup:

      export function triggerView(viewName, mbox) { if (typeof adobe !== 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') { adobe.target.getOffer({ "mbox": mbox, "success": function (offer) { if (offer.length) { adobe.target.applyOffer({ "mbox": mbox, "offer": offer }); } }, "error": function (status, error) { console.log('Error', status, error); }, "timeout": 3000 });

       

        alexbishop
        Adobe Employee
        alexbishopAdobe EmployeeAccepted solution
        Adobe Employee
        July 24, 2023

        You're right that viewName is typically used to identify state/route changes in SPAs but you can think of it more generally as a way to notify Target that content has changed. The challenge here is that it still depends on you being able to identify which card has been displayed, so that you can pass the relevant "card1", "card2", "card3" viewName param.

          Terms & ConditionsAccessibility statement

          Loading footer...