free tools

Add these to any website

---

quick start

embed a counter

This is the recommended way to add the counter on your site.
The integration consist of a small JS library and an html tag with configurable attributes.

<!-- counterAPI library, insert anywhere on the page. -->
<script src="https://counterapi.com/c.js" async ></script>
<!-- Add the counter instance somewhere to your template... -->
<div class="counterapi" style="min-height:44px" ></div>

Done! 👍 You should see a counter that look like this:

Note: You can specify your website domain directly in the script tag (useful for test environments, or apps that use more than one domains).

<script src="https://counterapi.com/c.js?ns=mysite.com" async ></script>

---

limits & pricing

This is a free, public API. No accounts, keys or authentication required.
There is a soft limit of 100k daily requests that we lift after a quick verification.

custom dev

For a small monthly fee, you can get hands-on support and advanced features like advanced analytics, authentified calls, filtering rules, CSV data exports, custom property tracking, whitelabel integrations, or customized branding.

Tell us about your projects to see how we could work together.

---

options ⚙️

Customize how your counters work.

Param	Default
startNumber	0	Got some legacy pageviews that you need to account for? Add them up to the ones tracked in CounterAPI here.
behavior	view	view, vote or rate. Using the vote and rate behavior will only increment the counter on button clicks.
readOnly	false	Display a count, but don't increment its value. Useful to show counts of multiples items within a list. (ex: user dashboards, list of videos). If you use aggregations like any keys/actions, you requests will automatically be read-only.
trackOnly		API only. Track an event without returning a count, slightly faster. If you post events server side and don't need the count, consider enabling this flag to save us some precious server ressources

These options can be set as attributes on the DIV tag or passed as URL params to the API:

<!-- all settings are passed as attributes... -->
<div class="counterapi"   readOnly="true" startNumber="42000" key="homapage"  ></div>

Or using the API...

https://counterapi.com/api/mysite.com/view/product123?readOnly=true&startNumber=42000
⇒ 200 {
  "value": 42005,
  "abv": "42K"
  "ns":"mysite.com",
  "action":"view",
  "key":"product123",
  "statsUrl":"https://counterapi.com/mysite.com/view/product123"
}

styling options 💁🎨

You can customize the way your embeded counters look and behave in various ways.

Param	Default
icon	eye	Customize the icon. (eye, heart, star, etc). Here is the full list of supported icons
abbreviate	false	Abbreviates large numbers (2M, 5k, etc). Great for lists and summaries
label	-	Display a unit next the number on the badge. Ex: "views", "votes", "likes", or "downloads"
timeline	total	Count modifier. You can use a duration notation (15m, 12h, 30d, etc) to only count recent events. Use this for a "currently watching" kind of counter.
unique	false	Count modifier. Set to true if you want to count unique users instead of events. Especially useful for aggregations using any key or action. For example, all users who watched any videos in the last 30 days. By default, aggregation are done on generated user hashes. If your user are authentified, set userId on your events to better inform this aggregations.
hideIfZero	false	Hide the widget when the count is zero. ex: Avoid showing '0 people booked this room today'
noNumber	false	Useful for voting buttons where you just want to show text on the button. ex: 'Upvote this!'
labelVoted	-	Custom text to display in place of the count after a user upvote. By default, we simply increment the count.
color	#ccc (light grey)	Text color. Named colors and #hex values work. (#ff0000, red, pink, etc)
bg	#000 (black)	Background color. Use transparent if you don't want the button/badge look
iconColor	#f00 (red)	If you want your icon to be a different color than your text.
invisible	false	Hide the widget
noCss	false	Disable all styling. Write your own css.
noIcon	false	Hides the badge icon
noLink	false	Disable the link to the traffic trends report. You can disable the link even on the free service, but please consider including a link to CounterAPI.com somewher on your page.
noFormatting	false	By default, long numbers are automatically formatted to the user's locale (ex: 3,000,000)
animDuration	3000	Duration of the counter animation when it loads. In Ms.
noAnim	false	Disable initial counter animation

These options are set directly on your counter div tag. ex:

<!-- Display a plain text, abbreaviated count to display in a list. -->
<div class="counterapi" noIcon="true" noCss="true" abbreviate="true" startNumber="50000"  ></div>

Will look like this:

IMG badges options

The badge integration is pretty basic. Everything is set via URL parameters. If you manually set the ns, action and key url params, you can preview your badges URLs directly as a browser URL.

If you don't specefy a key and namespace, the current URL and domain will be used as key and namespace.

https://counterapi.com/counter.svg?startNumber=455823&color=blue&readOnly=true
<img src="https://counterapi.com/counter.svg?key=hehe&color=ff0000&style=for-the-badge&label=bingos">

Param	Default
label	views	Text shown on the right side of the badge
style	view	social, flat or big. Using the vote and rate behavior will only increment the counter on button clicks.
labelColor	false	Set background of the left part (hex, rgb, rgba, hsl, hsla and css named colors supported).
color		Set background of the right part (hex, rgb, rgba, hsl, hsla and css named colors supported).

All the other usual counterAPI settings can be set too.
For example: readOnly,startNumber, ns, action and key

Invisible IMG pixel

Track and measure events, without showing a count. Similar to using "invisible=true" on the HTML snipet. Requires no JS, so possibly easier to integrate in some systems.

<img src="https://counterapi.com/pixel.gif?action=purchase&key=red-shoes">

---

Advanced events 🏷️

setting your namespace, actions & keys

tldr;

Specifying the ns, action and key in counters future-proof your setup and gives you neat traffic reports.

