Tutorial 1: basic implementation

This tutorial guides you through the implementation of the Vimeo Playback extension in your AEP Tags property. It can be used with most Vimeo videos in your website.

• The Vimeo videos are embedded in the web page's HTML code, so that the browser loads them together with the web page.
• The Vimeo videos are embedded using Vimeo's default embedding code with an <iframe>.
• The Vimeo videos' playback behaviour are not controlled by any script that was developed for your website.

At the end of this tutorial, you will have 2 Rules and 5 Data Elements to track the playback behaviour of your Vimeo videos.

Setup

Before continuing, ensure that you have installed the Vimeo Playback extension in your Tags property.

Don't worry about the version number. You should use the latest version available in AEP Tags. All of the steps below can still be followed for a successful implementation.

Data Elements

Vimeo player state

This Data Element returns the player's state of the Vimeo video that triggered the playback event.

1. Create a Data Element with the name: "Vimeo player state".
   • Extension: Vimeo Playback
   • Data Element Type: Player State
   • Enable Default Value: not selected
   • Force lowercase value: not selected
   • Clean text: selected
   • Storage Duration: None
2. Save the Data Element.

Vimeo video current time

This Data Element returns the current playing time (in seconds) of the Vimeo video that triggered the playback event.

1. Create a Data Element with the name: "Vimeo video current time".
   • Extension: Vimeo Playback
   • Data Element Type: Video Current Time
   • Enable Default Value: not selected
   • Force lowercase value: not selected
   • Clean text: not selected
   • Storage Duration: None
2. Save the Data Element.

Vimeo video duration

This Data Element returns the duration (in seconds) of the Vimeo video that triggered the playback event.

1. Create a Data Element with the name: "Vimeo video duration".
   • Extension: Vimeo Playback
   • Data Element Type: Video Duration
   • Enable Default Value: not selected
   • Force lowercase value: not selected
   • Clean text: not selected
   • Storage Duration: None
2. Save the Data Element.

Vimeo video milestone

This Data Element returns the milestone that has just been played of the Vimeo video that triggered the playback event.

1. Create a Data Element with the name: "Vimeo video milestone".
   • Extension: Vimeo Playback
   • Data Element Type: Video Milestone
   • Enable Default Value: not selected
   • Force lowercase value: not selected
   • Clean text: not selected
   • Storage Duration: None
2. Save the Data Element.

Vimeo video URL

This Data Element returns the URL of the Vimeo video that triggered the playback event.

1. Create a Data Element with the name: "Vimeo video URL".
   • Extension: Vimeo Playback
   • Data Element Type: Video URL
   • Enable Default Value: not selected
   • Force lowercase value: not selected
   • Clean text: selected
   • Storage Duration: None
2. Save the Data Element.

Rules

Enable video tracking

This Rule prepares your Vimeo videos' playback behaviour to be tracked by the Vimeo Playback extension properly. Without this Rule, no tracking would occur at all, because the extension would not be aware of your videos.

1. Create a Rule with the name "Vimeo Playback: Enable video tracking".
2. Add an Event:
   • Extension: Core
   • Event Type: DOM Ready
3. Add an Action:
   • Extension: Vimeo Playback
   • Action Type: Enable video playback tracking
   • Action Configuration settings:
     • Use this extension with: any player
     • Load Vimeo Player SDK script if it hasn't been loaded yet: selected
4. Save the Rule.

Track playback events

This Rule is triggered when any of the following Vimeo video playback events occur:

• Video started playing.
• Video playback was paused.
• Video resumed playing after being paused.
• Video finished playing.
• Video restarted playing.
• Video playback passed any of these milestones: 25%, 50%, 75% of the video's duration.

When these events occur, the Vimeo video's URL, player state, current time and duration are logged to the browser's console.

1. Create a Rule with the name "Vimeo Playback: Track playback events".
2. Add the first Event:
   • Extension: Vimeo Playback
   • Event Type: Video Playing
   • Event Configuration settings:
     • If the video has not been started, track it as video started: selected
     • If the video was paused previously, track it as video resumed: selected
     • If the video has ended, track it as video replayed: selected
     • Do not track this event except for the above selected options: selected
3. Add the second Event:
   • Extension: Vimeo Playback
   • Event Type: Video Paused
4. Add the third Event:
   • Extension: Vimeo Playback
   • Event Type: Video Ended
5. Add the fourth Event:
   • Extension: Vimeo Playback
   • Event Type: Video Milestone
   • Event Configuration settings:
     • At fixed thresholds of: 25, 50, 75 per cent
6. Add an Action:
   • Extension: Core
   • Action Type: Custom Code
   • Name: Log Vimeo video playback
   • Action Configuration settings:
     • Language: JavaScript
     • Execute globally: not selected
     • Edit Code:

     console.group(`Vimeo video playback event detected: ${_satellite.getVar('Vimeo player state', event)}`);
     console.log(`Video URL: ${_satellite.getVar('Vimeo video URL', event)}`);
     console.log(`Video current time: ${_satellite.getVar('Vimeo video current time', event)} seconds`);
     console.log(`Video duration: ${_satellite.getVar('Vimeo video duration', event)} seconds`);
     if (_satellite.getVar('Vimeo player state', event) === 'video milestone') {
         console.log(`Video milestone: ${_satellite.getVar('Vimeo video milestone', event)}`);
     }
     console.groupEnd();

7. Save the Rule.

How it works

When the user opens a web page that embeds your Vimeo videos, then the "Enable Vimeo video tracking" Rule runs and goes through all of the videos in that page. For every video that it finds, it enables tracking on that video. This is a required step to enable the extension to detect all of the Vimeo videos that are embedded in the page.

Also, that Rule loads Vimeo's Player SDK script. This Player SDK script causes the Vimeo videos' playback behaviours to be made available to the extension. This is also a required step, so that the extension can detect the playback events from your Vimeo videos.

Then, as the user plays, pauses or finishes watching a video, that video's playback events trigger the "Track playback events" Rule to track the video's URL, current time and duration via Data Elements. That Rule also tracks the 25%, 50% and 75% milestone when the user has watched past those milestones.

This tracking works even when there are more than one Vimeo videos in the same web page. For example, let's say the user does the following in a web page:

• He plays video 1. Then, video 1's playback gets tracked.
• While video 1 is still playing, he plays video 2. Then, video 2's playback gets tracked.
• Meanwhile, video 1 passes its 25% milestone. So, video 1's 25% milestone gets tracked.
• The user pauses video 1 so that he can concentrate of video 2. Video 1's pause gets tracked.
• Finally, video 2 finishes playing. Now, video 2's completion gets tracked.

All of the above video playback tracking is accomplished with the 2 Rules and 5 Data Elements only. There is no need to have separate sets of Rules and Data Elements for each of Vimeo video. This greatly simplifies your implementation to track Vimeo videos. This benefits your developers too, allowing them to focus on adding Vimeo videos to their web pages without needing to implement additional tracking code.

Try it out!

Add the 2 Rules and 5 Data Elements to a library in AEP Tags, then build that library for your Development environment.

Then, go to your development site.

1. Open a web page that contains at least one Vimeo video.
2. Also, open your browser's console.

Now, play the Vimeo video(s).

• Start playing the video.
• Pause the video.
• Resume playing the video.
• Let the video pass its 25%, 50% and 75% milestones.
• Let the video finish playing.
• Restart playing the video.

With each step, you should see the logging messages from the "Track playback events" Rule's Action being logged to your browser console.

Congratulations! You have successfully implemented Vimeo video playback tracking with the Vimeo Playback extension.