How to add privacy-focused web analytics to Vue JS application

You can easily deploy Wide Angle Analytics in your Vue web application using one of two approaches, by

1. using Wide Angle Analytics Vue plugin (recommended), or
2. by adding a script tag to your Vue application configuration.

Wide Angle Analytics Vue Plugin

Our team publishes an up-to-date NPM package that enables web analytics with in just few quick and easy steps.

First, install the NPM package in your Vue application

npm -i wideangle-vuejs

Next, enable Wide Angle Vue plugin by registering it with your Vue app.

import WideAngle from 'wideangle-vuejs';

app.use(WideAngle, {
   siteId: 'XXXXXXXXXXXX',
   domain: 'stats.wideangle.co'
});

You need to provide siteId and domain parameters, as we cannot provide sensible defaults for these. You will find this information in your site details.

There are additional optional settings.

• fingerprint - Should script use browser fingerprinting; this might require collecting consent depeing on the applicable laws.
• supressDnt - Should script ignore Do Not Track browser setting. If not enabled, not events will be sent if user's browser has DNT enabled.
• includeParams - An array of query parameters that can be passed as part of a tracking event. By default only utm_* and ref parameters are passed in the event.
• excludePaths - An array of URL paths that should not trigger default events such as page view, page leave.
• ignoreHash - If enabled, a change in the URL fragment will not trigger the page view event.

These settings are compatible with Site Configuration, we discuss in detail Site Configuration documentation page.

Advanced usage

The plugin will provide and instance of Wide Angle Analytics SDK. You can inject this instance, the waa in your component and send custom events directly from internal component method.

<template>
  <button @click="sendEvent()">Send Event</button>    
</template>

<script setup>
import { inject } from 'vue'
const waa = inject('waa');
const sendEvent = async () => {
  const params = {
    session: 'cjhw92nf9aq',
    cohort: 'c1233'
  }  
  waa.value.dispatchEvent('interest', params);  
}
</script>

Due to lazy loading of Wide Angle Analytics script, the waa instance is provided inside a reference, ref.

We are providing a full developer documentation on the NPM package page. If you would like to report an issue or request a feature, you can contact our support or create a GitHub issue in wideangle-vuejs project.

Working Example

The plugins Github repository contains a full, working sample project. It is a demonstration of how to use Wide Angle Analytics with Vue 3 project to:

1. track page views,
2. track clicks with nocode approach, and
3. send custom events from JavaScript method.

Configure Vue Application to Enable Web Analytics script

An alternative to the plugin approach is similar to what we describe in the Custom Website integration documentation.

We want to inject a script tag in the rendered HTML. We can't, however, add a script tag in the Vue template.

A proper Vue approach is to configure the main application component, in the /app.vuefile, to add script to the head.

<script setup>
useHead(
{
    script: [
        {
            src: "https://stats.wideangle.co/script/XXXXXXXXXXXX.js", 
            async: "true", 
            defer: "true",
            "data-waa-dnt-supress": "'false'", // false by default
            "data-waa-fingerprint": "'false'" // false by default
        }
    ]
});
</script>

By adding a script this way, you will automatically get page view, clicks, and download tracking in your Vue application.