Script injection in React SPA application using Triggerview function

[Pravinrams1]

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>

[alexbishop]

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

[Pravinrams1]

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 · Accepted solution]

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.