Click Event value in evar

[Harsh61]

Hello Team,

I am trying to get a click event value in evar using Adobe Launch but somehow it's not working. My problem statment is:

We have some videos over our page and every video has a "data-id" value assign to it. I want to assign this custom value in an evar on the click of the play button. I have created a rule which is firing when I am clicking over video button but my evar is not getting any value or even firing.

I added the code to get "data-id" in a data element custom code and assigning that data element to evar using set variables for Adobe Analytics, but somehow it is not working. When I try the data element code in browser console it works correctly.

How can I get the custom values in my evar on click?

Rule Click Event:

Rule Action:

Data Element:

Data Element Custom Code:

$( ".grp-video__play-button" ).click(function() {
  var id = $(this).parent().parent().parent().attr('data-id');
    return id;
});

Video HTML:

<div class="grp-yt-video" data-component-name="ytvideo" data-id="ABCDEFGHHIJ" data-start-muted="0" id="grp-video-1796119669" data-initialized="true">

  <div class="grp-yt-video__container">
    <div data-cmp-is="image" data-cmp-lazy="true" data-cmp-src="/content/grpw/websites/abcd/dummy/1658930331134.jpeg" data-cmp-widths="320, 640, 1280, 2560" class="grp-yt-video__thumbnail cmp-image">
      <img src="/de/de/dummy/_jcr_content/par/layoutcontainercontent/columncontrol_1133979323/columncontrolparsys/stack/stackparsys/img.jpeg/1651230331134.jpeg" class="cmp-image__image grp-yt-video__thumbnail-img" data-cmp-hook-image="image" alt="Dummy Text">
      <div class="grp-video__play-button"></div>
      <div class="grp-video__player" style="height: 479.25px;"><iframe class="grp-video__player-iframe" title="video" id="yt-player-0type=" text="" html"="" frameborder="0" src="https://www.youtube-nocookie.com/embed/ABCDEFGHIJHK?mute=0&amp;rel=0"></iframe></div>      
<div class="grp-video-player-disclaimer" style="display: none;">
  <div class="grp-video-player-disclaimer-textbox">
    <span class="grp-video-player-disclaimer-text">
          Dummy cookie text .
    </span>
    <ul class="grp-video-player-disclaimer-linklist">
      <li>
        <a class=" grp-link-list__item " href="#">
          Cookies accept und Video
        </a>
      </li>
      
    </ul>
  </div>
</div>
    </div>
  </div>
</div>

[tim_funk · Accepted solution]

Your Data Element Custom Code isn't setting the value. When doing custom code - its to return a value. And your code is just returning the result of click() - which is just a jQuery object. Not the result of the event firing.

My preferred approach is to add a custom condition on the rule that sets VideoID for you and returns true. Something like this:

_satellite.setVar('VideoID', this.getAttribute('data-id'))
return true

[Harsh61]

I added the above condition in rule, and my rule is still firing but still my evar is empty.

Do I need to do some change in data element code also?

[tim_funk]

Yes - You need to delete the Data Element Rule called VideoID because now the custom rule is setting that value for you.

By leaving the rule in existence - that is used instead of the setVar() 

[Harsh61]

Sorry, I didn't get this step.

If I delete my Data Element then what should I call in my setVariables for Adobe Analytics evar?

Also, if I remove the Data Element how will I find "data-id" over that particular class

.grp-video__play-button

[tim_funk]

The setting is handled in the custom condition (set the variable VideoID from attribute data-id from "this")

_satellite.setVar('VideoID', this.getAttribute('data-id'))

"this" assumes it was the button that was clicked (that has the data-id attribute)

[Harsh61]

Ok, I tried

_satellite.setVar('MyID', this.getAttribute('data-id'))

in condition and then I call set variables as below screenshot

 It didn't work.

Is it due to my "data-id" attribute is not at the same level as my click class. It is the attribute of it's 3rd parent as I wrote in my initial question

[tim_funk]

Aha - My bad. In that case - its a different selector (using jQuery this time to keep the call shorter)

$(this).parents('.grp-yt-video').data('id')

Or more fully

_satellite.setVar('VideoID', $(this).parents('.grp-yt-video').data('id'))

[Harsh61]

Ok, I tried like below screenshot in condition

and set my evar as same before in setVariables.

but it didn't work, my evar still comes empty

Did I use ('data-id') correctly?

[tim_funk]

In jQuery if you use data() - You need to drop "data-" from the argument.

But if you said .attr("data-id") - that shoudl work

[Harsh61]

And it worked

Thank you so much for your quick support, It means a lot.