Skip to main content

Script Usage

Utilizing the Web Counter Script in your website.

Usage​

To add the script to your website, simply create a script tag as shown below to your website.

A standard script Tag can be used to add the script for HTML based websites
<script
  id="analytics"
  src="https://web-counter-docs.vercel.app/public-script/web-counter.js"
  defer=""></script>

Customization​

If you would like more control over the script including the ability to override and customize deault behaviour, you can download the script and modify it as you see fit. You can then have the src attribute of your script point to the customized script location.

How It Works (Default Behaviour)​

Session Management​

The default behaviour of the script is to make a request to the /api/counter/analytics-session API Endpoint. This request will send the analytics_session cookie as part of the request body if it exists. The API Endpoint will then check if the Session Id exists and create it if it does not. Once this is done, the combination of the Web Event and Web Page will be added to the user's session. This session is used to track whether the Count has already been incremented for the user.

Incrementing Count​

Once the Session is validated, if the Event did not exist in the user's session, a request is made to increment the count of the Event + Page combination. This is handled via PUT request to /api/webevent/count. By default, the script will send requests with the Web Event of "Page Visit" and Web Page of the currently active page. The Web Event "Page Visit" is already added by default but it is up to you to add the pages you would like to keep track of.

info

We are working on adding a better way of adding all active pages of a Website. The crawler functionality is not yet ready so we ask that you POST to the /api/webpage endpoint in order to add Web Pages for the time being.

Custom Events​

You can create custom events by sending a POST request to the /api/webevent endpoint. This will give you the ability to keep track of how many times a button or link was clicked on. The Web Counter Script adds a global variable which can be called in your application when a certain action occurs. An example can be found below.

<a onClick={() => window.WebCounterIncrement("Github Link", window.location.pathname)}
  href="https://www.github.com"/>
</a>
caution

It is recommended to create a custom wrapper function in order to check if the window is defined as well as if the WebCounterIncrement function exists in the context. The reason this must be done at the application level is because the script may not be loaded due to being blocked because of Ad Blockers or Cookie Consent Managers.