Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Analytics Champion Program are open!
SOLVED

Youtube Tracking through Configure tracker usibg custom code

Avatar

Level 1

Hi ,

We are having a issue with youtube videos while playing the videos some times we are able to see the rule getting triggered but some time the rule is not getting triggered. we are using the custom code.
The custom code is

var n = 0;
var eFrameFlag = {};
document.querySelectorAll('iframe').forEach(function(el) {
var src=el.getAttribute('src');
if (src) {
if (src.indexOf('youtube') > -1) {
if (src.indexOf('?') > -1) {
if (src.indexOf('enablejsapi') == -1) {
src=src + '&enablejsapi=1';
}
} else {
src=src + '?enablejsapi=1';
}
el.setAttribute('src', src);
el.setAttribute('id', 'player' + n);


var frameId = 'player' + n;
eFrameFlag[frameId] = 0;
n++;

return el;

}
}
});


try {
var addYoutubeEventListener = (function() {

var callbacks = [];
var iframeId = 0;

return function(iframe, callback) {
// init message listener that will receive messages from youtube iframes

if (iframeId === 0) {
window.addEventListener("message", function(e) {

if ((e.origin !== "https://www.youtube-nocookie.com" || e.data === undefined) && (e.origin !== "https://www.youtube.com" || e.data === undefined)){
return;
}
try {
var data = JSON.parse(e.data);
var callback = callbacks[data.id];
callback(data);
}
catch (e) {}
});
}

// store callback
iframeId++;
callbacks[iframeId] = callback;
var currentFrameId = iframeId;

// sendMessage to frame to start receiving messages
iframe.addEventListener("load", function() {
var message = JSON.stringify({
event: 'listening',
id: currentFrameId,
channel: 'channelnameofyourchoice'
});

iframe.contentWindow.postMessage(message, 'https://www.youtube-nocookie.com');
iframe.contentWindow.postMessage(message, 'https://www.youtube.com');

message = JSON.stringify({
event: "command",
func: "addEventListener",
args: ["onStateChange"],
id: currentFrameId,
channel: "channelnameofyourchoice"
});

iframe.contentWindow.postMessage(message, 'https://www.youtube-nocookie.com');
iframe.contentWindow.postMessage(message, 'https://www.youtube.com');
});
}
})();

document.querySelectorAll('iframe').forEach(function(els) {
var newid = els.getAttribute('id');
var twentyfivePercent = false;
var fiftyPercent = false;
var seventyfivePercent = false;
var urlclicked;

addYoutubeEventListener(document.getElementById(newid), function(e) {

switch (e.info) {

case 1:
if (eFrameFlag[newid] == 0) {
urlclicked = window.frames[newid].src.split("?")[0];
_satellite.setVar('mediaName',urlclicked);
_satellite.track('YTvideoStart');
}
eFrameFlag[newid] = 1;
break;

case 0:
_satellite.track('videoCompleted');
break;

case 2:
_satellite.track('videoPause');
}


if(e.info.duration !== undefined && e.info.duration != null) {
_satellite.setVar("vidDuration",e.info.duration);
}


if(_satellite.getVar("vidDuration") !== undefined && e.info.currentTime !== undefined) {
var currentTime, duration;
currentTime = e.info.currentTime;
duration = _satellite.getVar("vidDuration");

if((currentTime >= (duration / 4)) && twentyfivePercent == false) {
_satellite.track('video25');
twentyfivePercent = true;
} else if((currentTime >= (duration / 2)) && fiftyPercent == false) {
_satellite.track('video50');
fiftyPercent = true;
} else if((currentTime >= (0.75 * duration)) && seventyfivePercent == false) {
_satellite.track('video75');
seventyfivePercent = true;
}

}
}

);
return els;
});
} catch (err) {
console.log("Video Tracking Not Present");
}


we are able to see the enablejsapi in the iframe sometimes we couldnt see that value whnever that value is present youtube video gets triggered.

Any Suggestion or Help Required.
Thanks..

1 Accepted Solution

Avatar

Correct answer by
Level 2

Instead of custom code Follow below steps to track YouTube videos.

 

1. Install YouTube Playback extension.

2. Create a data element select extension as YouTube Playback and data element type as Video Title (To fetch the video name)

3.Create a rule EVENTS= Window loaded then ACTIONS= select extension as YouTube Playback, Action Type=Enable video playback tracking.

4. Create a rule EVENTS= based on your requirement EX: Video start, Video 25%, Video End etc then ACTIONS select extension as Adobe analytics, Action type as set variable, set a required Evars/Props select set as data element created in step-2.

Ex: Evars/Props 40 set as video title data element

 

s.eVar40Video Name
s.event28Video Start
s.event29Video Completes
s.event3025
s.event3150
s.event3275

Give a thumps up if you like my solution.

View solution in original post

3 Replies

Avatar

Community Advisor

Honestly, I had the same thing... whether I coded my own API integration (re-coded 4 times when it randomly broke due to the API having minor changes) or used one of the Adobe Launch YouTube extensions...

 

I am seriously of the mind that the YouTube API isn't terribly stable and breaks when someone over there sneezes....

 

That said, if you are also using GTM on your sites, I came up with a "Frankenstein" solution, using GTM's YouTube actions (I figured Google should be able to support detecting their own products... right?) and setting a data layer and custom JS event that I use Adobe Launch to detect the action and read the data to process the video tracking...

 

Here is my solution: 

https://experienceleaguecommunities.adobe.com/t5/experience-league-showcase-2022/creating-a-frankens...

 

However, one of the other regulars here actually coded one of the YouTube extensions for Launch, and I know he's always willing to help people integrate that solution (it didn't work for me, but you might have better luck?)

 

@yuhuisg maybe you have some advice here?

Avatar

Community Advisor

Thanks for the mention, @Jennifer_Dungan !

@hell1234567890 , it sounds like you're using Adobe Launch, since you mentioned "rule" in your post. If so, is there any reason why you are using custom code instead of an extension?

As Jennifer mentioned, I am the developer of the YouTube Playback extension, so I am familiar with how the YouTube API works.

Also, how are your videos loaded? Are they loaded when the page loads, or are they loaded dynamically through a script?

Avatar

Correct answer by
Level 2

Instead of custom code Follow below steps to track YouTube videos.

 

1. Install YouTube Playback extension.

2. Create a data element select extension as YouTube Playback and data element type as Video Title (To fetch the video name)

3.Create a rule EVENTS= Window loaded then ACTIONS= select extension as YouTube Playback, Action Type=Enable video playback tracking.

4. Create a rule EVENTS= based on your requirement EX: Video start, Video 25%, Video End etc then ACTIONS select extension as Adobe analytics, Action type as set variable, set a required Evars/Props select set as data element created in step-2.

Ex: Evars/Props 40 set as video title data element

 

s.eVar40Video Name
s.event28Video Start
s.event29Video Completes
s.event3025
s.event3150
s.event3275

Give a thumps up if you like my solution.