Google Tag Manager API Target Youtube video's in (multiple) existing iframe(s)
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I have a site where an overlay opens and loads a javascript for the Google Tag Manager, without there being any Youtube Video's present yet. When the user clicks on a button (class = .flower-leaf or .list-leaf), the youtube video that we want to track with GTM appears on the page via an iframe.
Last week I stumbled upon this issue, when I wanted to use the YouTubeAPI to give me an event when the video stopped playing: YouTube API Target (multiple) existing iframe(s)
Now, I want something similar, but not quite, because instead of kicking off custom functions for onReady and onStateChange events, I just want the GTM script to respond to these events. Now, my JavaScript knowledge isn't expert, so I might be missing something obvious here, but how do I make sure that the GTM script functions are going to be triggered on those events? With my current code, I get an error saying that onPlayerReady is not defined. It's obviously only looking in the scope of my own script, but I want to trigger a GTM function. How would I go about that?
// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubePlayerAPIReady() {
$(".flower-leaf").click(function () {
interval = setInterval(myTimer, 1000);
});
$(".list-leaf").click(function () {
interval = setInterval(myTimer, 1000);
});
}
var interval;
var player;
function myTimer() {
myStopFunction();
addEventListeners();
}
function myStopFunction() {
clearInterval(interval);
}
function addEventListeners() {
$(".flower-leaf").each(function () {
var identifier = 'youtubeplayer';
player = new YT.Player(identifier, {
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange,
}
});
});
$(".list-leaf").each(function () {
var identifier = 'youtubeplayer';
player = new YT.Player(identifier, {
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange,
}
});
});
}
I think it's important to mention I'm using the standard YouTube-video trigger in my GTM setup (on tagmanager.google.com)
javascript jquery events youtube-api google-tag-manager
asked Nov 22 '18 at 15:21
EmmezaliEmmezali
237
add a comment |
I have a site where an overlay opens and loads a javascript for the Google Tag Manager, without there being any Youtube Video's present yet. When the user clicks on a button (class = .flower-leaf or .list-leaf), the youtube video that we want to track with GTM appears on the page via an iframe.
Last week I stumbled upon this issue, when I wanted to use the YouTubeAPI to give me an event when the video stopped playing: YouTube API Target (multiple) existing iframe(s)
Now, I want something similar, but not quite, because instead of kicking off custom functions for onReady and onStateChange events, I just want the GTM script to respond to these events. Now, my JavaScript knowledge isn't expert, so I might be missing something obvious here, but how do I make sure that the GTM script functions are going to be triggered on those events? With my current code, I get an error saying that onPlayerReady is not defined. It's obviously only looking in the scope of my own script, but I want to trigger a GTM function. How would I go about that?
// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubePlayerAPIReady() {
$(".flower-leaf").click(function () {
interval = setInterval(myTimer, 1000);
});
$(".list-leaf").click(function () {
interval = setInterval(myTimer, 1000);
});
}
var interval;
var player;
function myTimer() {
myStopFunction();
addEventListeners();
}
function myStopFunction() {
clearInterval(interval);
}
function addEventListeners() {
$(".flower-leaf").each(function () {
var identifier = 'youtubeplayer';
player = new YT.Player(identifier, {
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange,
}
});
});
$(".list-leaf").each(function () {
var identifier = 'youtubeplayer';
player = new YT.Player(identifier, {
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange,
}
});
});
}
I think it's important to mention I'm using the standard YouTube-video trigger in my GTM setup (on tagmanager.google.com)
javascript jquery events youtube-api google-tag-manager
asked Nov 22 '18 at 15:21
EmmezaliEmmezali
237
add a comment |
I have a site where an overlay opens and loads a javascript for the Google Tag Manager, without there being any Youtube Video's present yet. When the user clicks on a button (class = .flower-leaf or .list-leaf), the youtube video that we want to track with GTM appears on the page via an iframe.
Last week I stumbled upon this issue, when I wanted to use the YouTubeAPI to give me an event when the video stopped playing: YouTube API Target (multiple) existing iframe(s)
Now, I want something similar, but not quite, because instead of kicking off custom functions for onReady and onStateChange events, I just want the GTM script to respond to these events. Now, my JavaScript knowledge isn't expert, so I might be missing something obvious here, but how do I make sure that the GTM script functions are going to be triggered on those events? With my current code, I get an error saying that onPlayerReady is not defined. It's obviously only looking in the scope of my own script, but I want to trigger a GTM function. How would I go about that?
// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubePlayerAPIReady() {
$(".flower-leaf").click(function () {
interval = setInterval(myTimer, 1000);
});
$(".list-leaf").click(function () {
interval = setInterval(myTimer, 1000);
});
}
var interval;
var player;
function myTimer() {
myStopFunction();
addEventListeners();
}
function myStopFunction() {
clearInterval(interval);
}
function addEventListeners() {
$(".flower-leaf").each(function () {
var identifier = 'youtubeplayer';
player = new YT.Player(identifier, {
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange,
}
});
});
$(".list-leaf").each(function () {
var identifier = 'youtubeplayer';
player = new YT.Player(identifier, {
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange,
}
});
});
}
I think it's important to mention I'm using the standard YouTube-video trigger in my GTM setup (on tagmanager.google.com)
javascript jquery events youtube-api google-tag-manager
asked Nov 22 '18 at 15:21
EmmezaliEmmezali
237
I have a site where an overlay opens and loads a javascript for the Google Tag Manager, without there being any Youtube Video's present yet. When the user clicks on a button (class = .flower-leaf or .list-leaf), the youtube video that we want to track with GTM appears on the page via an iframe.
Last week I stumbled upon this issue, when I wanted to use the YouTubeAPI to give me an event when the video stopped playing: YouTube API Target (multiple) existing iframe(s)
Now, I want something similar, but not quite, because instead of kicking off custom functions for onReady and onStateChange events, I just want the GTM script to respond to these events. Now, my JavaScript knowledge isn't expert, so I might be missing something obvious here, but how do I make sure that the GTM script functions are going to be triggered on those events? With my current code, I get an error saying that onPlayerReady is not defined. It's obviously only looking in the scope of my own script, but I want to trigger a GTM function. How would I go about that?
// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubePlayerAPIReady() {
$(".flower-leaf").click(function () {
interval = setInterval(myTimer, 1000);
});
$(".list-leaf").click(function () {
interval = setInterval(myTimer, 1000);
});
}
var interval;
var player;
function myTimer() {
myStopFunction();
addEventListeners();
}
function myStopFunction() {
clearInterval(interval);
}
function addEventListeners() {
$(".flower-leaf").each(function () {
var identifier = 'youtubeplayer';
player = new YT.Player(identifier, {
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange,
}
});
});
$(".list-leaf").each(function () {
var identifier = 'youtubeplayer';
player = new YT.Player(identifier, {
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange,
}
});
});
}
I think it's important to mention I'm using the standard YouTube-video trigger in my GTM setup (on tagmanager.google.com)
javascript jquery events youtube-api google-tag-manager
javascript jquery events youtube-api google-tag-manager
asked Nov 22 '18 at 15:21
EmmezaliEmmezali
237
asked Nov 22 '18 at 15:21
EmmezaliEmmezali
237
edited Nov 22 '18 at 15:27
Emmezali
asked Nov 22 '18 at 15:21
EmmezaliEmmezali
237
asked Nov 22 '18 at 15:21
EmmezaliEmmezali
237
asked Nov 22 '18 at 15:21
EmmezaliEmmezali
237
237
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53434033%2fgoogle-tag-manager-api-target-youtube-videos-in-multiple-existing-iframes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53434033%2fgoogle-tag-manager-api-target-youtube-videos-in-multiple-existing-iframes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
