Tracking Vimeo Videos in iFrames with Adobe Launch

Videos are the most engaging form of content. In my opinion, Video views are one of the truest parameters of User Engagement. The user today is quite distracted. Having a one-minute long video on-site explaining the feature of the product may boost sales by 20%. A video may be the only thing that will stop your reader from heading to YouTube. Or maybe, the user will come back again to watch another video.

From a marketing perspective, we can target the user who watched a specific video on our site.

Tracking video interaction helps us understanding user intentions and maximizing user engagement.

Vimeo is one of the world's leading professional video platform. Many sites use Vimeo as the video delivery platform because it allows a very high degree of customization not found on competing sites.

This article will try to provide steps to track Vimeo Videos in iFrames with Adobe Launch.

Step 1: Insert the Vimeo Player API

The Vimeo Player API allows you to interact with and control an embedded Vimeo Player Installation. If possible, this JS library should be placed on the site by the dev team.

Create Rule in Launch to insert the Vimeo Player API js file. The Rule Configurations:

Firing Event: Library Loaded (Page Top)

Action Type: Custom Code of Core Extension. Choose HTML as the code language.

Add the following snippet

<script src="https://player.vimeo.com/api/player.js"></script>

This step will allow us to use all the methods and events provided by Vimeo Player API. The API is quite straightforward, and the documentation is quite user-friendly. The documentation is available at the following links:

https://developer.vimeo.com/player/sdk/basics

https://github.com/vimeo/player.js

Step 2: Create a helper rule to detect the progress of the video

Create a helper rule in Launch to insert Direct Call Events based on the video duration.

Rule Configuration

Firing Event: Core - Window Loaded

Action Type: Custom Code of Core Extension. Choose JavaScript as the code language.

Add the following snippet

var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
var cent, counter = 1, retVal;


player.on('timeupdate', function(data) {
    cent = data.percent * 100; 
    if (0.04 <= data.seconds <= 0.07) {
        _satellite.track("video_start");
    }
    if (Math.floor(cent) === 50 && counter === 1) {
        _satellite.track("video_half");
        counter ++;
        retVal = true;
    }
    if (data.seconds === data.duration) {
        _satellite.track("video_end");
        counter = 1;
    }
});

We can observe the rules firing in Dev Console after publishing the changes.

Step 3: Create the rules to collect the video data based on the Direct Call Events

Finally, we need to create the Rules that will fire based on the Direct Call Event passed by the helper rule.

Once the rules are published, we can observe the rules firing based on the Direct Call Events passed from the helper Rule in the Dev Console.

The following articles helped me a lot in writing this article.