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 ad-serving cookies. You must obtain user consent before using it.

Implementing the snippet

The mediarithmics tracking snippet is made of two parts:
  1. 1.
    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).
  2. 2.
    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.
1
<script type="text/javascript">
2
/* YOU SHOULD NOT EDIT THIS PART */
3
!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");
4
5
mics.init("<SITE_TOKEN>");
6
7
// Enables client-side feeds
8
mics.call("syncFeeds");
9
10
/* CUSTOMIZE THE TAG CALL BELOW */
11
// remove next line to customize what you track
12
mics.pushDefault();
13
</script>
Copied!

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.
1
<script type="text/javascript">
2
/* YOU SHOULD NOT EDIT THIS PART */
3
!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");
4
5
umbrella_corp.init("<SITE_TOKEN>");
6
7
// Enables client-side feeds
8
umbrella_corp.call("syncFeeds");
9
10
/* CUSTOMIZE THE TAG CALL BELOW */
11
// remove next line to customize what you track
12
umbrella_corp.pushDefault();
13
</script>
Copied!

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.
1
<script type="text/javascript">
2
/* YOU SHOULD NOT EDIT THIS PART */
3
!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");
4
5
umbrella_corp.init({ mode: "VISIT", site_token: "<SITE_TOKEN>", domain_name: "<YOUR_DOMAIN_NAME>" });
6
7
// Enables client-side feeds
8
umbrella_corp.call("syncFeeds");
9
10
/* CUSTOMIZE THE TAG CALL BELOW */
11
// remove next line to customize what you track
12
umbrella_corp.pushDefault();
13
</script>
Copied!

Pushing on events

You don't have to push data on page load. You can, for example, bind an event to a button-click.
1
<script type="text/javascript">
2
/* YOU SHOULD NOT EDIT THIS PART */
3
!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");
4
5
mics.init({mode: "VISIT", site_token: "<SITE_TOKEN>"});
6
mics.call("syncFeeds");
7
8
$(".your_button").on("click", function () {
9
mics.push("click button", {
10
button_type: "button1"
11
// ...
12
});
13
});
14
</script>
Copied!

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.
1
mics.pushDefault();
Copied!
$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.

User account

If the user has a unique account identifier, you can set the property $user_account_id from user activities.
1
mics.addProperty("$user_account_id", "<USER_ACCOUNT_ID>" );
Copied!
You can also link this user account id to a specific compartment of your datamart using the $comp_token property.
1
mics.addProperty("$comp_token", "<COMPARTMENT_TOKEN>" );
Copied!
If no compartment is defined, the default one will be used.

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 :
1
mics.push("view my form", {
2
"form subject": "auto trial"
3
});
Copied!
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

1
mics.addProperty("$user_account_id", "<USER_ACCOUNT_ID>" ); // if available
2
mics.addProperty("$comp_token", "<COMPARTMENT_TOKEN>" ); // if available
3
mics.push("$home_view");
Copied!

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.
1
mics.addProperty("$user_account_id", "<USER_ACCOUNT_ID>" ); // if available
2
mics.addProperty("$comp_token", "<COMPARTMENT_TOKEN>" ); // if available
3
mics.push("$item_list_view", {
4
"$items": [
5
{"$id": "78798978"},
6
{"$id": "444444"},
7
{"$id": "78808900"}
8
]
9
});
Copied!
  • The $id field corresponds to the product id.

Product page

1
mics.addProperty("$user_account_id", "<USER_ACCOUNT_ID>" ); // if available
2
mics.addProperty("$comp_token", "<COMPARTMENT_TOKEN>" ); // if available
3
mics.push("$item_view", {
4
"$items": [
5
{ "$id": "89999999" }
6
]
7
});
Copied!
  • The $id field corresponds to the product id.

Basket page

1
mics.addProperty("$user_account_id", "<USER_ACCOUNT_ID>" ); // if available
2
mics.addProperty("$comp_token", "<COMPARTMENT_TOKEN>" ); // if available
3
mics.push("$basket_view", {
4
"$items" : [
5
{"$id" : "78794", "$price" : 10.8, "$qty" : 1 },
6
{"$id" : "78677", "$price" : 56.99, "$qty" : 1 }
7
],
8
"$currency" : "EUR"
9
});
Copied!
  • 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

1
mics.addProperty("$user_account_id", "<USER_ACCOUNT_ID>" ); // if available
2
mics.addProperty("$comp_token", "<COMPARTMENT_TOKEN>" ); // if available
3
mics.push("$transaction_confirmed", {
4
"$items" : [
5
{"$id" : "78794", "$price" : 10.8, "$qty" : 1 },
6
{"$id" : "78677", "$price" : 56.99, "$qty" : 1 }
7
],
8
"$transaction_id" : "transact-XYZ",
9
"$currency" : "EUR"
10
});
Copied!
  • 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.
1
mics.addProperty("$user_account_id", "<USER_ACCOUNT_ID>" );
2
mics.push("$set_user_profile_properties", {
3
gender: "male",
4
// add any other properties you whish
5
});
Copied!
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.
Example 1: Write the gender to the anonymous UserProfile of the default compartment.
1
umbrella_corp.push(
2
'$set_user_profile_properties',
3
{
4
'gender': 'female'
5
}
6
);
Copied!
Example 2: Write the gender to the anonymous UserProfile of a given compartment.
1
umbrella_corp.push(
2
'$set_user_profile_properties',
3
{
4
'$set_user_profile_comp_token': 'my_compartment_token',
5
'gender': 'female'
6
}
7
);
Copied!
Example 3: Write the gender to the UserProfile identified by a User Account Id of a given compartment.
1
umbrella_corp.push(
2
'$set_user_profile_properties',
3
{
4
'$set_user_profile_comp_token': 'my_compartment_token',
5
'$set_user_profile_user_account_id': '456',
6
'gender': 'female'
7
}
8
);
Copied!

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
This method allow you to pass USER_ACCOUNT identifier and USER_EMAIL identifier.
  • 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}
Example :
1
mics.addIdentifier(
2
"USER_ACCOUNT",
3
{$user_account_id:"account 1",$compartment_token:"token1"}
4
);
5
mics.addIdentifier(
6
"USER_ACCOUNT",
7
{$user_account_id:"account 2",$compartment_token:"token2"}
8
);
9
mics.addIdentifier(
10
"USER_EMAIL",
11
{$email_hash:"email hash", $email:"email address"}
12
);
Copied!
The snippet has been updated to support the addIdentifier method.
Make sure to update it on your website.
If invalid arguments are passed to addIdentifier, no error is thrown.
  • addIdentifier method is idempotent.
  • $compartment_token is optional, datamart's default compartment will be used if omitted
  • $email is optional

TAG Reference

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