Contact tracking

The act of monitoring the traffic and activity of contacts can sometimes be somewhat technical and frustrating to understand. Resonance makes this monitoring simple and easy to configure.

Website Monitoring #

Monitoring all traffic on a website can be done by loading a javascript file or adding a tracking pixel to the website. It is important to note that traffic will not be monitored from logged-in Resonance users. To check that the JS/pixel is working, use an incognito or private browsing window or simply log-out of Resonance prior to testing.

Note that by default, Resonance 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 is recommended as the primary way of website tracking. To implement it,

  1. Go to Resonance CDP > 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 Resonance CDP instance.

Resonance CDP sets cookies with a lifetime of 1 year. Returning visitors are identified exclusively by the cookie. If no cookie exists yet, Resonance 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','https://cdpX.resonanceplace.com/mtc.js','mt');

    mt('send', 'pageview');
</script>

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

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: 'my@email.com', 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. Resonance CDP 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: 'my@example.com', firstname: 'John', company: 'Resonance', companyemail: 'resonance@example.com', 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: 'my@example.com', 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 #

Resonance CDP currently supports page_urlreferrerlanguage, and page_title (note that the use of url and title are deprecated due to conflicts with contact fields).

UTM Codes #

Currently, utm_mediumutm_sourceutm_campaignutm_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:

ValuesClass
social, socialmediafa-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, newsletterfa-envelope-o
banner, adfa-bullseye
cpcfa-money
locationfa-map-marker
devicefa-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”.

Contact Fields #

You can also pass information specific to your Contact by setting Resonance 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.

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 Resonance CDP configuration.

How are Contacts tracked with the tracking script? #

When using the tracking script, Contacts are tracked with third party cookies on the Resonance CDP 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 Resonance CDP. Resonance 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 Resonance’s database, Resonance will recognize the request as the Contact associated with the given device.

Resoance 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 Resonance, 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. Resonance 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 Resonance CDP #

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

  1. Define in your campaigns the screens you want to use as triggers (e.g. ‘cart_screen’ etc.). Resonance 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=myemail@example.com

In your App #

A best-in-class approach is to have a class 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("myemail@example.com",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", "myemail@example.com")

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=myemail@example.com

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

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

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
Google Tag Assistant
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
Facebook Pixel Helper

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.

#

Shopping Cart
Supportscreen tag