Logo

Application collectors

Akamai AMP Media Player

v2.22.0 • For the Javascript Collector

The Akamai AMP Media Player Extension is a configuration option for the Javascript Collector by Datazoom that makes the following additional data points automatically collectable in real time.

Integration Instructions

Akamai Player: Plugin Integration

Datazoom provides plugins for data collection through our Beacon Services. Integrate the Akamai Player plugin into your web application with the following snippet:

<script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>

  • Insert this JS line into your HTML

  • Replace the CONFIG_ID value with collector configuration ID.

This inserts Datazoom's data collection SDK into the page.

Option 1: Activate Data Collection for an Existing Akamai Player Instance

This is the standard option for customers who only need to collect data from the video player and are not concerned with joining player events with CDN logs or sending CMCD data to a CDN.

To activate data collection for an Akamai player instance, create a Datazoom context which references the player instance with the following snippet:

datazoom_context = datazoom.createContext(player);

For example:

<html>

<head>
    <script src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=YOUR_API_KEY&&format=script&version=9.0.21"></script>
    <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>
</head>

<body>

<div class="vid-container">
    <div id="akamai_player" style="width : 40% ;height : 290px">
    </div>
</div>

<script>
    var amp_player;
    var datazoom_context;
    var config = {
        media: {
            src: "https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8",
            type: "application/x-mpegURL",
            poster: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Big.Buck.Bunny.-.Opening.Screen.png/320px-Big.Buck.Bunny.-.Opening.Screen.png",
            title: "BigBuckBunny® Product Video",
            autoplay: true,
            startTime: 0
        }
    };
    akamai.amp.AMP.create("akamai_player", config).then(
        function(player) {
            amp_player = player;
            datazoom_context = datazoom.createContext(player);
        }
    );
</script>

</body>

</html>

Option 2: Have Datazoom Create an Akamai Player with Data Collection Activated

This option is necessary if you are joining Player & CDN Log data together or want to send CMCD data to a CDN. In this option, Datazoom will handle instantiation of the player with the necessary hooks required to insert parameters like Content Session ID & Request ID in every media request the player makes.

An Akamai player instance can be created with Datazoom data collection activated, using the following snippet:

datazoom.createContextAndPlayer("akamai_player", config).then(
    function(context) {
        amp_player = context.getPlayer();
        datazoom_context = context;
    }
);

By creating a player instance through the datazoom.createContextAndPlayer() method, it enables Datazoom to collect more player information to assist QoE monitoring and distributed tracing.

For example:

<html>

<head>
    <script src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=datazoom&&format=script&version=9.0.21"></script>
    <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>
</head>

<body>

<div class="vid-container">
    <div id="akamai_player" style="width : 40% ;height : 290px">
    </div>
</div>

<script>
    var amp_player;
    var datazoom_context;
    var config = {
        media: {
            src: "https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8",
            type: "application/x-mpegURL",
            poster: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Big.Buck.Bunny.-.Opening.Screen.png/320px-Big.Buck.Bunny.-.Opening.Screen.png",
            title: "BigBuckBunny® Product Video",
            autoplay: true,
            startTime: 0
        }
    };
    datazoom.createContextAndPlayer("akamai_player", config).then(
        function(context) {
            amp_player = context.getPlayer();
            datazoom_context = context;
        }
    );
</script>

</body>

</html>

Stop Data Collection

If the data collection must be stopped for any reason, for example after the destruction of the corresponding player instance, invoke the destroy() method of the Datazoom context object as in the following example:

if (akamai_player) {
    akamai_player.destroy();
    akamai_player = null;
}

if (datazoom_context) {
    datazoom_context.destroy();
    datazoom_context = null;
}

NPM (Node Package Manager)

We have made it convenient to manage your Akamai AMP Collector integration by providing NPM (Node Package Manager) support. Please see installation details here.


Ad Frameworks Extensions

If your Javascript application has a media player with an ad framework, Datazoom’s Javascript Collector with a Akamai AMP Media Player can be extended with the following ad framework extensions.

Previous
Javascript Collector
Next
Freewheel Ad Framework