AEM Assets includes a great feature called Interactive Video which allows for videos to be easily enhanced with links. While this is primarily intended for commerce use cases, it can be used for education, promotions, or really any case where you want to easily link a video to other content. You can read more about this feature in the Documentation and watch a great video walkthrough here.
Interactive Video supports two different types of links: quickviews and hyperlinks. Quickviews are designed allow the user to see further information such as product details and even add a product to their cart without navigating away from the current page. Hyperlinks are simple hyperlinks which can either open a new browser tab or navigate in the current tab.
Links are displayed in two separate contexts. While the video is playing, they are displayed in a sidebar. These links are context-sensitive, meaning that the links associated with the current video segment are displayed.1 Upon completion of the video, all links are also displayed in a Call to Action screen.
In this post, I’ll describe how to add reporting calls so that you can track how many users are clicking on these links as well as in which context (sidebar or Call to Action). For the purpose of this post, I’m using Adobe’s Analytics and Adobe Dynamic Tag Management services, but the process would be the same for any analytics/tag management solution.
You can see this code in action on this demo page.
Register Event Listeners
The first thing we have to do is register some event listeners. In the code below
s7viewers.InteractiveVideoViewer created as part of the Interactive Video embed code. As part of the initialization code for the viewer,
setHandlers() method is called with a list of event handlers. In the
initComplete handler, we can get access to two of the components within the viewer and register event listeners for user interactions. These two components
interactiveThumbnailGridView correspond to the sidebar and Call to Action end slates respectively. In this case, we use the same listener for both events
User Interaction Event Listener
The event listener (
event child object has these properties:
link- the link the user clicked on. Will either be a URL in the case of a hyperlink or a query-string style (e.g. sku=12345) collection of key/value pairs in the case of a quickview.
Note that we could have used two separate event listeners, but since the link parsing logic is the same in both cases, it made more sense to reuse the event handler and just have some conditional logic to specify the
location property based on the event type.
DTM Data Elements
In DTM, we have some Data Elements set up to extract these variables from the data layer so that they can be passed easily to Analytics. For each of the properties of the global
digitalData.event object, we have a corresponding Data Element. Since the value of this object will change during the lifespan of this page (i.e. if a user clicks on multiple images), each Data Element uses the Custom Script type.
The script for each one is simple returning the appropriate value:
DTM Direct Call Rule
Finally, we can create a DTM Direct Call Rule2 which fires the desired Analytics event when a user clicks on one of these images. We use the Data Elements created above to map to 3 separate eVars
Once all of the pieces are in place, clicking on any of the images in the sidebar or the end slate causes an Analytics call with the proper values passed as the eVars.
Depending on the size on the player and the number of links associated with the current segment, links associated with other segments may also be displayed. ↩
While a DTM Event Based Rule could be fired based on the click, the link data is not easily accessible, so a Direct Call Rule is more effective. ↩