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.
The mediarithmics tracking snippet is made of two parts:
- 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.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>
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>
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>
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>
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 passThis method allow you to pass the following types of identifiers:
USER_ACCOUNT
identifierUSER_EMAIL
identifier
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}
Example :
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"
}
);
$email
is optional$compartment_token
is optional, if omitted, the datamart default compartment will be usedaddIdentifier
method is idempotent.- Identifiers of type
USER_AGENT
are not yet supported.
If invalid arguments are passed to
addIdentifier
, no error is thrown in the browser consoleThe legacy method method remains valid:
mics.addProperty("$user_account_id", "<USER_ACCOUNT_ID>" )
mics.addProperty("$comp_token", "<COMPARTMENT_TOKEN>" );
Nontheless we advise to use the new one for a better readibility of your snippet.
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.
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.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.
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
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.// 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");
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.
// 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.
// 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
// 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.
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. |
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'
}
);
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.
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.
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.
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>
Last modified 1mo ago