Contact tracking

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.

Website Monitoring

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.

Tracking Script (Javascript)

JS tracking method was implemented in Mautic 1.4 and recommended as the primary way of website tracking. To implement it,

1. Go to Mautic > Settings (click the cogwheel at the top right) > Configuration > Tracking Settings to find the JS tracking code build for the Mautic instance
2. Insert the code before the ending <body/> tag of the website you want to track

Or, 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:

• Page Title is the text written between </title> tags.
• Page Language is the language defined in the browser.
• Page Referrer is the URL which the contact came from to the current website.
• Page URL the URL of the current website.

mt() Events

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();
    }
});

Local contact cookie (first party cookie)

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).

Tracking of custom parameters

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'});

Load Event

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"); }});

Tracking Pixel

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

Tracking Pixel Query

To get the most out of the tracking pixel, it is recommended that you pass information of the web request through the image URL.

Page Information

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).

UTM Codes

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:

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".

Contact Fields

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).

Tags

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.

Embedding the Pixel

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:

HTML

<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" />

PHP

$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;" />';

Javascript

<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>

Available Plugins

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.

• Joomla!
• Drupal
• WordPress
• TYPO3
• Concrete5
• Grav

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.

Identify visitors by tracking URL

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.

How are Contacts tracked with the tracking script?

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.

Mobile Monitoring

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.

Steps in Mautic

1. 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.

2. 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.

3. Define in your campaigns the screens you want to use as triggers (e.g. 'cart_screen' etc.). Mautic is not looking for a real URL in the form 'http://' for page_url, any typical string would do. Like this:

https://example.com/mtracking.gif?page_url=cart_screen&[email protected]

In your App

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.

Google Analytics and Facebook Pixel tracking support

Mautic supports contact tracking using Google Analytics and the Facebook pixel. Go to Mautic Configuration > Tracking Settings and set up:

• Google Analytics ID
• Facebook Pixel ID

Tracking codes support also Google Analytics USERID and Facebook Pixel Advanced Matching.

Campaign action Send tracking event

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.

How to test Google Analytics tracking code and campaign action

• Install Tag Assistant and enable recording on your website
• Create campaign with the 'Visits a page' decision and 'Send tracking event' action
• Test it and check in the Tag Assistant debug window that you see one Pageview request and one event

How to test Facebook Pixel tracking code and campaign action

• Install the Facebook Pixel Helper
• Create campaign with a 'Visits a page' decision and a 'Send tracking event' action
• Test it and check in the Facebook Pixel Helper debug window that you see one Pageview and one custom event action

Events can be used for Remarketing with Analytics and Remarketing for Facebook Ads.

Other Online Monitoring

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.

Troubleshooting

If the tracking doesn't work, take a look at the troubleshooting section.

Cookies used by Mautic

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.

Third party cookies

First party cookies