Skip to content
This plugin allows you to measure YouTube players on your website tagged with AT Internet JavaScript SmartTag trackers from version 5.2.3.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
closure_compiler
src
tests/js/unit
.gitignore
Gruntfile.js
LICENSE
README.md
YouTube.manifest.json
karma-coverage.conf.js
karma.conf.js
package.json

README.md

YouTube for AT Internet JavaScript SmartTag

This YouTube plugin allows you to measure YouTube players on your website tagged with AT Internet JavaScript SmartTag trackers from version 5.2.3. The plugin offers helpers enabling the quick implementation of YouTube players tracking.

Content

Get started

  • Download our main library (smarttag.js) with this plugin (at-smarttag-youtube.js) and install it on your website.
  • Check out the documentation page for an overview of the SmartTag functionalities and code examples.

Foreword

First of all, you must download our JavaScript library from Tag Composer.

Tag Composer allows you to configure your SmartTag:

  • Set up your tagging perimeter/scope (site, domain used to write cookies, etc.).
  • Select desired features via configurable plugins. Rich Media plugin is mandatory.

Once the library is set up, you can download it and insert it with this plugin into the source code of the HTML page to be tagged.

Standard tag

Tracker initialisation is done via the instantiation of a new ATInternet.Tracker.Tag object:

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title>My Page</title>
    <script type="text/javascript" src="http://www.site.com/smarttag.js"></script>
    <script type="text/javascript" src="http://www.site.com/at-smarttag-youtube.js"></script>
  </head>
  <body>
    <script type="text/javascript">            
      var tag = new ATInternet.Tracker.Tag();
      // your tag
    </script>
    ...
  </body>
</html>

Asynchronous tag

You can load our JavaScript library asynchronously. However, this requires an adaptation in your tagging. Check out the Asynchronous tag for an overview of the functionality .

<script type="text/javascript">
window.ATInternet = {
    onTrackerLoad:function(){
        window.tag = new window.ATInternet.Tracker.Tag();
        var _callback = function () {
            // your tag
        };
        // This code loads the plugin code to track media and call the '_callback' function after loading.
        ATInternet.Utils.loadScript({url: 'http://www.site.com/at-smarttag-youtube.js'}, _callback);
    }
};
(function(){      
    var at=document.createElement('script');
    at.type='text/javascript';   
    at.async=true;    
    at.src='http://www.site.com/smarttag.js';
    (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]||document.getElementsByTagName('script')[0].parentNode).insertBefore(at,null);   
})();
</script>

Tagging

The different media present on the page are added to the Tracker, then user interaction information is sent. In order to track data, you have to define some media properties as objects when YouTube players are ready as follows :

  • id : ID of the media ; mandatory.
  • mediaType : Content type (“video”, “audio” or “vpost” for post-roll video measurement) ; mandatory.
  • playerId : Player ID (to be added when using several players).
  • mediaLevel2 : Level 2 site in which the content is located.
  • mediaLabel : Name/label of content (use “::” if needed) or of a post-roll ad (do not use “::”) ; mandatory.
  • previousMedia : Name/label of content linked to a post-roll ad; mandatory when using “vpost” type.
  • refreshDuration : Refresh duration period (optional in seconds, but necessary for calculating detailed durations).
  • duration : Total duration of content in seconds (leave empty if L= “Live”). The duration must be inferior to 86400 ; mandatory when using a “clip”-type broadcast.
  • isEmbedded : On an external website ? (“true” or “false”)
  • broadcastMode : Broadcast (“live” or “clip”).
  • webdomain : URL in cases of external placements.

Example :

var media = {
    'id': 'WlsnrBJk0HA',
    'mediaType': 'video',
    'playerId': 1,
    'mediaLevel2': '2',
    'mediaLabel': 'AT Internet - A Unique Digital analytics company',
    'previousMedia': '',
    'refreshDuration': 5,
    'duration': 89,
    'isEmbedded': false,
    'broadcastMode': 'clip',
    'webdomain': ''
};

Tagging with Flash YouTube player

<!-- 1. This code loads the main AT Internet library. -->
<script type="text/javascript" src="http://www.site.com/smarttag.js"></script>

<!-- 2. This code loads the plugin code to track media. -->
<script type="text/javascript" src="http://www.site.com/at-smarttag-youtube.js"></script>

<!-- 3. This code loads the Flash Player API code synchronously. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

<!-- 4. The <object> (and video player) will replace this <div> tag. -->
<div id="ytapiplayer1">
    You need Flash player 8+ and JavaScript enabled to view this video.
</div>
// 5. Tracker initialisation
var tag = new ATInternet.Tracker.Tag();

// 6. This function creates an <object> (and YouTube player)
//    after the API code downloads.
var params = {allowScriptAccess: 'always'};
var atts = {id: 'myytplayer1'};
swfobject.embedSWF('http://www.youtube.com/v/WlsnrBJk0HA?version=3&enablejsapi=1&playerapiid=myytplayer1',
    'ytapiplayer1', '425', '356', '8', null, null, params, atts);

// 7. This function initializes Rich Media measurement
//    when players are ready.
function onYouTubePlayerReady(playerId) {
    // Get player object
    var player = tag.youTube.getFlashPlayer(playerId);
    if (player) {
        var mediaList = [];
        if (playerId === 'myytplayer1') {
            var media = {
                'id': 'WlsnrBJk0HA',
                'mediaType': 'video',
                'playerId': 1,
                'mediaLevel2': '2',
                'mediaLabel': 'AT Internet - A Unique Digital analytics company',
                'previousMedia': '',
                'refreshDuration': 5,
                'duration': 89,
                'isEmbedded': false,
                'broadcastMode': 'clip',
                'webdomain': ''
            };
            mediaList.push(media);
        }
        if (mediaList.length > 0) {
            // Add media properties to player mediaList
            player.mediaList = mediaList;
            // Call init method to launch process
            tag.youTube.init(player);
        }
    }
}

