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.

Paul Seal

Umbraco MVP and .NET Web Developer from Derby (UK) who specialises in building Content Management System (CMS) websites using MVC with Umbraco as a framework. Paul is passionate about web development and programming as a whole. Apart from when he's with his wife and son, if he's not writing code, he's thinking about it or listening to a podcast about it.

Proudly sponsored by

Moriyama

  • Moriyama build, support and deploy Umbraco, Azure and ASP.NET websites and applications.
AppVeyor

  • CI/CD service for Windows, Linux and macOS
  • Build, test, deploy your apps faster, on any platform.
elmah.io

  • elmah.io is the easy error logging and uptime monitoring service for .NET.
  • Take back control of your errors with support for all .NET web and logging frameworks.
uSync Complete

  • uSync.Complete gives you all the uSync packages, allowing you to completely control how your Umbraco settings, content and media is stored, transferred and managed across all your Umbraco Installations.
uSkinned

  • More than a theme for Umbraco CMS, take full control of your content and design with a feature-rich, award-nominated & content editor focused website platform.
UmbHost

  • Affordable, Geo-Redundant, Umbraco hosting which gives back to the community by sponsoring an Umbraco Open Source Developer with each hosting package sold.