SendGrowth's Realtime Website Counter
The Realtime Website Counter header

Realtime Website Counter

Looking for an easy way to add a hit counter to your website?


If you add this code to the HTML of your page:

<script id="counter" page="one" label="Page views:" src="https://www.sendgrowth.com/assets/js/counter.js"></script>
This will inject a simple but real-time website counter into that part of your page, like the one you see above.

This small javascript app uses Firebase as a backend, and it updates in real-time.

Try opening this page in another tab in the background (Right Click > Duplicate). You'll see the hit counter on this page update immediately.

This is a fun project that reminds me of the kind of things I saw a lot growing up on the early stages of the internet. You can still easily adjust how this looks with a little bit of CSS.

It will fill the width of the parent element, so if you'd like it to be a specific width just wrap it in a div.

There are a couple settings you can change too:

The page parameter, which can be either "all" or "one". All means that it counts hits across all pages that you have this snippet installed on your website. One means it only counts for the specific page.

The label will change the text that shows next to the number.


Want to edit the source code yourself?

The app utilizes webpack as a build tool and UglifyJsPlugin for minification, so you'll have to install Node.js, npm, and Firebase from npm

Here is an example webpack.config.js you can modify for your use: