Website tracking

The mediarithmics JS tag is used to track the visitor's navigation on a website. It is imported in a JavaScript snippet that needs to be executed on all the pages you wish to track.

The two common ways to integrate the tag are:

Through a universal tag container like Google Tag Manager or another similar solution. The code snippet must be copied once in a new tag and the tag container service automatically inserts the code wherever it is needed.
By inserting the code snippet in a general purpose template (ex: header template for an e-shop) which is used in all the web site pages.

The code of the Visit Tracking snippet is non-blocking—it does not impact on the page rendering time. The snippet can be inserted in the <head> part of the web page.

You can use the snippet to track in real-time, what your users are doing on your website. If you want to track users from your backend, please consider using our API. If you want to import bulk events or activities, please consider using the Bulk Import feature.

Cookies used by the tag are considered as advertising cookies. You must obtain user consent before using it.

Implementing the snippet

The mediarithmics tracking snippet is made of two parts:

A technical tag which contains JavaScript code to asynchronously load the TAG in the page. This part should not be edited, except when customizing the TAG name (see below).
The configuration that you should fill according to your context (site token / event name / event properties / etc.)

Here is an example of the tracking snippet you should implement on every page.

<script type="text/javascript">
    /* YOU SHOULD NOT EDIT THIS PART */
    !function(t,e,a){"use strict";var i=t.scimhtiraidem||{};function s(t){var e=i[a]||{};i[a]=e,e[t]||(e[t]=function(){i._queue[a].push({method:t,args:Array.prototype.slice.apply(arguments)})})}t.googletag=t.googletag||{},t.googletag.cmd=t.googletag.cmd||[],t.googletag.cmd.push(function(){var e=t.localStorage.getItem("mics_sgmts"),a=JSON.parse(e),i=a||{};Object.keys(i).forEach(function(e){t.googletag.pubads().setTargeting("mics_"+e,i[e].map(String))})});var r="init call config push pushDefault addIdentifier addProperties addProperty onFinish onStart _reset".split(" ");i._queue=i._queue||{},i._names=i._names||[],i._names.push(a),i._queue[a]=i._queue[a]||[],i._startTime=(new Date).getTime(),i._snippetVersion="2.0";for(var o=0;o<r.length;o++)s(r[o]);t.scimhtiraidem=i,t[a]=i[a];var n=e.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src","https://static.mediarithmics.com/tag/2/tag.min.js"),n.setAttribute("async","true"),e.getElementsByTagName("script")[0].parentNode.appendChild(n)}(window,document,"mics");
    
    mics.init("<SITE_TOKEN>");

    // Enables client-side feeds
    mics.call("syncFeeds");
    
    /* CUSTOMIZE THE TAG CALL BELOW */
    // remove next line to customize what you track
    mics.pushDefault();
</script>

Changing the name

To implement multiple tags or customize the tag for your own needs, you can do the following. Here is an example of a tag called umbrella_corp.

<script type="text/javascript">
    /* YOU SHOULD NOT EDIT THIS PART */
    !function(t,e,a){"use strict";var i=t.scimhtiraidem||{};function s(t){var e=i[a]||{};i[a]=e,e[t]||(e[t]=function(){i._queue[a].push({method:t,args:Array.prototype.slice.apply(arguments)})})}t.googletag=t.googletag||{},t.googletag.cmd=t.googletag.cmd||[],t.googletag.cmd.push(function(){var e=t.localStorage.getItem("mics_sgmts"),a=JSON.parse(e),i=a||{};Object.keys(i).forEach(function(e){t.googletag.pubads().setTargeting("mics_"+e,i[e].map(String))})});var r="init call config push pushDefault addIdentifier addProperties addProperty onFinish onStart _reset".split(" ");i._queue=i._queue||{},i._names=i._names||[],i._names.push(a),i._queue[a]=i._queue[a]||[],i._startTime=(new Date).getTime(),i._snippetVersion="2.0";for(var o=0;o<r.length;o++)s(r[o]);t.scimhtiraidem=i,t[a]=i[a];var n=e.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src","https://static.mediarithmics.com/tag/2/tag.min.js"),n.setAttribute("async","true"),e.getElementsByTagName("script")[0].parentNode.appendChild(n)}(window,document,"umbrella_corp");
    
    umbrella_corp.init("<SITE_TOKEN>");
    
    // Enables client-side feeds
    umbrella_corp.call("syncFeeds");
    
    /* CUSTOMIZE THE TAG CALL BELOW */
    // remove next line to customize what you track
    umbrella_corp.pushDefault();
</script>

Changing the domain name

If you want to get your own domain name, to fully remove mediarithmics from your website, contact your technical support to get your own domain name.

Here is a an example of the full transparent snippet implementation.

<script type="text/javascript">
    /* YOU SHOULD NOT EDIT THIS PART */
    !function(t,e,a){"use strict";var i=t.scimhtiraidem||{};function s(t){var e=i[a]||{};i[a]=e,e[t]||(e[t]=function(){i._queue[a].push({method:t,args:Array.prototype.slice.apply(arguments)})})}t.googletag=t.googletag||{},t.googletag.cmd=t.googletag.cmd||[],t.googletag.cmd.push(function(){var e=t.localStorage.getItem("mics_sgmts"),a=JSON.parse(e),i=a||{};Object.keys(i).forEach(function(e){t.googletag.pubads().setTargeting("mics_"+e,i[e].map(String))})});var r="init call config push pushDefault addIdentifier addProperties addProperty onFinish onStart _reset".split(" ");i._queue=i._queue||{},i._names=i._names||[],i._names.push(a),i._queue[a]=i._queue[a]||[],i._startTime=(new Date).getTime(),i._snippetVersion="2.0";for(var o=0;o<r.length;o++)s(r[o]);t.scimhtiraidem=i,t[a]=i[a];var n=e.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src","https://static.mediarithmics.com/tag/2/tag.min.js"),n.setAttribute("async","true"),e.getElementsByTagName("script")[0].parentNode.appendChild(n)}(window,document,"umbrella_corp");
    
    umbrella_corp.init({ mode: "VISIT", site_token: "<SITE_TOKEN>", domain_name: "<YOUR_DOMAIN_NAME>" });
    
    // Enables client-side feeds
    umbrella_corp.call("syncFeeds");
    
    /* CUSTOMIZE THE TAG CALL BELOW */
    // remove next line to customize what you track
    umbrella_corp.pushDefault();
</script>

Pushing on events

You don't have to push data on page load. You can, for example, bind an event to a button-click.

<script type="text/javascript">
  /* YOU SHOULD NOT EDIT THIS PART */
  !function(t,e,a){"use strict";var i=t.scimhtiraidem||{};function s(t){var e=i[a]||{};i[a]=e,e[t]||(e[t]=function(){i._queue[a].push({method:t,args:Array.prototype.slice.apply(arguments)})})}t.googletag=t.googletag||{},t.googletag.cmd=t.googletag.cmd||[],t.googletag.cmd.push(function(){var e=t.localStorage.getItem("mics_sgmts"),a=JSON.parse(e),i=a||{};Object.keys(i).forEach(function(e){t.googletag.pubads().setTargeting("mics_"+e,i[e].map(String))})});var r="init call config push pushDefault addIdentifier addProperties addProperty onFinish onStart _reset".split(" ");i._queue=i._queue||{},i._names=i._names||[],i._names.push(a),i._queue[a]=i._queue[a]||[],i._startTime=(new Date).getTime(),i._snippetVersion="2.0";for(var o=0;o<r.length;o++)s(r[o]);t.scimhtiraidem=i,t[a]=i[a];var n=e.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src","https://static.mediarithmics.com/tag/2/tag.min.js"),n.setAttribute("async","true"),e.getElementsByTagName("script")[0].parentNode.appendChild(n)}(window,document,"mics");
  
  mics.init({mode: "VISIT", site_token: "<SITE_TOKEN>"});
  mics.call("syncFeeds");
  
  $(".your_button").on("click", function () {
    mics.push("click button", {
      button_type: "button1"
      // ...
    });
  });
</script>

Passing one or multiple user identifiers

If you want to pass one or multiple identifiers for your user, you can leverage the addIdentifier(type: string, identifier: object) method for each identifier you want to pass

Hereafter are the formats:

If type == "USER_ACCOUNT" then identifier object must have the following structure {$user_account_id: string}or {$user_account_id: string, $compartment_token: string}
If type == "USER_EMAIL" then identifier object must have the following structure {$email_hash: string}or {$email_hash: string, $email: string}
If type == "USER_AGENT" then identifier object must have the following structure {$user_agent_id: string}

mics.addIdentifier(
    "USER_ACCOUNT",
    {
        $user_account_id:"account 1",
        $compartment_token:"token1"
    }
);
mics.addIdentifier(
    "USER_ACCOUNT",
    {
        $user_account_id:"account 2",
        $compartment_token:"token2"
    });
);
mics.addIdentifier(
    "USER_EMAIL",
    {
        $email_hash:"email hash",
        $email:"email address"
    }
);
mics.addIdentifier(
    "USER_AGENT",
    {
        $user_agent_id:"user agent id"
    }
);

$email is optional
$compartment_token is optional, if omitted, the datamart default compartment will be used
$user_agent_id is a UserAgentId. Agent type accepted are mobile advertising id, mobile vendor id, tv advertising id, and custom id.
You should not add network device id here as they are managed from the UI. If the desired network device id is not available please contact support.

If invalid arguments are passed to addIdentifier, no error is thrown in the browser console

The legacy method will soon be removed :

mics.addProperty("$user_account_id", "<USER_ACCOUNT_ID>" )
mics.addProperty("$comp_token", "<COMPARTMENT_TOKEN>" );

We advise to use the new one as soon as possible

Sending the right events and properties

The main purpose of the job is to send the right events with the right properties. This ensures good usability of the data for the users.

NOTE: Sending too many properties creates confusion when the users need to decide which properties to query. Only send what you know is required.

Default tracking

We provide out-of-the-box tracking that will generate a $page_view event. This is the behavior if you are using our snippet as is.

mics.pushDefault();

$page_view events will be dropped when the session closes (and disappear from the monitoring timeline), so it will only be useful to test that events are correctly sent to mediarithmics.

Custom events

If you need to trigger a custom event on a particular page, you can use the mics.push function to specify an event name and an object containing the event properties.

In this example, we send the event named view my form with the property form subject set to auto trial :

mics.push("view my form", {
  "form subject": "auto trial"
});

Refer to the list of base event names and prefer using them to custom event names, as the platform will handle some automatic processing for them.

E-commerce and products events

It is recommended to implement the mediarithmics snippet at several key places, with specific event names:

Home page $home_view
Category or search results page $item_list_view
Product page $item_view
Basket page $basket_view
Transaction confirmation page $transaction_confirmed

A list of products should be associated with any event with the reserved property $items.

If you have a unique identifier for the user, don't forget to add the $user_account_id property as described in this article for an optimal tracking.

Home page

// Add the user account id if available
mics.addIdentifier(
    "USER_ACCOUNT",
    {
        $user_account_id:"<USER_ACCOUNT_ID>",
        $compartment_token:"<COMPARTMENT_TOKEN>"
    }
);

// Push the event
mics.push("$home_view");

Category or search results page

When the user views a list of products in a category page or in a search results page. Only the first 3 items in the list should be declared.

// Add the user account id if available
mics.addIdentifier(
    "USER_ACCOUNT",
    {
        $user_account_id:"<USER_ACCOUNT_ID>",
        $compartment_token:"<COMPARTMENT_TOKEN>"
    }
);

// Push the event
mics.push("$item_list_view", {
  "$items": [
    {"$id": "78798978"},
    {"$id": "444444"},
    {"$id": "78808900"}
  ]
});

The $id field corresponds to the product id.

Product page

// Add the user account id if available
mics.addIdentifier(
    "USER_ACCOUNT",
    {
        $user_account_id:"<USER_ACCOUNT_ID>",
        $compartment_token:"<COMPARTMENT_TOKEN>"
    }
);

// Push the event
mics.push("$item_view", {
  "$items": [
    { "$id": "89999999" }
  ]
});

The $id field corresponds to the product id.

Basket page

// Add the user account id if available
mics.addIdentifier(
    "USER_ACCOUNT",
    {
        $user_account_id:"<USER_ACCOUNT_ID>",
        $compartment_token:"<COMPARTMENT_TOKEN>"
    }
);

// Push the event
mics.push("$basket_view", {
  "$items" : [
    {"$id" : "78794", "$price" : 10.8,  "$qty" : 1 },
    {"$id" : "78677", "$price" : 56.99, "$qty" : 1 }
  ],
  "$currency" : "EUR"
});

The $id field corresponds to the product id.
The $price field should contain the product price without the currency
The $qty field should contain the quantity of this product in the basket
The $currency field is optional. If there is only one catalog, the catalog currency is used by default

Transaction confirmation page

// Add the user account id if available
mics.addIdentifier(
    "USER_ACCOUNT",
    {
        $user_account_id:"<USER_ACCOUNT_ID>",
        $compartment_token:"<COMPARTMENT_TOKEN>"
    }
);

// Push the event
mics.push("$transaction_confirmed", {
  "$items" : [
    {"$id" : "78794", "$price" : 10.8,  "$qty" : 1 },
    {"$id" : "78677", "$price" : 56.99, "$qty" : 1 }
  ],
  "$transaction_id" : "transact-XYZ",
  "$currency" : "EUR"
});

The $id field corresponds to the product id. It should be the same id as the one used in the product feed
The $price field should contain the product price without the currency
The $qty field should contain the quantity of this product in the basket
The $transaction_id field should contain the ID of the transaction
The $currency field is optional. If there is only one catalog, the catalog currency is used by default

You can add any custom properties available for each product in your page JavaScript. You can also use Activity Analyzers to enrich your data later using the product IDs.

User profile updates

If the user is identified, you can register updates to its profile from the JS Snippet. It is generally used in user profile pages of your site.

// Add the user account id if available
mics.addIdentifier(
    "USER_ACCOUNT",
    {
        $user_account_id:"<USER_ACCOUNT_ID>",
        $compartment_token:"<COMPARTMENT_TOKEN>"
    }
);

// Push the profile
mics.push("$set_user_profile_properties", {
  gender: "male",
  // add any other properties you whish
});

Use a special event called $set_user_profile_properties . The properties and values associated with the event will be written as key-value pairs on the UserProfile . By default, the anonymous UserProfile associated with the default compartment of the datamart will be updated. By default, the property force_replace is set to false when sending an event $set_user_profile_properties .

The following special properties are available to specify which UserProfile should be updated:

Property	Description
$set_user_profile_comp_token	(Optional) The compartment token representing the compartment in which the profile should be written. If not provided, this will be the default compartment.
$set_user_profile_user_account_id	(Optional) The user account id under which the profile should be written. If not provided, it is the anonymous profile.

Property

Description

$set_user_profile_comp_token

(Optional) The compartment token representing the compartment in which the profile should be written. If not provided, this will be the default compartment.

$set_user_profile_user_account_id

(Optional) The user account id under which the profile should be written. If not provided, it is the anonymous profile.

Example 1: Write the gender to the anonymous UserProfile of the default compartment.

umbrella_corp.push(
    '$set_user_profile_properties',
    {
        'gender': 'female'
    }
);

Example 2: Write the gender to the anonymous UserProfile of a given compartment.

umbrella_corp.push(
    '$set_user_profile_properties',
    {
        '$set_user_profile_comp_token': 'my_compartment_token',
        'gender': 'female'
    }
);

Example 3: Write the gender to the UserProfile identified by a User Account Id of a given compartment.

umbrella_corp.push(
    '$set_user_profile_properties',
    {
        '$set_user_profile_comp_token': 'my_compartment_token',
        '$set_user_profile_user_account_id': '456',
        'gender': 'female'
    }
);

Server-side configuration of the JavaScript tag

Some behaviors for the JavaScript can be set server-side, in the same way as tag managers. These configurations can be found on the related channel in Navigator settings.

Device Identification

Select the identifiers that will automatically be used by the JavaScript tag to identify devices. The possible options include:

mediarithmics third-party cookie (MUM_ID)
A first-party cookie generated for your website (INSTALLTAION_ID)

In addition, mediarithmics tag can automatically retrieve a user or device identifier from the following partners if you have previously integrated with them:

ID5
First ID

Enable this setting if you want the javascript tag to automatically consider any TCF-compliant CMP on the website before third-party cookie creation and cookie matchings.

Select if you want the javascript tag to trigger cookie matchings with Google and Xandr. For other partners, please check with your support.

By default, mediarithmics third-party cookie (vector ID) is not generated if the browser does not support matchings with Google and Xandr. Use this setting to force its generation even if these matchigns do not succeed.

JavaScript Tag API Reference

You can check the complete reference of the JS Tag tool here.

One Tag approach

A One Tag approach in web tracking refers to a method of tracking website visitors and their behavior on a website using a single tracking code. The advantage of a one tag approach is that it is relatively simple to implement and maintain, as it only requires the use of a single tracking code on the website.

It usually implies to use an activity analyzer to process the collected data on the server side.

The mediarithmics javascript tag can easily be used in a "one tag" approach by referencing the relevant variables in the browser Document Object Model.

Examples:

Here are several examples of a One Tag implementation with different tag management services.

By default, the mediarithmics tag already collects the url, the referrer, the user agent and the time. It is not necessary to provide these properties:

<script type="text/javascript">
    /* YOU SHOULD NOT EDIT THIS PART */
    !function(t,e,a){"use strict";var i=t.scimhtiraidem||{};function s(t){var e=i[a]||{};i[a]=e,e[t]||(e[t]=function(){i._queue[a].push({method:t,args:Array.prototype.slice.apply(arguments)})})}t.googletag=t.googletag||{},t.googletag.cmd=t.googletag.cmd||[],t.googletag.cmd.push(function(){var e=t.localStorage.getItem("mics_sgmts"),a=JSON.parse(e),i=a||{};Object.keys(i).forEach(function(e){t.googletag.pubads().setTargeting("mics_"+e,i[e].map(String))})});var r="init call config push pushDefault addIdentifier addProperties addProperty onFinish onStart _reset".split(" ");i._queue=i._queue||{},i._names=i._names||[],i._names.push(a),i._queue[a]=i._queue[a]||[],i._startTime=(new Date).getTime(),i._snippetVersion="2.0";for(var o=0;o<r.length;o++)s(r[o]);t.scimhtiraidem=i,t[a]=i[a];var n=e.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src","https://static.mediarithmics.com/tag/2/tag.min.js"),n.setAttribute("async","true"),e.getElementsByTagName("script")[0].parentNode.appendChild(n)}(window,document,"mics");
    
mics.init("<SITE_TOKEN>")
mics.push("hit", {})

</script>

For Google Tag Manager, it is possible to collect all the relevant properties in the data layer:

<script type="text/javascript">
    /* YOU SHOULD NOT EDIT THIS PART */
    !function(t,e,a){"use strict";var i=t.scimhtiraidem||{};function s(t){var e=i[a]||{};i[a]=e,e[t]||(e[t]=function(){i._queue[a].push({method:t,args:Array.prototype.slice.apply(arguments)})})}t.googletag=t.googletag||{},t.googletag.cmd=t.googletag.cmd||[],t.googletag.cmd.push(function(){var e=t.localStorage.getItem("mics_sgmts"),a=JSON.parse(e),i=a||{};Object.keys(i).forEach(function(e){t.googletag.pubads().setTargeting("mics_"+e,i[e].map(String))})});var r="init call config push pushDefault addIdentifier addProperties addProperty onFinish onStart _reset".split(" ");i._queue=i._queue||{},i._names=i._names||[],i._names.push(a),i._queue[a]=i._queue[a]||[],i._startTime=(new Date).getTime(),i._snippetVersion="2.0";for(var o=0;o<r.length;o++)s(r[o]);t.scimhtiraidem=i,t[a]=i[a];var n=e.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src","https://static.mediarithmics.com/tag/2/tag.min.js"),n.setAttribute("async","true"),e.getElementsByTagName("script")[0].parentNode.appendChild(n)}(window,document,"mics");
    
    function micsGetAllProperties() {
        var data={};
        if (Object.keys(dataLayer).length > 0) {
            dataLayer.forEach((item, index) => {
                Object.keys(item).forEach( key => {
                    if (isNaN(key) && key!="event" && !key.startsWith("gtm")) {
                        data[key] = item[key];
                    }
                })
            }) 
        }
        return data;
    };

mics.init("<SITE_TOKEN>")
mics.push("hit", { "data": micsGetAllProperties()})

</script>

For Commanders Act, all the properties are stored in the tc_vars variable:

<script type="text/javascript">
    /* YOU SHOULD NOT EDIT THIS PART */
    !function(t,e,a){"use strict";var i=t.scimhtiraidem||{};function s(t){var e=i[a]||{};i[a]=e,e[t]||(e[t]=function(){i._queue[a].push({method:t,args:Array.prototype.slice.apply(arguments)})})}t.googletag=t.googletag||{},t.googletag.cmd=t.googletag.cmd||[],t.googletag.cmd.push(function(){var e=t.localStorage.getItem("mics_sgmts"),a=JSON.parse(e),i=a||{};Object.keys(i).forEach(function(e){t.googletag.pubads().setTargeting("mics_"+e,i[e].map(String))})});var r="init call config push pushDefault addIdentifier addProperties addProperty onFinish onStart _reset".split(" ");i._queue=i._queue||{},i._names=i._names||[],i._names.push(a),i._queue[a]=i._queue[a]||[],i._startTime=(new Date).getTime(),i._snippetVersion="2.0";for(var o=0;o<r.length;o++)s(r[o]);t.scimhtiraidem=i,t[a]=i[a];var n=e.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src","https://static.mediarithmics.com/tag/2/tag.min.js"),n.setAttribute("async","true"),e.getElementsByTagName("script")[0].parentNode.appendChild(n)}(window,document,"mics");
    
mics.init("<SITE_TOKEN>")
mics.push("hit", { "data": tc_vars})

</script>

PreviousReal time user tracking NextMobile apps tracking

Last updated 3 months ago