Vue.js Installation Guide

Step-by-step guide to install TwoBucks Analytics on Vue.js.

Quick Start

Add the TwoBucks script to your index.html:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <script
      src="https://twobucks.ai/script.js"
      data-website-id="your-website-id"
      async
    ></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Vue Router Setup

TwoBucks automatically tracks Vue Router navigation. No additional setup needed for:

router.push() and router.replace()
<router-link> navigation
Browser back/forward buttons

Component Tracking

Track events in your Vue components:

<!-- components/Button.vue -->
<template>
  <button @click="handleClick">
    {{ text }}
  </button>
</template>

<script>
export default {
  props: ['text'],
  methods: {
    handleClick() {
      if (window.twobucks) {
        window.twobucks('button_click', {
          button_text: this.text,
          page: this.$route.path
        })
      }
    }
  }
}
</script>

Composition API

Track events using the Composition API:

<!-- components/ProductPage.vue -->
<template>
  <div>Product Page</div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

onMounted(() => {
  if (window.twobucks) {
    window.twobucks('product_view', {
      product_id: route.params.id
    })
  }
})
</script>

Plugin (Optional)

Create a Vue plugin for easier access:

// plugins/twobucks.js
export default {
  install(app) {
    app.config.globalProperties.$track = (eventName, properties) => {
      if (window.twobucks) {
        window.twobucks(eventName, properties)
      }
    }
  }
}

// main.js
import { createApp } from 'vue'
import TwobucksPlugin from './plugins/twobucks'
import App from './App.vue'

const app = createApp(App)
app.use(TwobucksPlugin)
app.mount('#app')

// Usage in components
this.$track('event_name', { property: 'value' })

Common Issues

Script Not Loading

Ensure script is in index.html <head> section
Check browser console for errors
Verify data-website-id is correct

Route Changes Not Tracked

TwoBucks automatically tracks Vue Router changes. If routes aren't tracked:

Ensure you're using Vue Router (not window.location)
Check that script loads before app initialization

Nuxt.js

For Nuxt.js, add to nuxt.config.js:

// nuxt.config.js
export default {
  head: {
    script: [
      {
        src: 'https://twobucks.ai/script.js',
        'data-website-id': 'your-website-id',
        async: true
      }
    ]
  }
}