Have you ever wanted Google Analytics to play a sound when a new visitor hits your site? Look no further, I have a small script for you.
While I was debugging a project’s Google Analytics settings recently, I wondered if I could have a warning about when a new visitor visited the website while I was doing something else. I came up with a bookmarklet that gives superpowers to your GA setup.
I will teach you here how to do it step by step, but if you are just interested in the bookmarklet, you can get it in the last section.
Explanation
The whole idea relies on observing changes on Google Analytics real-time view. One can look for change on the Visitor Count DOM element, and trigger a javascript event when it updates. The whole scenario can be played in your browser’s developper tab. Here is the code to do that, explaination follows.
The first line lets you change the audio file you might want to use.
Then, we initalize mActiveUsers the count of active users on your site.
The setInterval function allows you to run repeatedily the function getActiveUsers at a 1000 millisecond interval.
Finally, the function will get the DOM element ID-overviewCounterValue (it’s the ID from the big counter in GA - see picture below) and turn the string value to an integer.
If the count is greater than the previous value, we play a sound.
Then, at the end of the loop, we update the current active user value.
How to use this script ?
Browse Google Analytics to access the site you want to monitor, and visit the Real-Time > Overview section. The URL should now start by something like https://analytics.google.com/analytics/web/#realtime/...
Once you are on this page, you need to open your browser’s console (if you don’t know what and how to do it, Google it). You now just have to copy/paste the script in the input area (usually at the bottom of the console).
Now, open another tab and visit your website. If everything works, you should now hear a sound when the Real-Time counter updates.
Turn JS into a bookmarklet
Running a script in this fashion is pretty annoying. It takes time, you need to save the code somewhere, then copy/paste it each time. There should be a better way to do this.
And, indeed there is. The magick comes through the use of a bookmarklet. They are not so popular these days, but a few years back, many people where using bookmarklets instead of plugins (for instance, to share on social networks).
What is a bookmarklet?
A bookmarklet is like a classical link, but instead of visiting a target URL, when you click on it, it will run javascript in your browser… exactly as we did while using the console. The advantage here, is that you can bookmark bookmarklet (hence the name), so you can keep your scripts very accessible and run them quite easily.
To create a bookmarklet, it’s very simple, you just need to prepend javascript: to your custom code. Here is an example, click on the following link to print Hello World.
The code is really simple : <a href="javascript:alert('Hello World');">print Hello World</a> .
Get faster with bookmarklet generators
To create your custom bookmarklet, I advise you to use bookmarklet generators, here is one. They will do all the dirty job for you (minifying, importing useful libraries like jquery, …).
This is what I used to create the bookmarklet I’m sharing in the following section.
Play a sound in Google Analytics when a new visitor hits your site: bookmarklet
So, if you want Google Analytics to play a sound when a new visitor reaches your website, it’s very simple:
- Drag the following link (the blue button) to your browser’s bookmarks.
- Visit Google Analytics : Real-Time > Overview section
- In your bookmarks, click the link you saved at step 1.
- Wait for a new visit, and after a few milli-seconds you will hear a sound.
How to stop it? When you run the script, the script will be kept running inside the opened tab. If you want to stop hearing that bell noise, just close the tab, or refresh the page.
User Scripts
The initial code has been adapted from a user script. I must confess I had never heard about user scripts until today. I have not dug deep into it, but I think that basically they are scripts shared from a community, that you can run from your browser after installing an extension. It’s a bit quicker than having to type the code in your browser’s developper extension.
It’s certainly a good alternative to the bookmarklet option. So, if you are a user script user, feel free to leave your comment about these scripts and how you are using them.
Credit : Teaser photo by Jean-Christophe Lavocat