Mono Tracking API

Tracking API allows you to easily set up tracking for custom events or adding any third party providers. The tracking API is included on any Mono website, mobile site, and Facebook Page.

 

Usage

By default, if reporting is enabled for a site, the tracking API is set up to use Google Analytics and the results are visible in the Reporting > Actions section when logged in to the Mono tool.

 

Adding your own tracking events

Set up tracking in the following two ways:

1. Adding two attributes to the HTML element
2. Using JavaScript

 

1. Using data-track-* attributes

In order to add custom events, one way to set up tracking is to add two attributes to the HTML element you wish to track.

• data-track-event: The first attribute is data-track-event and defines the browser event on which to trigger the event. This could be click for when a user clicks the element
• data-track-action: The second attribute is data-track-action and defines the name of the action which by default will be visible in the Reporting > Actions section when logged in to the Mono tool. An example would be: 

  <a data-track-event="click" data-track-action="link_clicked" href="#">Click here</a>
  

  Here the action link_clicked will be triggered when a user clicks on the anchor element.

Please note, that any element you wish to track using the data-track-* attributes must inserted using the HTML module. This is because the element needs to be visible in the DOM tree on DOMDocumentReady.

 

2. Using JavaScript

V3

Tracking can also be set up using JavaScript. This allows you to track dynamically generated elements, for example jQuery image slideshows or other custom features used on a site.

The tracking API is available through the _monoTracker global variable. To add tracking for a specific element the _monoTracker.addObject() method can be used. An example could be:

var myElement = document.getElementById('myElement');
_monoTracker.addObject(myElement, 'click', 'myElement_clicked');

When the DOM element with the ID of myElement is clicked, the action myElement_clicked will be recorded. The action will visible in Reporting > Actions in the Mono tool.

A tracking action can also be triggered manually using the _monoTracker.track() method. This is useful for using the tracking API in combination with for example jQuery:

$(function () {
    $('#myElement').click(function () {
        _monoTracker.track('myElement_clicked');
    });
});

 

II and V5

In II and V5 the tracking API is available through the _mtr global variable. To add tracking for a specific element the _mtr.addObject() method can be used.

* The above documentation applies to II and V5 as well, while only the global variable name is changed (from _monoTracker to _mtr ).

 

 

Adding your own provider

V3

The Mono tracking API allows you to use your own provider for tracking. To add your own provider use the _monoTracker.addTracker() method provided by the JavaScript tracking API. This method takes a function as its argument, and this function will be called for all default events and any custom events added (as described in section 2). An example looks like:

_monoTracker.addTracker(function (action) {
    alert('Triggered tracking action: ' + action);
});

On every event a alert box will show with a message telling which action was triggered.

A real world example for adding Google Analytics looks like this:

<script>
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXX-X']);
    _gaq.push(['_trackPageview']);
    _gaq.push(function () {
        _monoTracker.addTracker(function (action) {
            _gaq.push(['_trackEvent', action]);
        });
    });

    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
</script>

This automatically adds Google Analytics for all elements with tracking set up.

 

II and V5

To add your own provider in II and V5, use the _mtr.addTracker() method provided by the JavaScript tracking API.

* The above examples will work in II and II V5 by simply replacing _monoTracker with _mtr

 

API reference

HTML API

• data-track-event: data-track-event - Apply on the element you wish to track. Takes one or more events as the value. Multiple events must be separated with a space.
• data-track-action: data-track-action - Apply on the element you wish to track. The value is the name of the action to show in the Reporting > Actions section in the Mono tool.

 

JavaScript API

V3

All API options are available through the _monoTracker global variable.

• _monoTracker.addObject(element, 'event', 'action') - Adds an DOM object to be tracked. Supports one or more events by separating them with a space.
• _monoTracker.track('action') - Trigger a tracking action manually.
• _monoTracker.addTracker(function (action) { ... }) - Add a tracking provider. The method takes a function as its argument with the action as its parameter.

 

II and V5

In II and V5, all API options are available through the _mtr global variable.

