Video module – Amazon Ads Help Center

Overview

The HTML Video module enables the ad to send video-related metrics to the server for use in reports, while using the native browser player.

Load module

Follow these steps to use the Video module.

Procedure

Before the AdKit declaration in our HTML files, you must include modules and declare them in an array variable called EBModulesToLoad .

The following example loads the Video module for use in an AAS ad.
```
<script>EBModulesToLoad = ['Video'];</script>
```
Note

Note: if you add multiple modules within the same ad, the Video one must be placed at the beginning.
Use the following code to link the HTML video element to the video module. (This example assumes videoElement is a variable that points to the HTML video element to track.)
```
var videoTrackingModule = new EBG.VideoModule(videoElement);
```

After this procedure, tracking the video is done automatically, with two exceptions:

There is only support for the full-screen API in WebKit-supported browsers (Chrome, Safari, Edge).
If you want your reports to distinguish between auto-initiated and user-initiated video, you can specify that the video was started with a user interaction by calling the .playVideo() method. Video is typically tracked as auto-initiated because the module cannot intercept clicks on the native HTML video-player controls.

Important

Important: Please note that if you are using a dynamic video element, it will be tracked automatically. You should not manually include or initialize the Video Module, as this can result in duplicate tracking of video progress and events.

Methods

videoTrackingModule.playVideo

Causes the video to start playing, allowing it to be tracked as user-initiated.

Code syntax

videoTrackingModule.playVideo(isUserInitiated);

Parameters

Name	Type	Description
isUserInitiated	Boolean	(Optional) Determines whether the video was triggered by a user interaction, such as a click. Default value is false.

videoTrackingModule.setVideoSrc

Update the video asset that is tracked by the video module.

Code syntax

videoTrackingModule.setVideoSrc(video_asset);

Parameters

Name	Type	Description
video_asset	Relative or absolute path to video asset.	Path to the video asset to be tracked.

Events

Event Name	Description and Usage (to trigger event manually)
FULLPLAY	Fired when the video has reached the end. `EB.videoInteraction(EBG.VideoInteraction.FULLPLAY, theVideo.src, isUserInitiated);`
FULLSCREEN_END	Fired when the video plays to the end while the player is in full-screen mode. `EB.videoInteraction(EBG.VideoInteraction.FULLSCREEN_END, theVideo.src, isUserInitiated);`
FULLSCREEN_MUTE	Fired when the video is muted while the player is in full-screen mode. `EB.videoInteraction(EBG.VideoInteraction.FULLSCREEN_MUTE, theVideo.src, isUserInitiated);`
FULLSCREEN_PAUSE	Fired when the video is paused while the player is in full-screen mode. `EB.videoInteraction(EBG.VideoInteraction.FULLSCREEN_PAUSE, theVideo.src, isUserInitiated);`
FULLSCREEN_START	Fired when a video is started for the first time while the player is in full-screen mode. `EB.videoInteraction(EBG.VideoInteraction.FULLSCREEN_START, theVideo.src, isUserInitiated);`
MUTE	Fired when the video is muted. `EB.videoInteraction(EBG.VideoInteraction.MUTE, theVideo.src, isUserInitiated);`
PAUSE	Fired when the video is paused. `EB.videoInteraction(EBG.VideoInteraction.PAUSE, theVideo.src, isUserInitiated);`
PERCENT_25_PLAYED	Fired when the video has reached the first quartile. `EB.videoInteraction(EBG.VideoInteraction.PERCENT_25_PLAYED, theVideo.src, isUserInitiated);`
PERCENT_50_PLAYED	Fired when the video has reached the second quartile. `EB.videoInteraction(EBG.VideoInteraction.PERCENT_50_PLAYED, theVideo.src, isUserInitiated);`
PERCENT_75_PLAYED	Fired when the video has reached the third quartile. `EB.videoInteraction(EBG.VideoInteraction.PERCENT_75_PLAYED, theVideo.src, isUserInitiated);`
REPLAY	Fired when the video is replayed after the first full play. `EB.videoInteraction(EBG.VideoInteraction.REPLAY, theVideo.src, isUserInitiated);`
SLIDER_DRAGGED	Fired when the user completed dragging the video play head to a new position. `EB.videoInteraction(EBG.VideoInteraction.SLIDER_DRAGGED, theVideo.src, isUserInitiated);`
STARTED	Fired when a video started playing for the first time. `EB.videoInteraction(EBG.VideoInteraction.STARTED, theVideo.src, isUserInitiated);`
UNMUTE	Fired when video is unmuted. `EB.videoInteraction(EBG.VideoInteraction.UNMUTE, theVideo.src, isUserInitiated);`
UNMUTED	Fired when the video is not muted alongside the video started event. `EB.videoInteraction(EBG.VideoInteraction.UNMUTED, theVideo.src, isUserInitiated);`
USER_INITIATED_VIDEO	Fired when the video is started by a user. This event is only tracked once per impression. `EB.videoInteraction(EBG.VideoInteraction.USER_INITIATED_VIDEO, theVideo.src, isUserInitiated);`

Example

The following example shows a video module, included in an ad, that is ready to record any video metrics.

Note

Note: This example is for educational purposes only. It does not contain any style or click code. Please note that you should style your elements and add a click-through according to your requirements.

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>HTML5 Video Module Example</title>
    <script>EBModulesToLoad = ['Video'];</script>
    <script type="text/javascript" src="https://secure-ds.serving-sys.com/BurstingScript/adKit/adkit.js"></script>
    <script type="text/javascript">
        var video;
        var autoPlayVideo = true;

        function checkIfAdKitReady(event) {
            adkit.onReady(initializeCreative);
        }
        function initializeCreative(event) {
            video = document.getElementById("video01");
            videoTrackingModule = new EBG.VideoModule(video);
            if (autoPlayVideo) {
                videoTrackingModule.playVideo(false);
            }
        }
        window.addEventListener("load", checkIfAdKitReady);
    </script>
</head>

<body>
    <div id="banner">
        <button id="clickBtn"></button>
        <video id="video01" muted playsinline>
            <source src="videos/video.mp4" type="video/mp4">
        </video>
    </div>
</body>
</html>

Overview

Load module

Note

Important

Methods

videoTrackingModule.playVideo

Code syntax

Parameters

videoTrackingModule.setVideoSrc

Code syntax

Parameters

Events

Example

Note

Comments