How to visualize visitor statistics in React and Next Js websites?

Are you looking to visualize visitor statistics on your website built with React or Next.js? Recently, I came across a third-party map widget provider called RevolverMap, which offers various customizable options to display visualizations. While they provide clear instructions on how to install these widgets in popular web application frameworks, there is a lack of guidance specifically for React and Next.js. In this article, I will share how I encountered this issue and successfully resolved it.

Fig 1: RevolverMaps Standard GL

When developing a website using Next.js version 13.4, I decided to use the RevolverMaps Standard GL widget from their “Get a Widget” section. I customized the globe to my liking and proceeded with the implementation.

After selecting all the customization options (you can leave some as default if you prefer), there’s a section titled “4. Copy the Code to Your Site…” which provides a <script>...</script> code to be copied into your website. While copying this code for HTML is straightforward and may include instructions, the challenge lies in adapting it for React.js or Next.js.

Since I implemented this in Next.js (V 13.4), I will explain how to install the widget in Next.js using the <script>...</script> code. React.js is quite similar, so you should be able to adapt the code for React.js with ease.

Let’s assume the <script>...</script> code for this article is as follows:

<script type="text/javascript" src="//rf.revolvermaps.com/0/0/8.js?i=5wm*****1mh&amp;m=0&amp;c=ff0000&amp;cr1=ffffff&amp;f=arial&amp;l=33" async="async"></script>

To integrate this widget using a hook in React or Next.js, we’ll first need to import the required libraries. Here’s how you can modify the <script>...</script> code:

'use client'
import React, { useEffect } from 'react';

Once the necessary libraries are imported, the function for the hook will be written. Prior to that, we will modify the script.src by following the <script>...</script>code as shown below:

script.src = '//rf.revolvermaps.com/0/0/8.js?i=5wm*****1mh&m=0&c=ff0000&cr1=ffffff&f=arial&l=33'

Now, we’ll write a function for the hook:

useEffect(() => {
    // Add your script here
    const script = document.createElement('script');
    script.src = '//rf.revolvermaps.com/0/0/8.js?i=5wm*****1mh&m=0&c=ff0000&cr1=ffffff&f=arial&l=33';
    script.async = true;
    // Load the script inside the specific div with the id "mapContainer"
    const mapContainer = document.getElementById('mapContainer');
    if (mapContainer) {
      mapContainer.appendChild(script);
    }
    return () => {
      // Remove the script when the component unmounts
      if (mapContainer && mapContainer.contains(script)) {
        mapContainer.removeChild(script);
        }
      };
    }, []);

In the JSX code, we include the <div> where the widget will be loaded:

<div id="mapContainer">
    {/* The globe script will be loaded inside this div */}
</div>

Fig 1: RevolverMaps

If you want to customize the alignment or apply additional styles, you can nest the mapContainer div inside another <div>. Then, you can make the desired adjustments to the new <div> to achieve your desired visual effects.

By following these steps, I was able to address and resolve the issue. I hope you find this guide helpful for visualizing visitor statistics in your React or Next.js websites.

Find me on LinkedIn, GitHub, and Twitter.

My Personal website: https://tonmoytalukder.github.io/.