The act of monitoring the traffic and activity of contacts can sometimes be somewhat technical and frustrating to understand. Mautic makes this monitoring simple and easy to configure.
Monitoring all traffic on a website can be done by loading a javascript file (since Mautic 1.4) or adding a tracking pixel to the website. It is important to note that traffic will not be monitored from logged-in Mautic users. To check that the JS/pixel is working, use an incognito or private browsing window or simply log-out of Mautic prior to testing.
Note that by default, Mautic will not track traffic originating from the same private network as itself, but this internal traffic can be configured to be tracked by setting the track_private_ip_ranges
configuration option to true
in app/config/local.php
and then clearing the symfony cache.
JS tracking method was implemented in Mautic 1.4 and recommended as the primary way of website tracking. To implement it,
<body/>
tag of the website you want to trackOr, copy the code below and change the URL to your Mautic instance.
Mautic sets cookies with a lifetime of 1 year. Returning visitors are identified exclusively by the cookie. If no cookie exists yet, Mautic creates a new contact and sets the cookie.
Make sure your website URL is entered in the CORS settings.
Note that if a browser is set to not accept cookies, this may result in each hit creating a new visitor.
<script>
(function(w,d,t,u,n,a,m){w['MauticTrackingObject']=n;
w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},a=d.createElement(t),
m=d.getElementsByTagName(t)[0];a.async=1;a.src=u;m.parentNode.insertBefore(a,m)
})(window,document,'script','http(s)://yourmautic.com/mtc.js','mt');
mt('send', 'pageview');
</script>
Don't forget to change the scheme (http(s)) either to http or https depending what scheme you use for your Mautic. Also, change [example.com] to the domain where your Mautic runs.
The advantage of JS tracking is that the tracking request which can take quite long time to load is loaded asynchronously so it doesn't slow down the tracked website. JS also allows to track more information automatically:
</title>
tags.mt() supports two callbacks, onload
and onerror
accepted as the fourth argument. The onload
method will be executed once the tracking pixel has been loaded. If the pixel fails for whatever reason, onerror
will be executed.
mt('send', 'pageview', {}, {
onload: function() {
redirect();
},
onerror: function() {
redirect();
}
});
If CORS is configured to allow access from the domain where the mtc.js is embedded, a cookie will be placed on the same domain with the name of mtc_id
. This cookie will have the value of the ID for the currently tracked contact but is not used to track the contact. This enables the server side software to access the contact ID, and thus providing the ability to integrate with Mautic's REST API as well.
Valid Domains for CORS are expected to include the full domain name as well as the protocol. (e.g. http://example.com). If you serve up secure and non-secure pages you should include both https://example.com as well http://example.com. All subdomains will need to be listed as well (e.g. http://example.com and http://www.example.com ), if your server allows this. If you would like to allow all subdomains, an asterisk can be used as a wildcard (e.g. http://*.example.com).
You can attach custom parameters or overwrite the automatically generated parameters to the pageview action as you could to the tracking pixel query. To do that, update the last row of the JS code above like this:
mt('send', 'pageview', {email: '[email protected]', firstname: 'John'});
This code will send all the automatic data to Mautic and adds also email and firstname. The values of those fields must be generated by your system.
The tracking code also supports Company fields. Mautic can assign a Company to your tracked Contact based on Company name. Then you have to add the company or companyname parameter to the tracking code, along with other Companies fields (companyemail, companyaddress1, companyaddress2, companyphone, companycity, companystate, companyzipcode, companycountry, companywebsite, companynumber_of_employees, companyfax, companyannual_revenue, companyindustry, companyindustry, companydescription...):
Contact tags and UTM codes can also be used.
mt('send', 'pageview', {email: '[email protected]', firstname: 'John', company: 'Mautic', companyemail: '[email protected]', companydescription: 'description of company', companywebsite: 'https://example.com', tags: 'addThisTag,-removeThisTag', utm_campaign: 'Some Campaign'});
As the JS tracking request is loaded asynchronously, you can ask JS to call a function when a request is loaded. To do that, define a onload function in options like this:
mt('send', 'pageview', {email: '[email protected]', firstname: 'John'}, {onload: function() { alert("Tracking request is loaded"); }});
It is recommended to use the tracking script with CORS properly configured instead of the tracking pixel. If that is not possible for whatever reason, the tracking pixel can be used. The tracking pixel uses third party cookies for tracking.
http://example.com/mtracking.gif
To get the most out of the tracking pixel, it is recommended that you pass information of the web request through the image URL.
Mautic currently supports page_url
, referrer
, language
, and page_title
(note that the use of url
and title
are deprecated due to conflicts with contact fields).
Currently, utm_medium
, utm_source
, utm_campaign
, utm_content
, and utm_term
are used to generate the content in a new timeline entry.
utm_campaign
will be used as the timeline entry's title.
utm_medium
values are mapped to the following Font Awesome classes:
Values | Class |
---|---|
social, socialmedia | fa-share-alt if utm_source is not available otherwise utm_source will be used as the class. For example, if utm_source is Twitter, fa-twitter will be used. |
email, newsletter | fa-envelope-o |
banner, ad | fa-bullseye |
cpc | fa-money |
location | fa-map-marker |
device | fa-tablet if utm_source is not available otherwise utm_source will be used as the class. For example, if utm_source is Mobile, fa-mobile will be used. |
All the UTM tags are available in the time entry, just by toggling the entry details button.
Please note that UTM tags are recorded only on a form submission that contains the action "Record UTM Tags".
You can also pass information specific to your Contact by setting Mautic Contact field(s) to be publicly updatable. Note that values appended to the tracking pixel should be url encoded (%20 for spaces, %40 for @, etc).
The Contact's Tags can be changed by using the tags
query parameter. Multiple Tags can be separated by comma. To remove a Tag, prefix it with a dash (minus sign).
For example, mtracking.gif?tags=ProductA,-ProductB
would add the ProductA Tag to the Contact and remove ProductB.
If you are using a CMS, the easiest way is to let one of our plugins do this for you (see below). Note that the plugins may not support all contact fields, UTM codes or contact tags.
Here are a couple code snippets that may help as well:
<img src="https://example.com/mtracking.gif?page_url=http%3a%2f%2fexample.com%2fyour-product-page&page_title=Some%20Cool%20Product&email=user%40theirdomain.com&tags=ProductA,-ProductB" style="display: none;" alt="mautic is open source marketing automation" />
$d = urlencode(base64_encode(serialize(array(
'page_url' => 'https://' . $_SERVER[HTTP_HOST] . $_SERVER['REQUEST_URI'],
'page_title' => $pageTitle, // Use your website's means of retrieving the title or manually insert it
'email' => $loggedInUsersEmail // Use your website's means of user management to retrieve the email
))));
echo '<img src="https://example.com/mtracking.gif?d=' . $d . '" style="display: none;" />';
<script>
var mauticUrl = 'https://example.com';
var src = mauticUrl + '/mtracking.gif?page_url=' + encodeURIComponent(window.location.href) + '&page_title=' + encodeURIComponent(document.title);
var img = document.createElement('img');
img.style.width = '1px';
img.style.height = '1px';
img.style.display = 'none';
img.src = src;
var body = document.getElementsByTagName('body')[0];
body.appendChild(img);
</script>
Mautic makes this even easier by providing key integrations to many existing content management systems. You can download and use any of the following plugins to automatically add that tracking pixel to your website.
These are just a few of the integrations already created by the Mautic community. More will be added in the future and developers are encouraged to submit their own integrations.
Note: It is important to note that you are not limited by these plugins and you can place the tracking pixel directly on any HTML page for website tracking.
There is a configuration section for identifying visitors by tracking URL although this is not recommended for use because it could be used to spoof tracking. If enabled, returning visitors will be identified by tracking URLs from channels (especially from emails) when no cookie exists yet.
Note: The email contact field has to be marked as a unique identifier and publicly updatable in your Mautic configuration.
When using the tracking script, Contacts are tracked with third party cookies on the Mautic instance's domain and/or the browser's local storage.
Although the script will write first party cookies to the tracked domain (expires with the session), they are NOT used for tracking. See "Local contact cookie (first party cookie)."
When a Contact visits the website for the first time, the tracking script will make a call to Mautic. Mautic will check if the mautic_device_id
cookie is set on it's domain. If it exists and if the device_id is found in Mautic's database, Mautic will recognize the request as the Contact associated with the given device.
Mautic will return the Contact ID, the device ID, and a legacy session ID (this is the same as the device ID). These value are stored in the browser's local storage (if applicable) and written to the site's domain as a first party cookie (not used for tracking).
The next time the tracking script sends a request to Mautic, it will use the device ID from the browser's local storage to identify the tracked Contact. If that cannot be found, Mautic will default to the cookies stored on it's own domain (so third party cookies) to identify the Contact.
The essence of monitoring what happens in an App is similar to monitoring what happens on a website. Mautic contains the building blocks needed for native (or pseudo-native) and HTML5-wrapper based Apps, regardless of platform.
In short, use named screen views (e.g. main_screen) in your App as your page_url field in the tracker, and the contact's email as the unique identifier, see next section for detailed instructions.
Make the email field publicly updatable, this means that a call to the tracking GIF with the variable email will get properly recognized by Mautic.
Set up a Form, which will be the access point of your Campaign (e.g. a new Contact email). Make this form as simple as you can, as you will be POST-ing to it from your App. The typical Form URL you will POST to is
https://example.com/form/submit?formId=<form_id>
You can get the ID from the Mautic URL as you view / edit the form in the Mautic interface (or in the forms tables, last column), and you can get the form fields by looking at the HTML of the 'Manual Copy' of the HTML in the forms editing page.
https://example.com/mtracking.gif?page_url=cart_screen&[email protected]
A best-in-class approach is to have a class (say 'mautic') that handles all your tracking needs. For example, this sample method call would POST to the form with ID 3 - see previous section (note: for conciseness and ubiquity, these sample lines are written in JavaScript / ECMAScript-type language, use similar call in your mobile App language of choice).
mautic.addContact("[email protected]",3)
And then, to track individual user activity in the App, this sample call would make an HTTP request to the tracker:
mautic.track("cart_screen", "[email protected]")
Which is nothing more than an HTTP request to this GET-formatted URL (as also shown in previous section):
https://example.com/mtracking.gif?page_url=cart_screen&[email protected]
Important: Make sure in your App, that the above HTTP request is using a cookie (if possible, re-use the cookie from the mautic.addcontact POST request prior) AND that you reuse this cookie from one request to the next. This is how Mautic (and other tracking software) knows that it's really the same user. If you can't do this, you may run into the (unlikely but possible) case where you have multiple contacts from the same IP address and Mautic will merge them all into a single contact as it can't tell who is who without a cookie.
Mautic supports contact tracking using Google Analytics and the Facebook pixel. Go to Mautic Configuration > Tracking Settings and set up:
Tracking codes support also Google Analytics USERID and Facebook Pixel Advanced Matching.
There is a campaign action which allows you to send a custom event to Google Analytics or Facebook Pixel - it depends on there being a 'Visits a page' decision immediately before it in the campaign workflow.
Events can be used for Remarketing with Analytics and Remarketing for Facebook Ads.
There are several other ways to monitor contact activity and attach points to those activities. Website monitoring is only one way to track contacts. Other contact monitoring activities can consist of forum posts, chat room messages, mailing list discussion posts, GitHub/Bitbucket messages, code submissions, social media posts, and a myriad of other options.
If the tracking doesn't work, take a look at the troubleshooting section.
This is a list of cookies potentially used by Mautic when tracking Cotacts. Note that if using the tracking script, the browser's local storage is used to store a device ID used to track the Contact.
Name | Expiration | Used by Mautic for tracking? | Description |
---|---|---|---|
mautic_device_id | 1 year | Yes | Used by Mautic to track the Contact for either the tracking pixel or if the same key is not found in the brower's local storage for the monitored site. |
mtc_id | session | No | Stores the Mautic ID of the tracked Contact. It was used for tracking prior to Mautic 2.13 but is no longer used and kept for BC reads. |
mautic_referer_id | session | Yes | Stores a reference to the last tracked page for the Contact and used by Mautic to determine when a Contact exists a page they visited. |
mtc_sid | session | No | Deprecated cookie that is the same as mautic_device_id. It is no longer actively used by Mautic but kept for BC reads. |
mautic_session_id | unknown | No | Deprecated in Mautic 2 (no longer supported) and removed from Mautic 3 |
Name | Expiration | Used by Mautic for tracking? | Description |
---|---|---|---|
mautic_device_id | session | No | Can be used by the monitored site but is not used by Mautic to actively track the Contact. |
mtc_id | session | No | Stores the Mautic ID for the tracked Contact. It is not used for tracking. Can be used by the monitored site to leverage Mautic's REST API on the backend to manipulate the Contact. |
mtc_sid | session | No | Deprecated cookie that is the same as mautic_device_id. It is no longer used by Mautic but kept for BC reads. |
Found errors? Think you can improve this documentation? edit this page