Tracking video players typically requires developers to embed code into the video player and fire off tracking beacons triggered from an analytics platform's plug-in. Plug-ins such as Milestone (legacy) and platforms such as Heartbeat (latest) for Adobe Analytics allow clients to track video on their website. Every video implementation I've been involved with (including HTML5), requires both the developer and the technical consultant to implement custom JavaScript logic within the video player and Tag Manager respectively.
Recently, I was involved in helping a client migrate from their legacy (H) code's Milestone tracking code hosted via on-page Analytics code onto the latest analytics (AppMeasurment) library in the Launch by Adobe tag management platform. Sounds simple right? Nope, as their video player (HTML5) had a ton of JavaScript code embedded within the video player and in the analytics configuration file. After looking into our internal documentation, it was apparent that there was no easy migration path as their Milestone library was implemented along with the legacy analytics H code and isn't compatible with the newest AppMeasurment library. The other thing that was challenging is that Milestone video tracking method is no longer supported by Adobe.
This prompted me to host a HTML5 video player with NO video related JavaScipt code, I repeat NO embedded JavaScript code on my own sandbox environment and implement a basic instance of the Launch Tag management solution with AppMeasurement. After validating the approach, I asked the client to implement the same methodology on their own website and it met their requirement.
Please note that to capture video name, I updated the video ID in HTML to capture a user friendly video name that is the only piece of video related 'code' I added on the page. The other thing to keep in mind is that my approach leverages link tracking events to track video events. Below are the steps I took to track metrics such as video start, video 25%, 50%, 75%, 100% complete and dimensions such as friendly video name and others.
Inject Launch by Adobe async JS library: Adobe recommends injecting the async Launch library in the head of the page as it's faster and non-blocking.
Implement AppMeasurement code in Launch: Implement the latest AppMeasurement code in Launch which is what I did for my client. Here's a general screenshot of the extension.
Track Video Name in Launch: We create a data element to capture the video name using the video ID HTML tag where we embed a friendly name. There are other approaches to grab this from the page by writing custom code but I did this to make the migration process seamless for my client. Below is a screenshot of what the video ID looks in the HTML.
Next, we create a simple data element in Launch where our data element captures a "DOM Attribute" called "video" as shown below that is tied directly to our HTML.
Next, we create a simple data element in Launch where our data element captures a "DOM Attribute" called "video" as shown below that is tied directly to our HTML.
Create a Rule to track Video Start: Once we've setup the data element to capture the video name, we now need to setup individual rules in Launch to capture video events. The first video event we want to create is the video start event where we trigger the video event when 1% of the video has been viewed. This made sense to my client as he agreed that unless a user has viewed 1% of the video, it's not really a 'true' video start. So in the scenario, we'd choose the "Data Element Type" as "Media Time Played" triggered when 1% of the video has played. I've added a caveat at the end of the article to explain why we didn't use the "Media Play" event type.
Next, we scroll down to the "Actions' section to set our analytics variables and send a beacon for the video start event as shown below. Please note that we need to do this for each rule we'll create for tracking video events.
The next two steps show what we need to populate in the "Adobe Analytics - Set Variables" and "Adobe Analytics - Send Beacon" actions. Please note that we've defined unique analytics events for each milestone event and an eVar to capture the video name.
Next, we scroll down to the "Actions' section to set our analytics variables and send a beacon for the video start event as shown below. Please note that we need to do this for each rule we'll create for tracking video events.
The next two steps show what we need to populate in the "Adobe Analytics - Set Variables" and "Adobe Analytics - Send Beacon" actions. Please note that we've defined unique analytics events for each milestone event and an eVar to capture the video name.
Create Rules to track Video Milestones 25%, 50%, 75% Events: We now setup milestone events to track 25%, 50% and 75% complete video events which is a very common tracking requirement for videos. The screenshots below show how we set it up for 25% video complete event but the same steps need to be followed for 50% and 75% complete events where the 25% trigger needs to be replaced with 50% and 75% accordingly.
Create a Rule to capture Video Complete: The last step is to capture the video complete event that can be captured by choosing the "Media Ended" event type in the rule as shown below.
Validate the Video Events: We now test our setup by loading the video in a browser and filtering for "/b/ss" which is a filter we apply to test the Adobe Analytics image request. In the following screenshots, I've included analytics image request for video start, 25% complete and video complete events.
The very last step of the process is for us to validate the data in the Adobe Analytics UI. The following screenshot shows how the report will look like with all video events successfully setup.
The very last step of the process is for us to validate the data in the Adobe Analytics UI. The following screenshot shows how the report will look like with all video events successfully setup.
- HTML5 is typically the easiest video player to implement analytics tracking on but other players like Brigtcove, YouTube or JW Player may not work with this approach as they are not directly part of the HTML like HTML5 is and typically require additional JavaScript code embedded in the player and page. For other players, it is recommended to use the Heartbeat or traditional video tracking methods.
- My method fires the video start event when 1% of the video is completed so if a video is 10 minutes long, it may take 6 seconds to fire the start event. "Video Start" event type in Launch on the other hand, triggers a beacon every time a video is played which causes duplication of the start event.
- There are many other attributes that are associated with video that are not tracked here. Some of them are Content type, Player name, Show/Episode name/Season (TV shows) or Ad related attributes tied to a campaign.
I hope you like this post but I'd like to know if you have alternative ways by which you track video players. As always, comments and feedback is welcome.
2 comments:
Thanks for sharing this detailed walkthrough. This works for my dynamic media video tracking implementation since we don't have video analytics (heartbeat) yet and don't want to use the legacy milestones.
Thank you for the comment
Post a Comment