dashboard logoDocs
Getting startedIntegrationsFrameworks

Vue

Alytica Analytics Integration for Vue

Overview

Alytica is a privacy-conscious web analytics tool specifically designed for Vue applications. With its lightweight script and comprehensive tracking capabilities, Alytica helps developers gain deep insights into user interactions and application performance.

Key Features

  • Automatic page view tracking
  • Custom event tracking
  • Vue 2 and Vue 3 compatibility
  • Minimal performance overhead
  • Seamless client-side integration

Integration Steps

1. Create a Project

First create a project from your Alytica dashboard by clicking the button "New Website"

2. Script Injection Methods

Option 1: index.html (Global Injection)

In your public/index.html, add the Alytica script:

<!DOCTYPE html>
<html>
<head>
  <script 
    src="https://alytica.tech/js/tracker.js"
    data-website-id="YOUR_WEBSITE_ID" 
    data-domain="yourdomain.com"
  ></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

Create an Alytica tracking plugin:

// alytica-plugin.js
export default {
  install(app) {
    const script = document.createElement('script');
    script.src = 'https://alytica.tech/js/tracker.js';
    script.setAttribute('data-website-id', 'YOUR_WEBSITE_ID');
    script.setAttribute('data-domain', 'yourdomain.com');
    document.body.appendChild(script);
 
    // Vue 3 Global Method
    app.config.globalProperties.$alytica = (eventType, data) => {
      if (window.alytica) {
        window.alytica(eventType, data);
      }
    };
  }
}
 
// In main.js (Vue 3)
import AlyticaPlugin from './alytica-plugin';
app.use(AlyticaPlugin);

3. Custom Event Tracking

Vue 3 Composition API

<script setup>
import { onMounted } from 'vue';
 
function handleSignup() {
  window.alytica('signup', { 
    email:"user@email.com"
  });
}
</script>

If you want to use our revenue attribution features you will have to set up payment events on your payment confirmation page like this:

<script setup>
import { onMounted } from 'vue';
 
function handleSignup() {
  window.alytica('payment', { 
    email:"customer@email.com"
    amount:69.99
  });
}
</script>

You can use the global window.alytica() function to track not only signups and payments, but also any event with any custom data

<script setup>
function handleAddToCart(product) {
  window.alytica('add_to_cart', { 
    productId: product.id,
    productName: product.name,
    price: product.price,
    quantity: 1,
  });
}

Vue 2 Options API

<script>
export default {
  methods: {
    trackPayment() {
      window.alytica('payment', { 
        amount: 49.99, 
        product: 'subscription' 
      });
    }
  }
}
</script>

Best Practices

  • Initialize tracking early in the app lifecycle
  • Use global methods consistently
  • Avoid tracking sensitive user data
  • Keep event payloads lightweight

Testing Your Integration

  1. Click the Verify Script button in the setup form. This will automatically check if the script is correctly installed and configured on your website.
    • If successful, you'll see a "Verification Successful" message.
    • If it fails, review the script placement and domain settings, then try again.
  2. Check Network tab for https://alytica.tech/api/track-visit calls
  3. Verify custom events are being sent
  4. Use Alytica's dashboard for comprehensive insights

Performance Considerations

  • Alytica script is async and non-blocking
  • Minimal overhead on application performance
  • No impact on initial page load times

Conclusion

Alytica offers a developer-friendly, performant analytics solution for Vue applications. By following these integration steps, you'll gain valuable insights into user behavior with minimal configuration complexity.

Visit Alytica Dashboard →