How to install Attriboo on Vue

Before you start

This method covers a Vue/Vite browser app. If the project uses Nuxt, use the Nuxt guide instead. You need access to the source project and the production deployment.

Add the published domain in Attriboo. Keep one tracking installation and preserve your site’s consent choices. Your website ID is public; private API keys do not belong in the page script.

Copy the script for this website

1. 1
   Choose your website in Attriboo.

   Check the address in the website selector. Add the website first if it is not listed.

2. 2
   Open Setup and choose Vue.

   Under Add the tracking script to your website, find Where is your site built? Choose this platform, then use Copy beside Your code. This gives you the right code format with your website ID filled in.

Add Attriboo to Vue

1. 1
   Open index.html in the Vite project root.

   For an older Vue CLI project, check public/index.html instead.

2. 2
   Paste the HTML script from Setup before </head>, leaving the Vue mount element and module entry script in place.
3. 3
   Build and deploy the project.

   Test the public domain rather than a local development address.

<script defer data-site-id="site_YOUR_WEBSITE_ID" src="https://www.attriboo.com/t.js"></script>

Check this platform’s behavior

Do not put the loader in a v-html block or reload it from a route watcher. Standard pathname changes and #/ or #! hash routes are supported. Ordinary anchors and changes to only the query string are not new pageviews.

Check that page visits reach Attriboo

1. 1
   Open the published website in another tab.

   Use the address your customers visit. Make your normal tracking choice if a consent banner appears.

2. 2
   Return to the same website in Attriboo → Setup.

   Select Test Connection. Look for a successful result such as Verified Live or activity on the correct address.

3. 3
   Follow an internal link, then use your browser’s Back button.

   Check those paths in the Pages view for the current reporting dates. Allow the reports to refresh. An active connection alone does not confirm every page change.

• Check your first visit
• Troubleshoot missing visits

Connect visits to recorded revenue

Installing the script records website activity. To bring sales into Attriboo, connect the service you use to collect payments in Setup as well. Then compare the recorded sources and customer journeys behind your sales.

A payment imported from before tracking was installed may have no matching visit. Installing today does not recreate old website activity.

• Connect your payment provider
• See supported integrations

Vue references

These placement instructions were reviewed against the platform’s documentation and Attriboo’s current tracker. Check the published site after deployment, theme changes or navigation changes.

• Vue quick start and Vite projects
• Vite index.html entry point