September 26, 2016

Installing ThisData via Google Tag Manager

If you’re not already using it then you should install the ThisData Javascript tracking code. The javascript helps to feed our contextual authentication machine which results in faster, more accurate scoring when using our APIs to verify user identity, improve user experiences, and keep out the baddies.

You can install the script directly into your site or use a script loading service like Google Tag Manager. This post will show you how to install your ThisData tracking code using Google Tag Manager.

Get your ThisData tracking code

You will find your customized ThisData tracking script in your account under the API Settings section. You will want to make a copy of this script as you will be pasting it into Google very soon.

If you don‘t have a ThisData account you can sign up for one here.

Adding to Tag Manager

Simply create a new Custom HTML tag, paste in tracking code you copied earlier, and then set the page trigger to all pages.

Publish the new tag and you‘re all done.

Note: By tracking all pages you will also start to track the profiles of anonymous visitors to your site. You will be able to see these profiles and visits in your ThisData Audit Log.

Identifying users

In order for our algorithms to build up patterns of usage for trusted devices and locations etc we need you to associate the data with an authenticated user.

You can send user id, name and email and any other variables that you would like to track as part of the Javascript tracking code.

To do this you first need to create a signature for the payload of user data that you will be sending us. You do this on the server side to prevent anyone tampering with your user variables. If we didn’t do it then a malicious user could submit loads of data for their own devices and locations etc which could mask their activity from our algorithms.

In Google Tag Manager

The best practice way to supply variables from your server to Google Tag Manager is to use Data Layer variables.

You will want to add 2 new variables, one for the user params and one for the signature of those params.

ThisData Params  
Type: Data Layer Variable  
Variable Name: thisdata.params

ThisData Signature  
Type: Data Layer Variable  
Variable Name: thisdata.signature  

Once you have the params setup you can add them to the load method of your ThisData tag. By adding {{ThisData Params}} to the tag, Google will replace this placeholder with the actual value when the tag is added to your page.

<script type="text/javascript">  
  window.thisdata=window.thisdata||[],thisdata.load=function(a){if(!("ThisData"in window||window.thisdata.loading)){window.thisdata.loading=!0,window.thisdata.options=a;var b=document.createElement("script");b.src="https://thisdata.com/js/thisdata-LATEST.js",b.async=!0;var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c)}};

  thisdata.load({
    "apiKey" : {{ThisData Write Key}},
    "signed": {{ThisData Params}},
    "signature": {{ThisData Signature}}
  });
</script>  

In your web app

The final step is to create the params and signature on your server and make them available to Google Tag Manager. To do this we need to add a script tag containing a dataLayer variable before the main tag manager script is loaded on the page.

In this example we‘re using Ruby on Rails to serve the page so would create the signature as follows.

  <%
      signed_params = {
        user: {
          id:     current_user.id.to_s,
          name:   Rack::Utils.escape_html(current_user.name.to_s), # Prevents XSS
          email:  Rack::Utils.escape_html(current_user.email.to_s)
        }
      }
      signature = OpenSSL::HMAC.hexdigest(
        OpenSSL::Digest.new('sha256'),
        "THISDATA-API-KEY",
        signed_params.to_json
      )
  %>

  <script type="text/javascript">
    dataLayer = [{
      'thisdata': {
        'params': <%= signed_params.to_json.html_safe %>,
        'signature': <%= signature.to_json.html_safe %>
      }
    }];
  </script>
  <!-- Google Tag Manager -->
  <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-TTXQ5Q"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-xxx');</script>
  <!-- End Google Tag Manager -->

Check out the results

Once you‘ve deployed the server side code and published the updated Google Tag script you will start seeing identified user events in your ThisData audit log. If you check in your ThisData account you will see that anonymous page-view events will start showing as identified events with the users name and email showing.

As I mentioned at the start of this section, the most important gain from identifying the users is that our algorithms are able to start gathering more trusted behavioral patterns for your users which ultimately leads to a faster and more accurate anomaly detection service.

Tweet this article!

YOU MAY ALSO BE INTERESTED IN

The future of authentication

Today I’m excited to announce a deal that we have been working on for the past few months and how that will impact the future of contextual ...

Introducing custom security rules

For the past few years we’ve been working hard to create a plug and play adaptive risk engine. We designed our core service using a mix of b ...