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..
Views
Replies
Total Likes
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:
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?
Views
Replies
Total Likes
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?
Views
Replies
Total Likes