This guide walks you through the steps of setting up tracking for when any YouTube video is played on your website, including sending the video title as part of the custom activity label.
Step 1: Embed the YouTube videos
Embed the YouTube videos on your website using iframe tags. Replace 'VIDEO_ID' with the ID of your YouTube video and 'VIDEO_TITLE' with the title of your video.
<iframe class="youtube-video" data-title="VIDEO_TITLE" src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Step 2: Load the YouTube IFrame Player API
Load the YouTube IFrame Player API, which allows you to control the YouTube player using JavaScript.
<script src="https://www.youtube.com/iframe_api"></script>
Step 3: Create the YouTube Players
Create new YouTube player objects for each of your videos. Loop over each iframe with the class 'youtube-video' and create a new player.
var players = [];
function onYouTubeIframeAPIReady() {
var iframes = document.querySelectorAll('.youtube-video');
iframes.forEach((iframe, index) => {
players[index] = new YT.Player(iframe, {
events: {
'onStateChange': onPlayerStateChange
}
});
});
}
Step 4: Detect and Send Video Play Events to Salespanel
The onPlayerStateChange function will be used to send a custom activity to Salespanel when a video starts playing.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
// A video is playing
var videoTitle = event.target.getIframe().dataset.title;
$salespanel.push(["set", "activity:customActivity", "Video", "Played a YouTube video: " + videoTitle]);
}
}
Now, each time any YouTube video starts playing on your website, a custom activity will be sent to Salespanel with the video title included in the label.
Note: This guide only tracks when a video starts playing. YouTube's API provides many more events that you can listen for.
Test your implementation thoroughly to ensure that it's working as expected. If you encounter any issues, please feel free to reach out to our support team for assistance.
Here's the complete JavaScript code:
<iframe class="youtube-video" data-title="VIDEO_TITLE" src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
// ^ This part comes from youtube embed widget.
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var players = [];
function onYouTubeIframeAPIReady() {
var iframes = document.querySelectorAll('.youtube-video');
iframes.forEach((iframe, index) => {
players[index] = new YT.Player(iframe, {
events: {
'onStateChange': onPlayerStateChange
}
});
});
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
// A video is playing
var videoTitle = event.target.getIframe().dataset.title;
$salespanel.push(["set", "activity:customActivity", "Video", "Played a YouTube video: " + videoTitle]);
}
}
</script>
Please let us know if you need assistance with this.