DEV Community

Cover image for Analytics using Plausible
Akilesh
Akilesh

Posted on • Updated on

Analytics using Plausible

" This article is published using Lamento🍋

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 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

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

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>
    )
}


Enter fullscreen mode Exit fullscreen mode

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

  • 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

  • This dashboard will give a detail representation
    Image description

  • Top Sources (From where the traffic comes).

  • Pages (On what page the user entered, exit).

  • Location.

  • Devices, Browser, OS.
    Image description

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.

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

Top comments (0)