vantevo-analytics-react v1.0.2

The analytics of your website, but simpler

Vantevo Analytics is the alternative platform to Google Analytics that respects privacy, because it does not need cookies not compliant with the GDPR. Easy to use, light and can be integrated into any website and back-end.

For more information visit the website vantevo.io.

This package can be integrated into any react framework: next.js, gatsby or other.

Installation

npm install vantevo-analytics-react

Start

...
import VantevoProvider from "vantevo-analytics-react";
...
 
export default function App() {
 ...
 return (
   <VantevoProvider options={{}}>
     ...
  </VantevoProvider>
 );
}

These are the parameters available for the tracker settings, all fields are optional.

Page view monitoring and event managemenent

Submit a pageview using location.href as the request URL anddocument.title for the page title.

Simple Pageview

...
import useVantevo from "vantevo-analytics-react";
...
 
export default function Page(){
   const { vantevo } = useVantevo();
 
   useEffect(() => {
       vantevo(); 
       /*** or ***/
       vantevo("pageview");
   },[]);
 
   return (...);
}

Pageview change pathname of url

You can send a custom pageview where you can change the page path. In the example below, the page URL is https://example.com/blog?page=2 with the pathname=/blog and the page=2 parameter (the page=2 parameter will be ignored, see the guide, using the pageview event with themeta parameter of type {path:"/blog/page/2"}, the script will save as page path:/blog/page/2.

...
import useVantevo from "vantevo-analytics-react";
...
 
export default function Page(){
   const { vantevo } = useVantevo();
 
   useEffect(() => {
       vantevo("pageview", { path: "/blog/page/2" }, () => {});
   },[]);
 
   return (...);
}

Pageview change title page

Vantevo uses document.title to get the full title of the page, in this example you will see how you can change the page title.

...
import useVantevo from "vantevo-analytics-react";
...

export default function Page(){
  const { vantevo } = useVantevo();

  useEffect(() => {
      vantevo("pageview", { title: "New Title Page" }, () => {});
  },[]);

  return (...);
}

Event

A simple example of how to send an event with the name "Download" and with the information meta_key=pdf andmeta_value=Presentation, the meta parameter is a simple json.

Vantevo Analytics manages the duration of an event (in seconds) using the meta_key=duration, the value of this field is of type Number. With the duration parameter it is possible to send a number (seconds) with the event that will be used to calculate the average duration of the event.

...
import useVantevo from "vantevo-analytics-react";
...
 
export default function Page(){
   const { vantevo } = useVantevo();
 
   useEffect(() => {
       vantevo("Download", { pdf: "Presentation" }, () => {});
       /*** or ***/
       vantevo("video", { title: "Presentation", duration: 30 }, () => {});
   },[]);
 
   return (...);
}

Parametri

Monitoring Ecommerce

In the ecommerce section of Vantevo you can monitor specific actions affecting your ecommerce website and the sources of traffic that lead to sales.

Parameters

List events

These are the events to use to monitor your ecommerce:

Example

An example for how to use the trackEcommerce function.

import useVantevo from "vantevo-analytics-react";

export default function Page(){
   const { trackEcommerce } = useVantevo();
 
   useEffect(() => {
        trackEcommerce("view_item", { 
            "items": [
                {
                    'item_id': "SKU_123",
                    'item_name': "Samsung Galaxy",
                    'currency': "EUR",
                    'quantity': 0,
                    'price': 199.99,
                    'discount': 0,
                    'position': 1,
                    'brand': "Samsung",
                    'category_1': "Smartphone",
                    'category_2': "Samsung",
                    'category_3': "Galaxy",
                    'category_4': "",
                    'category_5': "",
                    'variant_1': "Black",
                    'variant_2': "5.5 inch",
                    'variant_3': ""
                }
            ]
        });
   },[]);
 
   return (...);
}

Read our guide for more information of how to use the ecommerce tracking function.

Tracking Files Download

You can use enableTrackFiles() by monitoring file downloads on a specific page using useVantevo().

...
import useVantevo from "vantevo-analytics-react";
...
export default function Page(){
   const { enableTrackFiles } = useVantevo();
 
   useEffect(() => {
       const clearTrackFiles = enableTrackFiles("pdf,zip,mp4,avi", true);
       return () => {
           clearTrackFiles();
       }
   },[]);
 
   return (....);
}

Outbound links

You can use outboundLinks() by monitoring outbound links on a specific page using useVantevo().

...
import useVantevo from "vantevo-analytics-react";
...
export default function Page(){
   const { enableOutboundLinks } = useVantevo();
 
   useEffect(() => {
       const cleanOutboundLinks = enableOutboundLinks();
       return () => {
           cleanOutboundLinks();
       }
   },[]);
 
   return (....);
}

404 - Page Not Found

For the management of the 404 - Page Not Found page we have created a specific event. This function will automatically save a 404 event and thepathname of the page as a value.

You can find the information collected through this function on the Events page.

...
import useVantevo from "vantevo-analytics-react";
...
 
export default function Page(){
   const { vantevo } = useVantevo();
 
   useEffect(() => {
       vantevo("404");
   },[]);
 
   return (...);
}

Vantevo Analytics Guide

To see all the features and settings of Vantevo Analytics we recommend that you read our complete guide here.