This plugin helps you to measure HTML5 media on your website tagged with AT Internet SmartTag JS from version 5.20.0
It enables automatic detection and AV Insights tagging of interactions on tags such as AUDIO and VIDEO.
- Plugin for AT Internet SmartTag JS from version 5.20.0
- Download our main JavaScript SDK with this plugin (script "src/at-js-smarttag-avinsights-html5.js") and install it on your website.
- Check out the developers documentation for an overview of the AV Insights feature and code examples.
First of all, you must download our JavaScript SDK from Tag Composer.
Tag Composer allows you to configure your SDK:
- Set up your tagging perimeter/scope (site, domain used to write cookies, etc.).
- Select desired features via configurable plugins. AV Insights 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.
The initialisation of the tracker is done by instantiating a new object: var tag = window.ATInternet.Tracker.Tag();.
The initialisation of the plugin is done by passing this object as parameter: window.ATInternet.HTMLMediaElement.init(tag);.
<!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-js-smarttag-avinsights-html5.js"></script>
</head>
<body>
<script type="text/javascript">
// Init Tracker
var tag = new window.ATInternet.Tracker.Tag();
// Init Plugin
window.ATInternet.HTMLMediaElement.init(tag);
// Your other tags
</script>
</body>
</html>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 () {
var _callback = function () {
// Init Tracker
window.tag = new window.ATInternet.Tracker.Tag();
// Init Plugin
window.ATInternet.HTMLMediaElement.init(window.tag);
// Your other tags
};
// This code loads the plugin code to track media and call the '_callback' function after loading.
window.ATInternet.Utils.loadScript({url: 'http://www.site.com/at-smarttag-html5.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>The different media (audio and video tags) present on the page are added to the Tracker and then, information about the user interaction are sent. In order to collect the data, you need to set some media properties as HTML attributes, as follows:
- data-at_av_player : // string - Player ID
- data-at_av_player_version : // string - Player version
- data-at_av_player_position : // string - Player position
- data-at_av_content : // string - Content title
- data-at_av_content_id : // string - Content ID
- data-at_av_content_type : // string - Content type ("Audio", "Video", "Gaming, "...)
- data-at_av_content_duration : // string - Content duration in milliseconds
- data-at_av_content_version : // string - Content version ("Full", "Part 1", ...)
- data-at_av_content_genre : // string - Content genre ("['News','Lifestyle']", "['Entertainment']", "['Kids']", ...)
- data-at_av_content_linked : // string - Linked content
- data-at_av_content_duration_range : // string - Content duration range in milliseconds ("0-10000", ...)
- data-at_av_broadcasting_type : // string - Broadcasting type ("Live", "On Demand")
- data-at_av_ad_type : // string - Ad type ("Pre-Roll", "Mid-Roll", "Post-Roll")
- data-at_av_publication_date : // string - Content publication date (UTC in seconds)
- data-at_av_show : // string - Show name
- data-at_v_show_season : // string - Show season
- data-at_av_episode_id : // string - Episode number
- data-at_av_episode : // string - Episode Name
- data-at_av_channel : // string - Channel
- data-at_av_author : // string - Author
- data-at_av_broadcaster : // string - Name of the entity broadcasting the content
- data-at_av_auto_mode : // string - Auto play mode ("true", "false")
- data-at_av_heartbeat : // string - Refresh period in seconds
Example :
<video id="player1" width="400" height="222" autoplay controls
data-at_av_player="HTML5_VIDEO"
data-at_av_player_version="1"
data-at_av_player_position="bottom"
data-at_av_content="Unlock your data's full potential with AT Internet"
data-at_av_content_id="7HkiSm2YJ1c"
data-at_av_content_type="Video"
data-at_av_content_duration="84000"
data-at_av_content_version="Full"
data-at_av_content_genre="['Analytics']"
data-at_av_content_linked=""
data-at_av_content_duration_range="80000-90000"
data-at_av_broadcasting_type="On Demand"
data-at_av_ad_type=""
data-at_av_publication_date="1577865600"
data-at_av_show=""
data-at_av_show_season=""
data-at_av_episode_id="1"
data-at_av_episode="Digital"
data-at_av_channel="MyChannel"
data-at_av_author="AT Internet"
data-at_av_broadcaster="AT Internet"
data-at_av_auto_mode="false"
data-at_av_heartbeat="5"
preload="auto"
>
<source src="videoplayback.mp4" type="video/mp4"/>
</video>You can declare steps for heartbeat management. Ex: data-at_av_heartbeat='{"0":5,"1":10}' // Valid JSON string
<!-- 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-js-smarttag-avinsights-html5.js"></script>
<!-- 3. This code adds a video tag with AV Insights properties. -->
<video id="player1" width="400" height="222" autoplay controls
data-at_av_player="HTML5_VIDEO"
data-at_av_player_version="1"
data-at_av_player_position="bottom"
data-at_av_content="Unlock your data's full potential with AT Internet"
data-at_av_content_id="7HkiSm2YJ1c"
data-at_av_content_type="Video"
data-at_av_content_duration="84000"
data-at_av_content_version="Full"
data-at_av_content_genre="['Analytics']"
data-at_av_content_linked=""
data-at_av_content_duration_range="80000-90000"
data-at_av_broadcasting_type="On Demand"
data-at_av_ad_type=""
data-at_av_publication_date="1577865600"
data-at_av_show=""
data-at_av_show_season=""
data-at_av_episode_id="1"
data-at_av_episode="Digital"
data-at_av_channel="MyChannel"
data-at_av_author="AT Internet"
data-at_av_broadcaster="AT Internet"
data-at_av_auto_mode="false"
data-at_av_heartbeat='{"0":5,"1":10}'
preload="auto"
>
<source src="http://www.site.com/videoplayback.mp4" type="video/mp4"/>
</video>// 5. Tracker initialisation
var tag = new window.ATInternet.Tracker.Tag();
// 6. Plugin initialisation.
window.ATInternet.HTMLMediaElement.init(tag);
// 7. Add your eventual other tags.
tag.page.set({name: 'homePage'});
tag.dispatch();You may manage a playlist by detecting the end of playback of a content and overloading its AV Insights properties.
window.onload = function () {
var myVideo = document.getElementById('player1');
myVideo.addEventListener('ended', function () {
if (myVideo.src === "http://www.site.com/videoplayback.mp4") {
myVideo.src = "http://www.site.com/videoplayback2.mp4";
myVideo.dataset.at_av_content_id = "ZASWCwRN";
// ...
myVideo.play();
}
});
}MIT