Google Analytics Blocked by Ad Blockers

Recently I thought it would be great to know how many users (if any) are visting my blog, main website and other sites on my domain. With that in mind I decided to add some google analytics to my sites in order to simply track the number of users (at least that’s what I want to do for now; google analytics is much more powerful than that, but I have yet to explore those capabilities).

I created a google analytics account (which you can do here) and went through the basic setup. I finally created a properties for my blog and my main website. My main website being the one found here: https://newteq.co.za. Both sites have different tracking codes as I would like to monitor traffic on my main website and my blog site separately.

In order to track activity on the sites, a different approach is required for each, since my blog is a wordpress site and my main website is simply a static HTML website. I proceeded to add the tracking code snippet (information on how to do that can be found here) and then tried to test it out. It wasn’t working… I thought let me give it a day or so and try again, in the meantime, I’ll set up the tracking on the blog site too.

For my blog’s tracking, I installed this plugin by MonsterInsights. It’s a great plugin that lets you authorize the WordPress site to use your google analytics account, and then you can provide the actual tracking ID that needs to be used for tracking. After setting up the MonsterInsigths plugin, I provided the tracking ID and yet again, I was unable to view my traffic on the site. Again, I thought let me just give it a day and check back.

The next day came and I was still having problems. I then found this Tag Assistant chrome extenstion here. And once everything was set up with this extension, I found that I was getting an error. The error read: Missing HTTP Response. After searching around for a while, I came across this page here. On this page, the guy said that he found out that google analytics was being blocked by an Ad Blocker. So I did a little more digging and found this site: Which Ad Blockers are blocking Google Analytics.

A couple of months ago, I moved from AdBlock Plus to uBlock Origin. And from the table given in the above mentioned website, I could see that uBlock was blocking google analytics. I went over to my website, disabled uBlock on my website, and BAM. Traffic was now being recorded.

Now, there are ethical and moral debates that can be had about using Ad Blockers but this isn’t the forum for that. There are similar debates that can be made about tracking users who don’t want to be tracked. For this reason, I would like to implement the following approach on my sites; an article written by the same guy that gave us the wonderful ad blocking table also wrote this: How to track if Google Analytics is blocked – in Analytics! In this article he basically describes that all he wants to do is track the number of users which are actually blocking Google Analytics, and nothing more. Is approach is perfect for my purposes as I simply want to understand how much traffic (visitors) my sites are getting on a daily basis.

In Philip’s article mentioned above, he using JS and PHP to implement the tracking (of users that have blocked Google Analytics). This approach should be straight forward for me to implement on my main website, but I’m going to have to investigate how this can be done on the WordPress (my blog) site.

I’ll post an update on how this can be achieve in WordPress once I have figured it out 🙂

Update 1:

Turns out that, uBlock Origin does not block the ga object from being created. When this code is run:

The console outputs GA loaded. so, the php code will never be run. After I inspected the network tab in the developer options, I found this (click on the small image to expand it):

 

As you can see, the call to the analytics API is what is actually blocked by uBlock Origin. This would explain the initial “Missing HTTP Response” error that I was getting, since uBlock Origin, stopped the request after it was sent out.

I will need to find another way to implement this.

If anyone has any suggestions, please let me know in the comments.

Update 2:

While searching the web, I manage to come across two approaches to determining if a user has an ad blocker installed. One here and another here. The first approach does not seem to work for uBlock Origin, as I was not getting the desired results. The second approach using a custom ads.js file, worked like a charm :)…

Further, the only problem with this method is that requests sent to google analytics are still intercepted and blocked by uBlock Origin. This means that I am currently still unable to track users if uBlock Origin is installed.

Wiki site available

The purpose of this post is for me to announce the availability of a new “site” on my domain – a wiki site. This site can be found at: https://wiki.newteq.co.za.

I will be using the wiki site for more tutorial based posts and things to keep in mind when setting up servers, or configurations for applications.

My first post on the wiki platform will be an item regarding the set up of SSL on your apache web server, using Let’s Encrypt . Let’s Encrypt is a great way to get your website SSL secured without having to pay for SSL certs. The Let’s Encrypt drive is to ensure that all web traffic is sent over HTTPS. Let’s Encrypt ensures that you own the server that you are wanting to enable SSL on, making it perfect for anyone (like myself) who would like to ensure that their content is served over HTTPS, but aren’t a huge corporate with big pockets to get the Verisign (or similar) certs.

I have only covered a very high level overview of my understanding of Let’s Encrypt. If you wish to find out more about it, please visit their website

Once I have completed the Let’s Encrypt tutorial, I will be posting another article on here as notification.

Ensure gitignore ignores files correctly

Introduction

In this tutorial we’ll take a look at how to get gitignore to ignore files correctly when it seems that it is not ignoring the files that you have specified in the .gitignore file.

Let’s examine why this would happen.

gitignore will only ignore files that are not currently under source control. This means that if a file was committed before it was added to the .gitignore file, it will continue to track the changes of this file.

This is the basic principle of how gitignore works.

It is good practise to always update your .gitignore file before you commit any files that you do not want or need under source control. These files are commonly binaries, executables or any generated files that are automatically created when you build a project.

There may be cases where unwanted code is checked-in by mistake with the inital commit or subsequent commits. This is when our described problem will arise. No matter how many times you try to specify the file in the .gitignore file, it will always remain in the staging area.

Prerequisite Knowledge Assumed

The below resolution example makes use of the following software’s

  • git
  • git extensions

If you are unfamiliar with git extensions, there is a section right at the bottom that contains just the git commits that are required to resolve the problem.

Resolution

Steps that are required to resolve this problem:

  1. Remove the files that you do not want tracked by source control, from git
    1. You can do this by running “git rm -r –cached file/s
  2. Commit these removed files
  3. Update .gitignore file
  4. Commit .gitignore file

