How to install Attriboo on Angular

Before you start

You need access to the Angular project and its deployment. Find the application’s index file in angular.json; a standard project uses src/index.html. A workspace can contain several applications, so choose the one serving your public domain.

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 Angular.

   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 Angular

1. 1
   Check the application’s index setting in angular.json.

   Open that HTML file, normally src/index.html.

2. 2
   Paste the HTML script from Setup before </head>.

   Keep the existing base href, app root and Angular bootstrap code.

3. 3
   Build and deploy the application to the domain selected in Attriboo.

   An edit to the build output alone will be replaced on the next build.

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

Check this platform’s behavior

Do not add the loader to every Angular component or send another pageview on every NavigationEnd event. Test a direct entry, a router link and Back. If server rendering or a custom router changes the document, check that setup separately.

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

Angular 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.

• Angular project file structure
• Angular routing