Vue.js Integration

Vue.js provides multiple integration points for adding tracking scripts, with the main entry file being the most common approach for global script loading.

Add tracking script to your Vue app

The recommended method is to add the script in your main entry file where you create your Vue application instance, ensuring it loads before your app initializes.

1. Open your main entry file, typically src/main.js
2. Add the script creation logic before creating your Vue app
3. Mount your app as usual:

import { createApp } from 'vue';
import App from './App.vue';

// Add Affonso tracking script
const script = document.createElement('script');
script.async = true;
script.defer = true;
script.setAttribute('data-affonso', 'YOUR_PUBLIC_PROGRAM_ID');
script.setAttribute('data-cookie_duration', 'YOUR_COOKIE_DURATION');
script.src = 'https://affonso.io/js/pixel.min.js';
document.head.appendChild(script);

createApp(App).mount('#app');

Find your Program ID →

Alternative: Use the mounted() lifecycle hook in your root App.vue component or add the script directly to your index.html file.

Testing

1. Start your development server: npm run serve or npm run dev
2. Visit localhost:8080?atp=test (or your dev server URL)
3. Check browser DevTools → Console → type window.affonso_referral
4. Deploy and verify tracking in your Affonso dashboard

Next Steps

Once installed, you can access affiliate referral data and pass it to your payment provider. Connect your payment provider →