Param	Default
ns	current domain	Namespace for all your tracked events. Use your domain name to avoid conflicts and improve filtering.
action	"view" or "vote"	Action name to group your events. Allows you to assign the same key on different events types (ex: Use the "productID" as a key for "productPage", "productPurchase" and "productReviews" actions). You could just bundle everything together in the key field, but setting "action" values will help you generate clearer trends and analytics reports. Use any to select all events for the name space (ex: use with a 30minutes timeline to show currently online users).
key	current page url	The unique identifier to identify your counter. By default, you'll have different counts on all your website pages. If you plan on using the API (and not just the embed), we strongly suggest you setup keys manually. Use any to select all events for your action. (ex: get a count of all the videos views on a website). Using any won't increment any counts (make it readOnly).

examples

The default setup uses the page URL as the key.
This has some limitations. For example, if we have a store that shows the same product on two slightly different pages, we might want to use the same counter on both pages.
This can be done by passing a unique productId to our counters. Article slug, author name, or anything unique that defines your content works too.

<!-- This will increment and shows the count for "myProduct1234" -->
<div class="counterapi" key="productId1234"  ></div>

If you want to count different type of events on those keys, you can group them by action.
Defaults to "view" when unspecefied.

 <!-- Count pageviews separately using the same key, but a different action -->
<div class="counterapi" key="Batman" action="superheroProfilePage" ></div>
<div class="counterapi" key="Batman" action="superheroPhotos" ></div>

Grouping stuff in action keeps your events neatly organized and will let you create aggregate reports in your dashboard.

We scope all your events under your website domain, but it's a good practice to set your ns (namespace) manually for more control. This is required to share counts between your mobile app and web version, or if your website URL ever change.

 <!-- Hardcoded the namespace to retrieve counts from a different website, or to use in a mobile app. -->
<div class="counterapi" ns="superhero.com" ></div>

Example with all three fields specified manually:

 <!-- Custom events, neatly tracked -->
<div class="counterapi" ns="superhero.com" key="Batman" action="superheroProfilePage" ></div>

---

track more user properties

You can pass more attributes via the tag or API URL and these will be saved to your events. While it's not possible to retrieve this data using the public feeds, you'll be able to retrieve it with CSV downloads and authentified API calls.

Ex:

Param	Value
myProperty	String	Track additional property in your events. Retrieve them using CSV downloads, the authentified API, or advanced reports.

The API works the same way. Just throw in your variables as extra parameters.

https://counterapi.com/api/mysite.com
/view/product123?ref=partner1&userId=1234&campaign=easter⇒ 200 { "value": 42005, "abv": "42K" }
  // "ref", "userId" & "campaignId" will be recorded for your events.
  // Custom data points don't change the displayed count. 

---

Accessing the api 🤖

You can fetch and increment counts using simple requests. This is a good alternative to the embeds if you want to do some math on the numbers, need more control over the presentation, or just can't add our (tiny) library to your stack.

using the browser library 🧪

<!-- load the browser library-->
<script async src="https://counterapi.com/counterapi.embed.js"></script>

// later... when a user vote
var key = 'product123'
var action = 'upvoteProduct'
var namespace = 'mysite.com'
var options = { startNumber: 300, behavior: 'vote' } //see options list

counterApi.read(key, action, namespace, options, function(err, res){
  alert('Current number of votes for this: '+ res.value);
  //do something ...
})

//increase a counter
counterApi.increment(key, action, namespace, options, function(err, res){
  alert('New upvote cout is now '+ res.value);
  //do something ...
})

API endpoints

Most data tracking and retriving happens on a single endpoint leveraging the same settings than the HTML widgets (beside the cosmetic ones).
The URL parameters are all optional, but you need to specefy your ns, action andkey in the URL.

https://counterapi.com/api/ns/action/key?optionalParam=value&readOnly=false

using jsonp

<script>
function cb(response) {
  document.getElementById('visits').innerText = response.value;
}
</script>
<script async src="https://counterapi.com/api/mysite.com/view/product123?callback=cb"></script>

using xhr

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://counterapi.com/api/mysite.com/view/product123");
xhr.responseType = "json";
xhr.onload = function() {
    document.getElementById('visits').innerText = this.response.value;
}
xhr.send();

using jquery

$.getJSON("https://counterapi.com/api/mysite.com/view/product123", function(response) {
    alert(response.value + ' views on product #123')
    $("#visits").text(response.value);
});

---

faq

Data privacy 🕵️

We don't like tracking. We anonymize all personal data (IP adresseses and browser details) into untrackable hashes. We don't sell data & we don't work with any advertisers; we just provide simple counters and stats.

preventing content shift

To prevent your page content from shifting when the counter loads, we pre-set the counter height with this inline style style="min-height:44px". Alternatively, you can use the following CSS defenition (in framework like React, or if you're concerned with inline-styles creeping into your templates). In all cases, it is safe to remove that inline-style.

.counterapi{
  min-height:44px;
}

prevent cheating

It's possible to artificially boost pageviews, but not that easily.
We take various measure to detect abuses, duplicate pageviews, and spam-bots. We're doing an okay job: wannabe cheaters would need to waste quite some time reverse-engenieering our filters. And even then, they'll have limited mileage before getting caught. Without captchas or user authentification, there will always be giant holes in the security, so it's best not to run presidential election with our free tools. This public approach remains a pretty good tradeoff beteween friction and reliability.

If you want to more robust data-handling, we can adjust the filter and aggregation settings for your projects. You can also authenticate all your pageviews and votes with encrypted userIds.

Dependencies

The JS library doesn't load third party JS. The only dependency is jQuery and we want to convert everything to pure JS for obvious reasons.