Looking for custom script (capturing inner HTML using jQuery) in Adobe DTM data element?

Question

I am trying to capture HTML text value using jQuery in custom script of DTM data element.

See the scenario:

Below is the snippet of code on the page:

<div class="site-categories">
<ul>
   <li class="mobile-tablets main">
    <a href="/mobiles.html" class="mobile-tablets" style="background-position"> Mobiles & Tablets </a> 
    <a href="/computers.html" class="computers" style="background-position"> Computers </a> 
    <a href="/electronics.html" class="electronics" style="background-position"> Electronics </a> 

and so on.

So basically the ask is to capture the inner HTML text of anchor tag i.e. 'Mobiles & Tablets' or 'Computers' or 'Electronics', depending upon on what link, user clicks.

To achieve this, in the event based rule section, I have set Condition as the tag to fire when class (under div tag) equals 'site-categories' and enabled bubbling on child elements (so as to cover everything under this to fire omniture tag). And then assigning the value of data element in any evar variable.

In the data element section, after selecting the custom script option, I am writing this code:

var value = $('this').html();

return value;

or

var value = jQuery('this').html();

return value;

But this is not working. I even tried using this:

var value;

_satellite.setVar('value', jQuery('this').html()); 

return value;

But this also didn't worked. Can I have a solution for this ? I want this to be dynamic as in, depending upon which section user is clicking on the page, the data element should capture the inner HTML text of that particular anchor tag.

Not sure where I am going wrong. If there is any other solution that exist for this, please let me know. That would be a great help.

Thanks in advance,

Adi

Answer 1

Couple of notes:

Firstly on a sidenote, in your jQuery code, this should not be wrapped in quotes. You should be passing an object reference to the jQuery wrapper. Wrapping it in quotes makes it look for an html element called "this" (e.g. <this>foobar</this>) which is not right.

As to your issue.. not sure how you have setup your rule but basically what you want to do is grab the value and put it into a data element, and then reference the data element when you set the Adobe Analytics variable. So it looks like you were on the right track, and BrettAHale's answer is on the right track too, but to put it all together:

In your rule, add a condition with criteria Data > Custom. Then click "add criteria" and in the codebox, enter in:

_satellite.setVar('linkText', jQuery(this).text());
return true; 

This will set a data element named "linkText", and you return true to make sure the condition is always true. You can use "value" as the name but you should use something more descriptive so you can more easily remember it's purpose later (I used "linkText").

Then, in your Adobe Analytics section of the rule, go to the eVars section and select the eVar you want to set. Then for the "set as" value, enter in %linkText%. This is a reference to the data element you just set in the rule. Don't worry if DTM shows a tooltip saying not found or w/e; it only shows/searches for known data elements you set in the interface, not on-the-fly in rules. Click the "save evar" button and you should see e.g. eVar3="%linkText%" listed (but for whatever eVar you chose).

Save and then test/publish the rule.