Tracking Video Plays from a Weebly Site in Google Analytics
I teach Digital Marketing courses at the University of Colorado Boulder. In one of the course assignments, students create some web content and drive traffic to it. Many students build their sites in Weebly.
I use this site to help them troubleshoot Weebly features and Google Analytics integrations.
Below this line, a YouTube video plays. I used a Weebly "Embed Code" widget and then edited the custom HTML by clicking on the widget in the editor. The custom HTML plays the video and allows us to track the play in Google Analytics. I've pasted the code in purple below the video.
I use this site to help them troubleshoot Weebly features and Google Analytics integrations.
Below this line, a YouTube video plays. I used a Weebly "Embed Code" widget and then edited the custom HTML by clicking on the widget in the editor. The custom HTML plays the video and allows us to track the play in Google Analytics. I've pasted the code in purple below the video.
Here is the HMTL + javascript code that loads, plays, and sets Google Analytics fields to track the video. I got it from https://developers.google.com/youtube/iframe_api_reference.
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. 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);
// 3. This function creates an <iframe> (and YouTube player) after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'b_j2CNWkd_c', //This is where you would put in the YouTube ID of the video you want to play
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
// event.target.playVideo(); //Remove comment for video to play automatically when the page loads
}
// 5. The API calls this function when the player's state changes.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
ga('send', {
hitType: 'event', //These are settings that are tracked in Google Analytics' goals
eventCategory: 'Videos',
eventAction: 'play',
eventLabel: 'LK-weebly-video-event-test',
eventValue: 1
});
}
}
function stopVideo() {
player.stopVideo();
}
</script>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. 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);
// 3. This function creates an <iframe> (and YouTube player) after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'b_j2CNWkd_c', //This is where you would put in the YouTube ID of the video you want to play
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
// event.target.playVideo(); //Remove comment for video to play automatically when the page loads
}
// 5. The API calls this function when the player's state changes.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
ga('send', {
hitType: 'event', //These are settings that are tracked in Google Analytics' goals
eventCategory: 'Videos',
eventAction: 'play',
eventLabel: 'LK-weebly-video-event-test',
eventValue: 1
});
}
}
function stopVideo() {
player.stopVideo();
}
</script>