Let’s walk through the following example to expand exactly what you need to do for each

You’ve got a new repo that has just been created. You’re super excited about your new repo and this is the view that you have in git extensions:

When you go to commit you see the following:

From here you decide to stage all the files without adding the files in the bin folder to the .gitignore file.

So you stage all the files and hit commit.

Changes have now been made to your normal.code file and as a result the auto.gen file has been updated. When you go to the commit screen you now see the following:

At this point you realise that you don’t want the auto.gen file or any files from the bin directory to be committed to source control. When you try to add the bin directory to the .gitignore file it doesn’t seem to work, since the staging area looks like the image below:

Point 1 implemented

This is where you will need to implement point 1 (as discussed above).

To do this, open git bash and navigate to the repo.

Once here, run the following command:

See image below:

As you can see, the two files in the bin directory were removed.

When we return to git extensions and refresh the staging area we see the following:

As you can see from the above image, the two bin files have been marked as “deleted“. The files have not physically been deleted. They have simply been removed from git’s tracking.

Point 2 implemented

Now we need to commit these removed files so that git will no longer track changes made to these files

After you have committed these files your git extension will look something like this:

Point 3 implemented

You can now update the .gitignore file to add any additional files that you would like to ignore. For the purpose of these example, we do not need to add any more contents to the .gitignore file as we have already specified all the bin files in the .gitignore file.

Point 4 implemented

You can now commit the .gitignore file and git will never track any files in the bin folder.

Simple git commands to resolve

If you are unfirmaliar with git extensions you can simply execute the following git commands to resolve the problem:

See the below images for the full example

How to use basic handlebars (handlebars.js)

Basic steps

In this article we will take a look at creating a basic handlebars file and making use of it in your html page. There are a few basic steps to use handlebars that we need to follow.

  1. Create the handlebars template file
  2. Get (or make up) data that will be used to populate the handlebars template
  3. Make sure to wrap the data in an opts where you can append the containerSelector (explained more below)
  4. Create a method that will do the injection of the data
    1. This method will also place the handlebars template onto your page

The code used in this article is simply for example purposes.

A full html page will be provided at the bottom for reference. For the sake of the example, all the code will be inside of the one html page; however you would likely want to have these components separated out as good coding practices dictate. When it comes to split out the code into different files, remember to include all the files in the main html page. An example will be shown at the bottom as well.

1. Create handlebars file

There are three things that can be noted here.

  1. We put an ID on the script tag – “handlebarsTemplateExample”. This will be used as our template selector which will be discuss below.
  2. We are creating HTML in the script tags (this is how handlebars works).
  3. We have this weird notation of “{{” and “}}”. These are variables which handlebars uses to bind information. Similar to AngularJS.

2. Get data for handlebars to inject

For this basic example we will simply make up some data. Ideally you would want to get this data from an ajax call or something similar.

3. Wrap data in opts

Since all of this is done in JavaScript it makes it easier for us to manage our code if we wrap all of our arguments into an “options” variable which is usually shortened to “opts”.

Opts is simply the parameters that we are going to be passing to the method. It is easier to say: “myMethod(opts)” if there are plenty of arguments that you want to pass to the method as opposed to: “myMethod(arg1, arg2, arg3….)”.

Making use of opts is also a better JavaScript practice as you can easily determine what each of the parameters are referring too. You can take a look at these two articles for more information on that (since this is a whole other discussion):

  1. http://stackoverflow.com/questions/12826977/multiple-arguments-vs-options-object
  2. http://stackoverflow.com/questions/4893642/javascript-passing-arguments-to-function

So let’s make the “wrapper”

In the above code block you will see that we have added templateSelector and containerSelector to our opts object.

  • templateSelector will be used to determine where we get our source from (i.e. the handlebars template)
  • conatinerSelector will be used to inject the result of the handlebars into a div on your page. This means that you would need to have a div (with an ID of “insertDataHere” (in this example) on your html page). You can see the full html page below if you are confused.

4. Create method to do handlebars injection

This is the final step to get your basic handlebars up and running. We will now make the basic handlebars injection method.

The code above is quite simple. Let’s break it down line by line.

This takes the html from the templateSelector and stores it in a variable called source. This would mean that it contains our html where we have defined: {{data.header}} and {{data.information}}.

Now that we have the basic handlebars “template” (inside source), let’s create the actual handlebars template by compiling the source. The result is stored in template.

This line is where the magic happens. Now that we have a compiled handlebars template we can send the template our data. The variable “data” must contain “header” and “information”. If it does not, these items will not be bound to the template. This matches the names that we gave our data injection variables between the “{{” and “}}” in our handlebars file.
Lastly we put our completed template (which is stored inside html as per the previous line; with its data injected in) inside of our div on the main html page.

You have now created a basic handlebars template and injected it into your html. Please see the below code for the full reference.

Full one page HTML

Remember you can also always download the files and not use the HTTP address for the script/s.

References to remember when splitting out files

Output

Here is a screen shot of the result

blog-handlebars-example

UPDATE/EDIT

Previously I had mentioned that you could extract the handlebars template out of the html file. Your external reference would look like this:

This will not work, because there is one thing that I forgot to mention. The extracted handlebars file needs to be inside of an HTML file. This is because a .js file does not register “<script>” tags.

This means that you would need to load the HTML page into your other HTML page. This is just a simple way of extracting the handlebars file out into another file; it is however not the most pleasant way of doing it. For the simplicity of this tutorial I would recommend that you rather keep the handlebars script in your HTML file and not split this into another file.

If you do wish to split it into another file this is how you would do so:

Furthermore, in your HTML page you will need to add the following