Viewability

This plugin allows you to measure which elements on the page were actually seen by the browser, just by adding an attribute to your elements.

Content

JavaScript plugin for AT Internet Javascript SmartTag from version 5.3.0, with Callbacks activated.

Get started

Download our main library (smarttag.js) with this plugin (at-smarttag-viewability.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.). Use callbacks.
Select desired features via configurable plugins.

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.

Usage

The plugin determines if an element is being viewed depending on which percentage of it is displayed on the user's screen. This viewability percentage can be set at 3 levels:

Globally : in the Tracker configuration, and will be applied to all elements (see here)
At elements' level : if defined thanks to the attribute data-atview-percent (see here)
By default, if none of the two before has been defined, it will be set to 100%

When an element has been defined as viewed, the plugin will send a Publisher hit, with the following data:

Campaign: the element's ID (see here)
Creation: the percentage defined following rules above

This data will be sent only once per page view, no matter if the user scrolls up and down and displays the element multiple times.

Category: Tagging

Description

Standard tag

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

<!DOCTYPE html>

<html>

</head>

<body>

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 .

				
					
				1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

						 
<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-viewability.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>
 

					

			

Plugin configuration

You can set the global view percentage through the Tracker configuration, thanks to the property viewabilityPercent:

var config = {

site: 123456,

// ...,

viewabilityPercent: 50

};

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

Viewable elements tagging

In order to inform the plugin that an element viewability must be tracked, you need to insert an attribute data-atview-id, containing the ID/name that will be retrieved in your data. Please don’t use any special characters, this could lead to wrong measurement.

</div>

Element’s level percentage

In order to set a specific viewability percentage to an element, you can add the attribute data-atview-percent to it, containing the numeric value of the percentage.

</div>

Reviews

There are no reviews yet.

Be the first to review “Viewability”

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

List

Viewability

Content

Get started

Foreword

Usage

Description

Standard tag

Asynchronous tag

Plugin configuration

Viewable elements tagging

Element’s level percentage

Reviews