• _mtr.addObject(element, 'event', 'action') - Adds an DOM object to be tracked. Supports one or more events by separating them with a space.
• _mtr.track('action') - Trigger a tracking action manually.
• _mtr.addTracker(function (action) { ... }) - Add a tracking provider. The method takes a function as its argument with the action as its parameter.

II and V5 also supports custom tracking actions for these modules: Button, Button 2, Form. The action name can be set in the module settings. The action that has been set on the module will have monouser- prepended to it.

 

List of default tracking actions

V3

• addthis_email - AddThis share over email click
• addthis_facebook - AddThis share on Facebook click
• addthis_tweet - AddThis share on Twitter click
• carousel_next - Carousel next slide click
• carousel_prev - Carousel previous slide click
• comment_submit - Comment module submit
• contact_address - Contact module address click
• contact_us - Contact form submit
• custom_form - Custom form submit
• email_link - Email link click
• facebook_comment - Facebook Comments module: Comment added
• facebook_like - Facebook Like module: User like added
• facebook_send - Facebook Send module: Message is sent
• footer_social_facebook - Footer Facebook icon click
• footer_social_googleplus - Footer Google+ icon click
• footer_social_linkedin - Footer LinkedIn icon click
• footer_social_twitter - Footer Twitter icon click
• gallery_next - Gallery next image click
• gallery_open - Gallery overlay open tap (Mobile)
• gallery_overlay_next - Gallery overlay next image click
• gallery_overlay_open - Gallery overlay opened
• gallery_overlay_prev - Gallery overlay previous image click
• gallery_prev - Gallery previous image click
• google_plusone - Google +1 module: +1 added
• phone_link - Contact module phone click
• pinterest_pinit - Pinterest module click
• spotboxwithbutton - Spot box with button click
• taptocall - Tap to call
• taptoemail - Tap/click to email
• twitter_tweet - Twitter module: Tweet posted on Twitter

 

II and V5

• custom_form - Form module submit
• custom_form - Mailchimp form module submit
• link_clicked - External link click
• email_link - Email link click
• phone_link - Phone link click
• file_download - Download link click
• map_interaction - Map Module click
• gallery_overlay_open - Gallery overlay open
• gallery_overlay_next - Gallery overlay next click
• gallery_overlay_prev - Gallery overlay prev click
• gallery_next - Gallery next click
• gallery_prev - Gallery prev click
• facebook_like - Facebook Like module: User like added
• facebook_send - Facebook Send module: Message is sent
• facebook_comment - Facebook comment
• twitter_tweet - Twitter tweet
• twitter_follow - Twitter follow
• rowgroup_next - Rowgroup next click
• rowgroup_prev - Rowgroup prev click
• directions_clicked - Get directions button clicked
• comment_send - Comment module submit
• blog_next - Blog next click
• blog_prev - Blog previous click
• catalog_next - Catalog next click
• catalog_prev - Catalog previous click
• page_share - Emailshare form module submit
• newsletter_signup - Email signup form module submit
• internal_link_clicked - Click on an internal link in the site
• social_link - Click on a link in the social media module
• video_play - Play a video in the video module

 

Dynamic call tracking number insertion- Call tracking:

V3

To measure customer conversion of a SEM campaign and a landing page, a call tracking number (CTN) can be used to tie phone calls to the specific campaign. This feature will automatically replace the phone number set in global data on the landing page with the CTN in the following modules:

• "Click to call" module
• Contact module
• Combined contact & map module
• Header
• Footer

To replace the regular phone number on the landing page with the campaign-specific CTN, the CTN needs to be included in the URL from the campaign ad (e.g. the Google adword). Make sure that your ad-link to the landing page includes the following parameter: ?mono_ctn=1212121212 Example: If the regular phone number on landingpage.com is 40404040 and you want it to be replaced by the campaign specific call tracking number 123123123 for all visitors clicking the ad-link, then the URL from the ad word campaign should look like this: Landingpage.com?mono_ctn=123123123

 

II and V5

For II and V5, the use of this feature is not confined to particular modules. All you need to ensure, is that the regular phone number used anywhere on your Mono site, is tied to global data.