Digital Insanity Magazine by Bruno Amaral

One Analytics to Rule Them All

Fri, 18 Jan 2019 12:29:43 +0000

Henri L.

The notes below apply if you run a small web design studio that needs to assure a good level of service to your clients with the most efficiency.

This means cutting down repetitvie tasks, like setting up a Google Analytics Account for every website a client needs.

Google Analytics

To begin, we need some configuration on Google Analytics, later we will tie it all down with Nginx.

Step One, Setting up a Google Analytics Account and Property

Pretty self explanatory really. Just set up an account, let’s call it StudioX and create a property called Client 1.

The property’s settings can be whatever you wish, just make sure that the default URL is real.

Step by step instructions to set up the Account and property are available here: https://support.google.com/analytics/answer/1008015?hl=en

Grab the tracking code and ID, we will need it later. It’s something like this:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-XX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXX-XX');
</script>

Step Two, One View for each Website

Let’s imagine Client 1 owns 2 websites that you have created, we will need to setup a data view for each of them.

At the view level you can set a new Default URL, and you can also set a switch for Bot filtering that removes the known bots to from your reports.

Step Three, Filter by hostname

This is straightforward, add a new filter to you view so that it only shows the hostname of the website we want to track.

Nginx

I was looking out for a way to use a main Google Analytics Account in all websites I host, and found this gist by Jakub Jirutka

https://gist.github.com/jirutka/5279057

It’s quite simple, in every website hosted by Nginx, it will replace the </head> tag for the google analytics code we had previously. After that’s done, we just include the analytics.conf file in the server block of our website.

What is below is an example, don’t just copy and paste it to your config.

server {

  listen 80;
  listen 443 ssl;
  server_name www.WEBSITE1.com WEBSITE1.com;
  include incl/analytics.conf;

  # certs sent to the client in SERVER HELLO are concatenated in ssl_certificate
  ssl_certificate /etc/letsencrypt/live/WEBSITE1.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/WEBSITE1.com/privkey.pem;
  ssl_trusted_certificate /etc/letsencrypt/live/WEBSITE1.com/fullchain.pem;
  ssl_session_timeout 1d;
  ssl_session_cache shared:SSL:50m;

  # Diffie-Hellman parameter for DHE ciphersuites, recommended 2048 bits
  ssl_dhparam /etc/nginx/ssl/dhparam.pem;

  # modern configuration. tweak to your needs.
  ssl_protocols TLSv1.1 TLSv1.2;
  ssl_ciphers 'YOUR CYPHERS GO HERE';
  ssl_prefer_server_ciphers on;

  # HSTS (ngx_http_headers_module is required) (15768000 seconds = 6 months)
  add_header Strict-Transport-Security max-age=15768000;

  # OCSP Stapling ---
  # fetch OCSP records from URL in ssl_certificate and cache them
  ssl_stapling on;
  ssl_stapling_verify on;

  root /var/web/WEBSITE1.com;
  index index.php index.html index.htm;


  location / {

    # try_files $uri $uri/ =404;
    try_files $uri $uri/ /index.php?q=$uri&$args;
  }


  # lets allow .wellknown challenge to pass so we can have https
  location /.well-known {
    allow all;
    auth_basic off;
  }

  error_page 404 /404.html;

  error_page 500 502 503 504 /50x.html;
  location = /50x.html {

    root /usr/share/nginx/html;
  }
}

Day to day

From now on, each time you need to track analytics for a new website that belongs to Client1, just add a new view, change the Default URL and setup the filter to only track traffic to that hostname.

It’s two steps in Google Analytics, instead of three in your Content Management System (CMS) and Analytics Account.

Setting up a new property
Installing the tracking code in the CMS
Setting up a new view

I haven’t tested, but in theory you can setup your View after the site goes live. Your data should already be there because the Google Analytics Property was already collecting information, it just wasn’t filtering by hostname.

You can also create different analytics.conf files, one for each Client/Property you want to use. Something like analytics.client1.conf, analytics.client2.conf.

There is one small caveat, with this implementation you can only track 25 websites for that Property.

