Analytics using Plausible
Tags: analytics, webdev
Published: 2022-06-27 15:51:15

> " This article is published using [Lamento](https://www.lamento.in/)🍋

Plausible is a lightweight web analytics tool used to check your web traffic and also pinpoints from where the traffic comes from with clear visual charts and Email/Slack reports.

In this blog I used next.js for reference to show how plausible works, but plausible will work on any framework.

## Login/Create
Create a [plausible account](ttps://plausible.io/) to get started and click the add website button.

## Add a website
Enter your domain name in the text area (provide the domain name which you have access to) and location will be automatically set accordingly to your device location.

 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lt7wwf1k6bsbth2nzfy4.jpg)

## Code snippet
A code snippet will be generated from our previous details, and it needs to be pasted in our project's head.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6o4skzsguhdxqn5dttv.jpg)
 
> Let's add this script to our project in our way.

Create a meta.tsx file under the components directive and paste the below snippet.

```
import Head from 'next/head'

export default function Meta() {
    return (
        <Head>
            <script
                defer
                data-domain="akilesh.io"
                src="https://plausible.io/js/plausible.js">
            </script>
        </Head>
    )
}
```
  
Now you can import this meta component to your layout.tsx component if you have one. If not, you can add it to this component to other components which have access to all the pages.
> The ides here is to make the `<script>` tag accessible by the whole application.

## Domain dashboard
Go to your domain dashboard https://plausible.io/**your_domain_name** and stay relaxed. Plausible will handle all the complicated process and in a few seconds you will see your webpage's stats.

## Screen shot:

* This will be your dashboard until you get someone to visit your website.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7973h142mlz0svlrbcj.jpg)

* This is a line chart represents about the total visitors and also will identify unique visitors from the total traffic then the duration of the visiting period.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msuubpfjp7kgizvoyd3j.jpg)

* This dashboard will give a detail representation
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/215pq7m2w8u3vbqdo13s.png)
1. Top Sources (From where the traffic comes).
2. Pages (On what page the user entered, exit).
3. Location.
4. Devices, Browser, OS.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3rftmrsz55ljw9rfk3b.jpg)

We have successfully integrated an open source analytics tool into our web application. Now we can get to know about your traffic source from where it comes to on which device the user has viewed from.

To setup plausible manually from your hosting service subscribe to my [newsletter](https://akilesh.io).

> I'll promise to make it within next Monday plz bear with me.