YouTube

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

JavaScript plugin for AT Internet Javascript SmartTag from version 5.2.3.

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.

Category: 3rd party tools

Description

Standard tag

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

<html>

</head>

<body>

var tag = new ATInternet.Tracker.Tag();

// your tag

</script>

...

</body>

</html></code>

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 .

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

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

// 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

// 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);

}

Reviews

There are no reviews yet.

Be the first to review “YouTube”

Version

This field can't be Empty

Compatibility

This field can't be Empty

Dependencies

This field can't be Empty

Contact

This field can't be Empty