You can take it one step further by using the Google Tag Manager code. It’s the same procedure and you gain the hability to setup new events across all sites. Within Google Tag Manager you can also fire the analytics code, but that would be a matter for another article.

Feel free to leave a comment if you find something you would like to add.

Content Groups in Hugo

Sat, 03 Mar 2018 00:41:57 +0000

If you are not a webdesigner or programmer, you probably want to skip this post. Click on https://brunoamaral.eu/categories/ to find something that is more worthy of your time.

For everyone else, a little background first. My this blog is built using Hugo and has the following sections:

Posts
Pages
Stories
Instagrams

And I wanted to track these elements as content groups in Google Analytics, using Google Tag Manager. Because I am not at all sure which of these drives more traffic and interest to the site.

You can configure 5 levels of content groups, and I wanted to configure the following:

	Posts	Pages	Stories (Section)
Index 1	Post	Page	Stories
Index 2	nil	nil	StoryName
Index 3	PostTitle	PageTitle	StoryArticleTitle

Configure your Hugo theme

To get this information out of Hugo do this, I used the classes in the body tag.

_default/single.html

<body class="single contentgrouptype-{{ .Section }} contentgroupname-{{ with .Params.stories }}{{ index . 0 | urlize }}{{ end }} article article-title-{{ .Title |urlize }}">

_default/page.html

<body class="single page contentgrouptype-{{ .Section }} contentgroupname-{{ .Title | urlize }}">

Since the page for Instagrams has its own layout, I took advantage of that:

Instagrams/instagram.html

<body class="single instagram contentgrouptype-instagrams contentgroupname-{{ .URL }}" id="instagram">

I should be using the title of the instragram post, with urlize. The reason I am not, is because my script still does not collect that information.

taxonomy/category.html

<body class="page contentgrouptype-category contentgroupname-{{ .Title | urlize }}">

taxonomy/story.html

<body class="page subhomepage contentgrouptype-story contentgroupname-{{ .Params.story_title | urlize }}">

taxonomy/tag.html

<body class="page contentgrouptype-tag contentgroupname-{{ .Title | urlize }}">

Configure Google Tag Manager

First, we need to install Google Analytics from the Google Tag Manager tag.

What you are seeing in {{ }} are variables that we need to create and configure to tie this together.

In Google Tag Manager, click on “Variables” and then “New”. Select “Page Variables” > “Custom Javascript”

Then use this code for the variable “Content Group Type”, which will have a value of “tag

category
stories”, or “instagrams”

// Identify if content group is a tag, category, story etc.
function(){
var contentgroupclass = document.body.classList;
 var dem = contentgroupclass.length;
 for (var i = 0; i <= dem; i++) {
    if (contentgroupclass[i].match('contentgrouptype-')) {
      var contentgroup = contentgroupclass[i].replace(/contentgrouptype-/g, '');
      return contentgroup;
      break;
    }
 }
}

The code for “Content Group Name” will follow the same structure:

function(){
var contentgroupnameclass = document.body.classList;
 var dem = contentgroupnameclass.length;
 for (var i = 0; i <= dem; i++) {
    if (contentgroupnameclass[i].match('contentgroupname-')) {
      var contentgroupname = contentgroupnameclass[i].replace(/contentgroupname-/g, '');
      return contentgroupname;
      break;
    }
 }
}

And finaly, the code for “Content Group Article Title”

function(){
var articletitleclass = document.body.classList;
 var dem = articletitleclass.length;
 for (var i = 0; i <= dem; i++) {
    if (articletitleclass[i].match('article-title-')) {
      var articletitle = articletitleclass[i].replace(/article-title-/g, '');
      return articletitle;
      break;
    }
 }
}

You are done.

Go to the preview of tag manager and check that it’s working in the different pages. Soon, you will begin to see this data arrive in Google Analytics

Custom Report

For my use case, I prepared a small custom report using the drilldown of the different content groups:

And this in turn gives you this report:

And that’s it, you can now use the new Content Groups to see where your readers see the most value.

Hope this helps!