vantevo-analytics-vue 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.

Official framework Vantevo Analytics for Vue & Nuxtjs

Installation

npm install vantevo-analytics-vue

Parameters

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

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:

Vue

To start tracking page views and events, you need add the plugin to your main.js file.

import { createApp } from 'vue';
import { VueVantevo } from 'vantevo-analytics-vue';
....

app.use(VueVantevo, {
    "excludePath": [],
    "dev": false,
    "hash": false,
    "domain": null,
    "manualPageview": false,
    "outboundLinks": false,
    "trackFiles": [],
    "saveExtensionFiles": true,
    "srcScript": null,
    "trackEcommerce": false
});
app.mount('#app');

How use manual pageview

<script>
  export default {
    mounted() {
      this.$vantevo("pageview");
      /** or **/
      this.$vantevo("pageview", { path: "/example" });
      /** or **/
      this.$vantevo("pageview", { path: "/example", title: "Title Page" }, () => {} );
    },
  };
</script>

How to create event

<script>
  export default {
    mounted() {
      this.$vantevo("name-event", { pdf: "Recipes" }, () => {});
    },
  };
</script>

Example monitoring ecommerce

An example for how to use the trackEcommerce function.

<script>
  export default {
    mounted() {
      this.$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': ""
                }
            ]
        }, () => {});
    },
  };
</script>

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.

<script>
  export default {
    mounted() {
      this.$vantevo("404");
    },
  };
</script>

Nuxtjs

To start tracking page views and events, you need add the plugin to your nuxt.config.js file. All settings are global will be available on all pages,

buildModules: [
    [
      "vantevo-analytics-vue",
      {
        "excludePath": [],
        "dev": true,
        "hash": false,
        "domain": null,
        "manualPageview": false,
        "outboundLinks": false,
        "trackFiles": [],
        "saveExtensionFiles": true
      },
    ],
  ],

How use manual pageview

<script>
  export default {
    mounted() {
      this.$vantevo.event("pageview", { path: "/example" }, () => {});
    },
  };
</script>

How to create event

<script>
  export default {
    mounted() {
      this.$vantevo.event("name-event", { pdf: "Recipes" }, () => {});
    },
  };
</script>

Example monitoring ecommerce

An example for how to use the trackEcommerce function.

<script>
  export default {
    mounted() {
      this.$vantevo.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': ""
                }
            ]
        }, () => {});
    },
  };
</script>

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.

<script>
  export default {
    mounted() {
      this.$vantevo.event("404");
    },
  };
</script>

Tracking Files Download

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

<script>
  export default {
    mounted() {
      const clearTrackFiles = this.$vantevo.enableTrackFiles("zip,mp4,avi", true);
    },
    beforeDestroy() {
      clearTrackFiles();
    },
  };
</script>

Outbound links

You can use enableOutboundLinks() by monitoring outbound links on a specific page.

<script>
  export default {
    mounted() {
      const cleanOutboundLinks = this.$vantevo.enableOutboundLinks();
    },
    beforeDestroy() {
      cleanOutboundLinks();
    },
  };
</script>

Vantevo Analytics Guide

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