How to get closest value on click using adobe launch?

[gkrish12345]

How to get closest value on click using adobe launch? In this case I want to capture product detail in evar when "add to cart" button is clicked. I used the below code. I can see "add  to cart" button value and not the product detail value. Also pls share some content to read on this concept. I guess this is called dom traversal?

s.prop48 = "Button"+" | "+$(this).closest("div.product-name").find("p.limit").text()+" | "+$(this).text();
s.eVar109 = "D=c48";
s.events = "event313";
s.linkTrackVars = "events,prop48,eVar109";
s.linkTrackEvents = "event313";
s.ActivityMap = function(){return false};

[Jennifer_Dungan]

I think part of the issue is that "closest" only goes "up" the DOM tree, but the div you are trying to pull data from is actually at the same level as is div you find going up the tree... I don't think I described that correctly.. let me try to illustrate:

Trucnk

       Main Branch

                Sub Branch

                           Branch A

                                     Product Name

                           Branch B

                                      Button

So from the button, the closest function is actually looking at Branch B, then Sub Branch, then Main Branch, then the Trunck...  (it skips over Branch A, because Branch A is at the same level as Branch B....

But, if you can use closest to get to "Sub Branch" element (or you may have to go higher seeing that there aren't a lot of identifiable attributes at that level), you can than look inside of Sub Branch (or the element you can get) for the value you are trying to pull. When I do things like this, I try not to use positioning as that can change with slight redesigns.

Without being able to see the full DOM of you page, I don't want to try writing code suggestions for fear of pulling the wrong value without testing against against the actual code....  but seeing as how you appear to be pretty familiar with JQuery and traversing the DOM tree understanding the small detail of the current nesting structure should help you to form your own script

Or if your developers are amenable, I often ask them to add the product name as a data attribute on the button so that I can grab it without all the searching... but on some of our third party stuff, I can't do that, and yes, I have created similar pulls to the above.

If you are comfortable with the browser console, you can test your code there.. create a variable that holds the button element (I usually use CSS selectors and querySelector), so that I can hold the object in "ele"

Then, I can test my JS using ele. instead of this. (once working, I go back to this. in Launch, and test again).. but this will save a lot of Dev deployments in Launch.

Good Luck

[yuhuisg]

Firstly, $(this) is jQuery syntax. Unless your web page has jQuery loaded, any code that assumes that $ exists is going to fail. Launch, by itself, does not load jQuery. I myself try to avoid using any code that assumes the presence of a 3rd-party library like jQuery, relying on native JavaScript alone.

The best solution of all is to get your developers to provide what you need, instead of having you to traverse the DOM (yes, you got the phrase "DOM traversal" correct). If the developers change the web page's structure, your code breaks and so does your tracking. You can ask them to include the data attributes, like what @Jennifer_Dungan suggested. Or, nowadays, most analytics implementations include setting up a "data layer", with the Adobe-recommended one being their own Adobe Client Data Layer (https://experienceleaguecommunities.adobe.com/t5/adobe-experience-platform-blogs/implementing-adobe-.... But if you don't have any data layer now, then it's going to be a massive undertaking to add a data layer just for this specific tracking requirement.

Having said that, if you still want to traverse the DOM to get your required data, then here's my code suggestion:

var productNameText = '';
try {
  var productNameParagraph = this.closest('div > div.product-name > p.limit');
  if (productNameParagraph) {
    productNameText = productNameParagraph.innerText.trim();
  }
} catch(e) {}
// the above is done just in case, for some reason, the productNameParagraph element can't be found in the web page

var addToCartText = this.innerText.trim();

s.prop48 = [
  'Button',
  productNameText,
  addToCartText,
].join('|');

I haven't validated this code to work with your web page, so please test it extensively!

[leocwlau]

+1 for don't do DOM traversal. The logic can be broken the next day when the developer updated the DOM structure without knowing someone from the analytics team is getting the product information from the DOM.

[ranjithd]

Hi,

Is $(this).text(); referring to a class, an id, or element here?

CTA appears to be an image ('.primary-image') in the picture below.
If you are referring to a picture, you must use alt or title text or a generic hard coded term, as images do not have text elements.

$(document).on('click','.primary-image',function(){
var CartToAdd = "Add to Cart";
var CartToAdd1 = $(this).attr('title');
var ProductName = $(this).closest("div.product-name").find("p.limit").text();
s.prop48 = "Button"+" | "+ProductName+" | "+CartToAdd||CartToAdd1;
});

[gkrish12345]

I get this when I use 

$(this).closest("div.product-name").find("p.limit").text();

[ranjithd · Accepted solution]

You can try with below,

$(this).closest("div.swiper-slide").find(".product-name p.limit").text();

else try changing the other placements div classes to closest and find both places

if possible DM your page preview URL to get & share the code.

[gkrish12345]

This works. Thanks.