Jamstack Explorers

Split testing with Netlify with Phil Hawksworth

Adding branch information to analytics

For analytics, it can be useful to include information about which branch is being served and how it is performing.

By exposing branch info as an environment variable, Netlify can provide this as a dimension on your chosen analytics service.

This video shows how to inform analytics trackers which branch is being served, with the help of the handy Snippet Injection feature.

[00:00:00] When it comes to split testing, it's really important to be able to measure the performance of your different branches. In order to do that, we really need to identify the branch that's being served so that your analytics package can pick that up and you can start measuring the different performance profiles. Now there's a few different ways we can do this. If we just flick over to the Netlify docs, there is information about that right in here. We can look at how we can expose the branch information during your build. This is a popular way of doing this. If you're generating a site with a static site generator or any kind of scripting that will generate your markup, Netlify will expose as an environment variable the branch that that build is running on. We can start to use different conventions to pull that data, that value out during the build, and then inject that into your code as you generate it.

[00:00:50] Different static site generators have different ways of doing that, different syntaxes for that, but we at Netlify, expose a branch environment variable for you to use for this reason. Even more convenient way of doing this is to use snippet injection. Snippet injection is a way of adding particular bits of code or markup after your site generator has run in and as your build is running. Let's look at how we can do that now, because we can also use the branch environment variables right there as well. For this example, we're looking at this site once again, Vapourium. Let's have a quick look just to remind ourselves what this looks like.

[00:01:30] This is the site on the production branch, and if we go and look at our deploys, we also have another branch, a loud CTA branch, which has a slightly different look. Now, if we look in the source code for this or rather if we look at the HTML that's being generated for this, we can see there's no reference to any Google analytics or any other analytics package, or indeed the branch who are all in here. This is just our HTML.

[00:02:00] Ideally, what we'd like to do is at a convenient point inject our Google analytics or analytics package tracking code into our HTML and expose the branch right there. Let's do that using some snippets injection. If we go to our deploy settings and look up post processing, one of our options there is snippet injection, and this really is as simple as creating or specifying the code that you want to inject, give it a name for identification purposes, and then choose whether you want that to be injected just before the end of your body tag or just before the end of your head tag. Let's do that here, and I'm actually going to nip over to the documentation to grab that example.

[00:02:50] Here we are, this is looking at an example for Google analytics. Of course, you'd need to include your Google analytics snippet itself, but then we can also see how we can start to add another dimension to Google analytics, calling it whatever you like. Here, we're calling it branch, and we're exposing the branch environment variable via this a bit of liquid syntax here. I'm just going to copy that wholesale In fact, I'll copy the comment as well, just as a little reminder. We can pop that in here, and yes, once again, this will when it runs after our build has finished, this will inject this into every single page just before the end of the head tag. What we should see is our branch being identified right there in the markup so that our analytics package, whatever that might be, can make use of it. I'm going to save that, and I'm going to just do a couple of redeployment.

[00:04:00] First of all, let's redeploy this branch, our branch deploy, the loud CTA branch. I'll just do a redeployment there just to kick that off again, and do another deploy. I'll do that also on the production branch, kick both of those off, so we can see those are both happening now, those should happen fairly quickly. Okay. A deployment has happened on the branch deploy. Let's go and take another look at that. It looks all exactly the same, but if we view the source, here we go. Here's a code that's being injected by our snippet injection, and this can be anything we like, but here we are injecting just the script. We need to tell Google analytics about the branch and the branch that we're on has been reflected there.

Let's just go and make sure that everything is well by looking at our production branch as well.

[00:05:00] Viewing source once again, and there we are. The main branch that our production branch is being reflected there as well. In this way, when we're running a split test, no matter which branch is serving the site behind the scenes, we can be sure that the information about the branch itself is being added to our analytics tracking code so that we can then start to measure the performance of one variant of our site versus the other.


your progress