I created event-based rule to track on the click on videos as set up in the following way. (As shown in the screen capture)
<div class="quick-item"><a data-id="xxx" href="https://youtu.be/xxxx" class="video-popup"><div class="quick-block lazyfade lazyloaded" data-bg="/xxx/xx.jpg" style="background-image: url("/xxx/xx.jpg");"></div><span class="like-button"><span class="icon-play-default" style="
color: #fff;
display: block;
margin: auto;
font-size: 40px;
width: 40px;
"></span>xxxxx/span></a></div>
This is how I set up the DTM event-based tracking:
================================================
Conditions
Tag
- Element Tag or Selector
- .video-popup , .like-button , .icon-play-default
- Event
- click
Rule Conditions
- Path
Include /xxx/xxx/
Custom
var vidname='';
if($(this).hasClass('like-button')){
vidname=$(this).text().trim();
}
else if($(this).hasClass('icon-play-default'))
{
vidname=$(this).parents('.video-popup').find('.like-button').text().trim();
}
else {
vidname=$(this).find('.like-button').text().trim();
}
_satellite.setVar("vidname",vidname);
return true;
=============================================
However, it brings this issue;
1. it seems can not fire the tag for any click on the outer element by class="video-popup"
2. Although clicking within <span class="like-button"> can fire the tracking tag, however, it will change the way the video is played. - by design it should be played on a pop-up, however, after implementing the tracking tag, the pop-up will open the full window browser to play the video.
3. If taking out the above video play tracking the video is played on pop-up as design.
has anyone experience this before and can advise on why this happen and how to fix it?