Adding to your Vue.js website

Return to the docs

Vue.js is a popular framework for building web applications.

💡 The following component source-code is using the Composition API, available with Vue 3, 2.7, or 2.6 with Composition API package.

Create a new component called AbtzTracker.vue at your preferred component location. In this brand new component, paste the code below and save.

// AbtzTracker.vue

<template>
  <div class="abtz-analytics" />
</template>

<script setup lang="ts">
import { useAnalyticStore } from '@/domain/store';
import { useMaskEmail } from '@/use/maskEmail';

interface Props {
  token?: string;
}

const props = defineProps<Props>();
const IS_DEV = process.env.NODE_ENV === 'development';

const store = useAnalyticStore();

const setVisitorAttributes = () => {
  if (store.user && window.abtz) {
    const tracker = window.abtz;

    tracker.visitor.set({
      email: useMaskEmail(store.user.email as string),
      name: `${store.user.firstName} ${store.user.lastName}`,
      abtzAnalyticsID: store.user.id
    });
  }
};

const onLoadHandler = () => {
  setVisitorAttributes();
};

const onErrorHandler = () => {
  console.log('Abtz Analytics failed to load!');
};

if (typeof window !== 'undefined') {
  const script = document.createElement('script');

  script.src = IS_DEV ? 'http://localhost:3000/cs.js' : 'https://analytics.abtz.co/cs.js';
  script.async = true;
  script.setAttribute('id', 'abtzanalyticstag');
  script.onload = onLoadHandler;
  script.onerror = onErrorHandler;

  if (props.token) {
    script.setAttribute('data-token', props.token);
  }

  if (!document.getElementById('abtzanalyticstag')) {
    document.head.appendChild(script);
  }
}
</script>

// AbtzTracker.vue

<template>
  <div class="abtz-analytics" />
</template>

<script setup lang="ts">
interface Props {
  token?: string;
}

const props = defineProps<Props>();

const onLoadHandler = () => {
  console.log('Abtz Analytics is loaded!');
};

const onErrorHandler = () => {
  console.log('Abtz Analytics failed to load!');
};

if (typeof window !== 'undefined') {
  const script = document.createElement('script');

  script.src = 'https://analytics.abtz.co/cs.js';
  script.async = true;
  script.setAttribute('id', 'abtzanalyticstag');
  script.onload = onLoadHandler;
  script.onerror = onErrorHandler;

  if (props.token) {
    script.setAttribute('data-token', props.token);
  }

  if (!document.getElementById('abtzanalyticstag')) {
    document.head.appendChild(script);
  }
}
</script>

Next, import the newly created component into the App.vue or any other file that fits better. The file you're gonna import AbtzTracker into depends on how your project is organized.

E.g. 👇

// App.vue

<template>
// App.vue

<template>
  <section id="app">
    <!-- YOUR APP -->
    <AbtzTracker token="YOUR-TOKEN-HERE" />
  </section>
</template>

<script setup lang="ts">
import AbtzTracker from '@/path/to/AbtzTracker.vue';

// ... YOUR APP CODE
</script>

<style lang="scss">
#app { ... }
</style>

👆 Passing the token is optional in production, when calling Abtz Analytics from the same domain registered to your project. But, it will help you see if it's working while in development.

Your token can be retrieved in the settings page.

Done! 👏