How to get closest value on click using adobe launch? | Community
Skip to main content
gkrish12345
gkrish12345
Level 2
March 11, 2023
Solved

How to get closest value on click using adobe launch?

  • March 11, 2023
  • 3 replies
  • 2288 views

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};

 

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 ranjithd

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.

 

3 replies

Jennifer_Dungan
Community Advisor and Adobe Champion
Jennifer_DunganCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
March 11, 2023

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
Community Advisor
yuhuisgCommunity Advisor
Community Advisor
March 12, 2023

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-client-data-layer-through-adobe-launch/ba-p/544579). 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
    Community Advisor and Adobe Champion
    leocwlauCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    March 13, 2023

    +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
    ranjithd
    Level 4
    March 13, 2023

    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
    gkrish12345Author
    Level 2
    March 13, 2023

    I get this when I use 

     

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

     

    ranjithd
    ranjithdAccepted solution
    Level 4
    March 13, 2023

    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.

     

    Terms & ConditionsAccessibility statement

    Loading footer...