How to track the UTM source

This article covers how to track UTM data and submit it to your Crisp customer's profile.

As explained on Wikipedia, UTM Parameters are five variants of URL parameters used by marketers to track the effectiveness of online marketing campaigns across traffic sources and publishing media.

Here is an example:

https://www.example.com/page?utm_content=buffercf3b2&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer

In this case it could be very interesting to know that the visitor we are talking to is coming from a Facebook campaign.

A Javascript code to track UTM parameters

<script>
    function getUrlVars() {
        var vars = {};
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
            vars[key] = value;
        });
        return vars;
    }

    var crisp_keys = [];

    ["utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content"].forEach(function(source) {
      if (getUrlVars()[source]) {
        crisp_keys.push([source, getUrlVars()[source]]);
      }
    });

    if (crisp_keys.length > 0) {
      $crisp.push(["set", "session:data", [crisp_keys]]);
    }
</script>

Updated on: 13/06/2022