I’m not sure how much to post on what I’ve learned in GTM the past two weeks. Please delete this if it is too much information.
Changing the player type to JavaScript from an iframe in the settings worked perfectly. Thank you for that instruction.
A problem still exists with embedded YouTube videos, which continue to use an iframe.
On a desktop with the YouTube videos, I believe users see a thumbnail type image uploaded to the video with your plugin, if a photo has been uploaded,
and the play button generated by the plugin, so those are clickable, and GTM can access those and record the YouTube video click.
On mobile, my testing suggests that the YouTube video itself shows, and I haven’t found a clickable element there, yet.
Based on my work so far, I believe that setting up a tag in Google Tag Manager to capture clicks on videos displayed through your plugin requires three parts (and this is working on my website):
–Custom JavaScript under “Variables” to grab the right element(s).
–A trigger listening for a click on .vjs-big-play-button (the player button), .poster (the image background), or video-js#aiovg-player-1 (the clickable element on mobile).
–A tag that sends the element(s) grabbed in Step 1 to Google Analytics as an event.
I’m in the process of developing my JavaScript skills now, so I went with separating my Custom JavaScript entries into three functions rather than trying to do this with one.
User Defined Variables are at the bottom of the Variables section in GTM. I used the Custom JavaScript option, not the JavaScript Variable option.
The different Custom JavaScript functions address the fact that different video elements load from the plugin depending on whether the user is on a desktop or mobile device and looking at an uploaded video or embedded video.
The first Custom JavaScript entry grabs the SRC in videos that I have uploaded. Those are named with something I recognize, so the SRC is relevant and understandable.
function() {
var getVideoSrc = document.querySelector(‘.vjs-big-play-button’).parentNode.childNodes[0].src
return getVideoSrc;
}
I named this entry Get Player SRC.
The second Custom JavaScript entry grabs my uploaded image (using the plugin) of the YouTube videos I have embedded because the YouTube URLs (random numbers and letters) do not identify the video for me. A video title would be better.
function() {
var posterName = document.getElementById(‘aiovg-player-1’).getAttribute(‘poster’);
return posterName;
}
I named this second entry Get YouTube Video Image.
The third Custom JavaScript entry gets the SRC on a mobile device of a video I uploaded to the site. The div structure on mobile devices appears to be different, so moving up and down the DOM takes less steps.
function() {
var mobilePlayerSRC = document.getElementById(‘aiovg-player-1’).childNodes[0].getAttribute(‘SRC’);
return mobilePlayerSRC;
}
I named the third entry Get Mobile Video Player SRC.
Again, the YouTube videos on mobile have nothing for GTM to record as a click because everything is in the iframe, as far as I can tell. I have no solution yet for capturing those clicks.
Once those user-defined Custom Variables are set up, it’s time to make the trigger.
Under Triggers, create a new trigger.
I selected Click All Elements in the top area, and then Some Clicks in the middle area. For my filter, I chose Click Element and Matches CSS selector, and then I entered in the field the following:
button.vjs-big-play-button, div.vjs-poster, video-js#aiovg-player-1
The commas signify “or.”
I named the trigger Video Button Trigger.
For the Tag, which sends the info to Google Analytics, I chose the following. I selected Google Analytics: Universal Analytics for the Tag Type and Event for Track Type.
I entered Event Video Button Click in the category (you can type anything).
I chose my three potential variables in the Action section, and that looks like this (I added the pipes between them, but I might take them out):
{{Get Desktop Video Player SRC}} | {{Get YouTube Video Image}} | {{Get Mobile Video Player SRC}}
And I used for the Label section the page path. That’s selectable and looks like this: {{Page Path}}
I left Noninteraction Hit as false. I want Google to record a hit.
I entered my GA account under Google Analytics settings.
And in the Triggers area, I selected my Video Button Trigger.
I called the tag Send to GA Video Clicks, and I saved it.
I am quite sure this is not the most elegant way to do this, but it’s a start.
Also, in GTM’s Variables section, there are many video variables (duration, title, length, percent, provider) that I have not figured out how to use … yet. I have them activated. The data is not being recorded. Those may hold a better solution.
I hope this helps someone.