Tagging with iFrame YouTube player

<!-- 1. This code loads the main AT Internet library. -->
<script type="text/javascript" src="http://www.site.com/smarttag.js"></script>

<!-- 2. This code loads the plugin code to track media. -->
<script type="text/javascript" src="http://www.site.com/at-smarttag-youtube.js"></script>

<!-- 3. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
// 4. Tracker initialisation
var tag = new ATInternet.Tracker.Tag();

// 5. This code loads the IFrame Player API code asynchronously.
var script = document.createElement('script');
script.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(script, firstScriptTag);

// 6. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        events: {
            'onReady': onPlayerReady
        }
    });
}

// 7. This function initializes Rich Media measurement
//    when players are ready.
function onPlayerReady(event) {
    // Get player object
    var player = event.target;
    if (player) {
        var media1 = {
            'id': 'xijt_1qlHGU',
            'mediaType': 'audio',
            'playerId': 1,
            'mediaLevel2': '2',
            'mediaLabel': 'Passez à l\'Agile Analytics - AT Internet',
            'previousMedia': '',
            'refreshDuration': 5,
            'duration': 3052,
            'isEmbedded': false,
            'broadcastMode': 'clip',
            'webdomain': ''
        };
        var media2 = {
            'id': 'WlsnrBJk0HA',
            'mediaType': 'video',
            'playerId': 1,
            'mediaLevel2': '2',
            'mediaLabel': 'AT Internet - A Unique Digital analytics company',
            'previousMedia': '',
            'refreshDuration': 5,
            'duration': 89,
            'isEmbedded': false,
            'broadcastMode': 'clip',
            'webdomain': ''
        };
        var media3 = {
            'id': '0tjRknu0RRA',
            'mediaType': 'video',
            'playerId': 1,
            'mediaLevel2': '2',
            'mediaLabel': 'Meet AT Internet\'s Analytics Suite',
            'previousMedia': '',
            'refreshDuration': 5,
            'duration': 135,
            'isEmbedded': false,
            'broadcastMode': 'clip',
            'webdomain': ''
        };
        player.loadPlaylist(['WlsnrBJk0HA', 'xijt_1qlHGU', '0tjRknu0RRA'], 0, 0, 'small');
        player.setShuffle(true);
        var mediaList = [];
        // Add media properties to player mediaList
        mediaList.push(media1, media2, media3);
        player.mediaList = mediaList;
        // Call init method to launch process
        tag.youTube.init(player);
    }
}

Tagging with asynchronous tag and iFrame YouTube player

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
// 2. Declare the ATInternet callback 
window.ATInternet = {
    onTrackerLoad: function () {
        // Tracker initialisation
        window.tag = new window.ATInternet.Tracker.Tag();
        // This function loads the IFrame Player API code asynchronously.
        var _callback = function () {
            var script = document.createElement('script');
            script.src = 'https://www.youtube.com/iframe_api';
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
        };
        // This code loads the plugin code to track media and call the '_callback' function after loading.
        ATInternet.Utils.loadScript({url: 'http://www.site.com/at-smarttag-youtube.js'}, _callback);
    }
};

// 3. This code loads the main AT Internet library.
(function () {
    var at = document.createElement('script');
    at.type = 'text/javascript';
    at.async = true;
    at.src = 'http://www.site.com/smarttag.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] || document.getElementsByTagName('script')[0].parentNode).insertBefore(at, null);
})();

// 4. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        events: {
            'onReady': onPlayerReady
        }
    });
}

// 5. This function initializes Rich Media measurement
//    when players are ready.
function onPlayerReady(event) {
    // Get player object
    var player = event.target;
    if (player) {
        var media1 = {
            'id': 'xijt_1qlHGU',
            'mediaType': 'audio',
            'playerId': 1,
            'mediaLevel2': '2',
            'mediaLabel': 'Passez à l\'Agile Analytics - AT Internet',
            'previousMedia': '',
            'refreshDuration': 5,
            'duration': 3052,
            'isEmbedded': false,
            'broadcastMode': 'clip',
            'webdomain': ''
        };
        var media2 = {
            'id': 'WlsnrBJk0HA',
            'mediaType': 'video',
            'playerId': 1,
            'mediaLevel2': '2',
            'mediaLabel': 'AT Internet - A Unique Digital analytics company',
            'previousMedia': '',
            'refreshDuration': 5,
            'duration': 89,
            'isEmbedded': false,
            'broadcastMode': 'clip',
            'webdomain': ''
        };
        var media3 = {
            'id': '0tjRknu0RRA',
            'mediaType': 'video',
            'playerId': 1,
            'mediaLevel2': '2',
            'mediaLabel': 'Meet AT Internet\'s Analytics Suite',
            'previousMedia': '',
            'refreshDuration': 5,
            'duration': 135,
            'isEmbedded': false,
            'broadcastMode': 'clip',
            'webdomain': ''
        };
        player.loadPlaylist(['WlsnrBJk0HA', 'xijt_1qlHGU', '0tjRknu0RRA'], 0, 0, 'small');
        player.setShuffle(true);
        var mediaList = [];
        // Add media properties to player mediaList
        mediaList.push(media1, media2, media3);
        player.mediaList = mediaList;
        // Call init method to launch process
        tag.youTube.init(player);
    }
}

License

MIT

You can’t perform that action at this time.