Expand my Community achievements bar.

Check out the 3rd Edition of the AEP Community Lens for all the latest releases, resources, and Community updates
SOLVED

Click Event value in evar

Avatar

Level 2

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:

Screenshot 2022-10-11 at 18.51.49.png

Rule Action:

Screenshot 2022-10-11 at 18.53.43.png

Data Element:

Screenshot 2022-10-11 at 18.53.09.png

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>

 

 

1 Accepted Solution

Avatar

Correct answer by
Level 4

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
7 Replies

Avatar

Correct answer by
Level 4

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

Avatar

Level 2

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?

Screenshot 2022-10-11 at 19.32.31.pngScreenshot 2022-10-11 at 19.32.55.png

Avatar

Level 4

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() 

Avatar

Level 2

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?

Screenshot 2022-10-11 at 19.43.49.png

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

.grp-video__play-button

 

Avatar

Level 4

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)

 

 

Avatar

Level 2

Ok, I tried

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

in condition and then I call set variables as below screenshot

Screenshot 2022-10-11 at 20.04.45.png

 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

Avatar

Level 4

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'))

Avatar

Level 2

Ok, I tried like below screenshot in condition

Screenshot 2022-10-11 at 20.27.53.png

and set my evar as same before in setVariables.

Screenshot 2022-10-11 at 20.04.45.png

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

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

Avatar

Level 4

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

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

Avatar

Level 2

And it worked 🙂

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

 

page footer