loading...
Cover image for How to get realtime notifications for website traffic using Google Analytics and JavaScript

How to get realtime notifications for website traffic using Google Analytics and JavaScript

prjseal profile image Paul Seal Originally published at codeshare.co.uk ・2 min read

I love stats

If you are like me, then you will also be fascinated in the visitor stats to your website. You will get excited when there are more than a certain number of visitors to your site.

You might spend a while looking at the realtime stats watching it, waiting to see the numbers go up. You might miss it when there are a lot of visitors to your site and you might wish there was a way you could be notified of a large volume of users on your site in realtime.

Well with this code you can set it up to send you a notification when the number of realtime visitors gets to the amount you are interested in.

enter image description here

Using Google Analytics Realtime Metrics

With this code, you can open up google analytics, go to the realtime overview page, right click on the realtime number of visitors and click on inspect. Then go to the console tab and paste in this code. You will need to replace the slack webhook url with your own.

Give me the code

(function checkStats() {
    var threshold = 10;
    var waitTimeInSeconds = 30;
    var number=document.getElementById("ID-overviewCounterValue").innerHTML;
    if(number > threshold) {
        var url = "https://hooks.slack.com/services/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"; //replace this with your slack webhook url
        var text = "There are " + number + " visitors on the site right now.";
        $.ajax({
            data: 'payload=' + JSON.stringify({
                "text": text
            }),
            dataType: 'json',
            processData: false,
            type: 'POST',
            url: url
        });
    }
    setTimeout(checkStats, waitTimeInSeconds * 1000);
})();

Registering for your WebHook Url with Slack

Click here to set up an incoming WebHook

  • Sign in to Slack
  • Choose a channel to post to
  • Then click on the green button Add Incoming WebHooks integration
  • You will be given a WebHook Url. Keep this private.

Make sure you replace the url in the code with your slack webhook url

Too many notifications?

Edit the threshold number and the number of seconds to suit your site volume and frequency of checking.

If it annoys you, just refresh the page and repeat the steps and edit the threshold and seconds to do the check less frequently.

Chrome Extension?

You might be thinking this should be a chrome extension. There are already some out there, some are free and some are paid for. I just wanted to get something simple that works for me. Feel free to take my code and use it in a Chrome Extension, but if you do, please make it a free one.

Posted on by:

prjseal profile

Paul Seal

@prjseal

Umbraco MVP, creator of codeshare.co.uk

Discussion

markdown guide