Bypass Ad Blockers and Track Your Visitors with Piwik

Bypass Ad Blockers and Track Your Visitors with Piwik

comments

The problem with popular web analytics tools available today is that they're disabled by the majority of ad blockers.

According to the New York Times, roughly 11% of all internet users currently use an ad blocker. So, short of writing your own web analytics platform, what are you, as a website owner, to do?

In this guide, I'll show you how you can set up Piwik, the popular open source web analytics application, and configure it so that your tracking code isn't disabled by ad blockers.

Install Piwik

Let's start off by installing the latest version of Piwik.

curl -kLo ~/piwik.zip https://builds.piwik.org/piwik.zip
unzip -q ~/piwik.zip -d /var/www/ericmathison.com/piwik/

Set the permissions of the directory if needed.

chown -R www-data:www-data /var/www/ericmathison.com/piwik/

Configure Piwik

In your web browser, go to the location that you installed Piwik to: https://(your website)/piwik

You'll be asked to enter your MySQL database information, to set-up a user account for Piwik and your website's information. Go ahead and do that now.

Generate Tracking Code

Log into your Piwik control panel: https://(your website)/piwik

On the top right, click the gear icon that says Administration.

piwik-administration

From there, on the left-side menu, click Websites and then Tracking Code.

piwik-tracking-code

Make sure to select Track users with Javascript disabled.

p-track-js-disabled

You'll now see some code like:

<!-- Piwik -->
<script type="text/javascript">
  var _paq = _paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//tools.sentryofasgard.com/piwik/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', '1']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<noscript><p><img src="//tools.sentryofasgard.com/piwik/piwik.php?idsite=1&rec=1" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->

Remove Piwik References

If you added the previously generated tracking code to your website, it will automatically be disabled by ad blockers.

So in order to prevent your tracking code from being blocked, you'll need to remove any reference to the name Piwik from it.

We'll be using the js/ folder trick outlined in the readme file.

Step #1:

Rename the piwik directory.

mv piwik p

Step #2:

Create symbolic links to piwik.js and piwik.php. I use the filename p for them:

cd /var/www/ericmathison.com/p/js/
ln -s piwik.js p.js && ln -s piwik.php p.php

Step #3:

Remove the opening and closing HTML comment tags from the tracking code.

<!-- Piwik -->
<!-- End Piwik Code -->

Step #4:

Remove piwik.php from setTrackerUrl:

Old:

_paq.push(['setTrackerUrl', u+'piwik.php']);

Updated:

_paq.push(['setAPIUrl', u]);

Step #5:

Add js/ to the url

Old:

var u="//ericmathison.com/p/";

Updated:

var u="//ericmathison.com/p/js/";

Step #6:

Update the URL locations in the tracking code. Change piwik.js to p.js and piwik.php to p.php.

g.src=u+'p.js'; s.parentNode.insertBefore(g,s);

<img src="//ericmathison.com/p/js/p.php?idsite=1&rec=1" style="border:0;" alt="" />

Modified Tracking Code

Here's the tracking code that I have now for my site with all of the modifications from the previous steps:

<script type="text/javascript">
  var _paq = _paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//ericmathison.com/p/js/";
    _paq.push(['setTrackerUrl', u]);
    _paq.push(['setSiteId', '1']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'p.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<noscript><p><img src="//ericmathison.com/p/js/p.php?idsite=1&rec=1" style="border:0;" alt="" /></p></noscript>

Ad Blocker Test Results

Let's put it to the test. I went to the ad blocker extensions lists for FireFox and Chrome and sorted them by the most users.

Here's the list of FireFox ad blocking extensions that I've tested it on successfully:

  • Adblock Plus
  • Adblock for Firefox
  • AdBlocker Ultimate
  • Ghostery
  • uBlock Origin

And here's the list of Chrome ad blocking extensions that I've successfully tested it on:

  • AdBlocker Ultimate
  • Adguard AdBlocker
  • Fair AdBlocker
  • SuperBlock Adblocker
  • uBlock Origin
  • uBlock Plus Adblocker

I also tested it out in the Brave browser successfully.

If you find a browser and extension combination that blocks out the Piwik tracking code from loading, let us know in the comment section below!