Skip to main content

Connect Your Website to Fan Capture

Install the AndR website snippet to record page views, sessions and engagement, capture contact details from existing website forms and connect website visits to Fan Links.

Fan Links show who a link reached. The artist website is often where those fans land next, and until now that part of the journey sat outside AndR. With the AndR website snippet installed, page views, sessions and active time on the site feed into Fan Capture, contact details fans submit through the site's existing forms land in the Fan List, and a fan who moves from a Fan Link to the website can be recognized as the same visitor on both.

What the snippet records

  • Page activity: page views, sessions and active engagement time, including navigation on single-page websites.

  • Existing forms: names, email, phone, WhatsApp and social or contact fields fans submit through the forms already on the site, including forms that load after the page and supported HubSpot and Mailchimp forms. Ambiguous or unsupported fields are skipped. Fans captured this way appear in Audience, Fan List and count as Identified Fans.

  • Visits across sites: when a fan clicks from one participating site to another, for example from a Fan Link to the artist website, a short-lived encrypted token in the link connects the two visits. The token carries no contact details.

Purchases and completed checkouts are not tracked yet. Shop tracking needs a separate integration.

Step 1: Ask the AndR team to register your website

For now, the AndR team registers websites and manages their settings for you. Send your AndR contact:

  • Every hostname that serves pages, written exactly as visitors see it. artist.com, www.artist.com and shop.artist.com each need their own registration. An address that only redirects to a registered site does not.

  • Where you will install the snippet: the website builder's site-wide header, or a tag manager.

  • Whether the site has a cookie banner, and which one.

  • Whether you want cookies and form capture on. Both are on by default, so say so if you want either switched off.

You get a website ID for each hostname. It starts with fcw_. The ID is a public installation identifier, so it is safe to put in your site code.

Step 2: Choose how tracking starts

There are two ways to install the snippet. If the artist has a meaningful share of fans in Europe, use Option B, so your cookie banner decides when tracking starts. The same reasoning applies as for cookie consent on Fan Links.

Option A: Start tracking when the page loads

Use this only when the website's privacy setup allows tracking from the first page load. analytics: true starts tracking straight away. It does not ask visitors for consent.

<script>
window.andr = window.andr || function () {
(window.andr.q = window.andr.q || []).push(Array.from(arguments));
};

andr('init', 'fcw_YOUR_WEBSITE_ID', {
analytics: true
});
</script>

<script async src="https://fans.andrmusic.co/a.js"></script>

Option B: Connect your cookie banner

This version waits until your banner supplies the visitor's analytics choice:

<script>
window.andr = window.andr || function () {
(window.andr.q = window.andr.q || []).push(Array.from(arguments));
};

andr('init', 'fcw_YOUR_WEBSITE_ID');
</script>

<script async src="https://fans.andrmusic.co/a.js"></script>

Your banner then calls one of two methods. When analytics is accepted:

andr('consent', true);

When analytics is declined or withdrawn:

andr('consent', false);

Connect these calls to the banner's analytics category, including its saved-choice callback on every page, and call them again whenever the visitor changes their choice. Accepting essential cookies only should leave analytics off. AndR does not detect your banner or read its settings, so the calls are the only connection. They can run before the external script has finished loading.

If the banner already knows the choice before the snippet runs, you can pass { analytics: true } or { analytics: false } in init and keep using andr('consent', ...) for later changes. Never combine Option B with a second snippet that starts tracking on its own.

Analytics choice

Cookies setting

What happens

Pending

On or off

Waits for the choice. No page analytics, no visit handover and no tracking cookies.

Declined

On or off

Stops page analytics and visit handover, and clears AndR tracking cookies on the current site.

Accepted

Off

Tracks page activity and handovers, keeping the visitor in memory only. Recognition does not survive a reload or a later visit.

Accepted

On

Tracks page activity and handovers, and sets first-party cookies so returning visitors are recognized.

With form capture on, details a fan submits through a form are captured even while analytics is pending or declined, because the fan chose to submit them. andr('consent', false) leaves form capture running. A captured contact is not permission to send marketing: that still needs the fan's opt-in on the form itself.

For an all-or-nothing setup, let the banner block the AndR script until the visitor accepts. On withdrawal, call andr('consent', false) and then andr('destroy'), which stops the tracker including form capture, and reload the page before tracking starts again. Requests already sent cannot be recalled.

Step 3: Install the snippet in one place

  • Paste it before the closing </head> tag, or into the website builder's site-wide header or custom code area, so it runs on every page.

  • Replace fcw_YOUR_WEBSITE_ID with the ID for that hostname.

  • Use one installation per page. If you use a tag manager, install it there and leave it out of the site code, or every visit counts twice.

  • Publish the website.

Later changes to the website's settings reach open pages on their next background refresh, so the snippet never needs replacing.

Website settings

Ask the AndR team to change any of these. The snippet itself stays the same.

Setting

What it does

Default

Cookies

Allows first-party visitor and session cookies once analytics is accepted. Off keeps the visitor in memory only.

On

Form capture

Captures recognized contact and profile fields from eligible forms.

On

Page views

Records the first view on each page that has the snippet.

On

Navigation tracking

Adds page views when a single-page website changes path without reloading.

On

Engagement

Measures active time while the page is visible and in focus, pausing after inactivity.

On

Included and excluded paths

Limits collection to selected parts of the site. Exclusions win over inclusions.

No limits

Existing forms

With form capture on, AndR reads eligible forms at the moment they are submitted, including forms added after the page loads. The forms themselves need no changes.

  • Captured: names and supported profile fields, plus email, phone, WhatsApp, Instagram, TikTok, YouTube, Spotify, Discord and website fields.

  • Never captured: message text, passwords, payment fields and other recognizable sensitive fields. Values are read on submit, never while a fan is typing.

  • What a capture means: on an ordinary form, a valid submission attempt. It does not confirm that the site accepted the form or that a newsletter sign-up was confirmed. Supported HubSpot and Mailchimp forms use their success signal where one is available.

  • Embedded forms: forms in accessible frames and open shadow roots are covered. Some third-party embeds are sealed off by the provider or the browser and need a supported integration or a developer's success callback. Coverage of third-party embeds is best effort.

Exclude a form

Add data-andr-ignore to the form or the element around it:

<form data-andr-ignore>
...
</form>

Correct a field

When a field is not recognized automatically, a developer can label it:

<input name="subscriber" type="email" data-andr-field="ffd_email">
<input name="given" data-andr-field="first_name">

Developers can also set form selectors, field mappings and success-only capture through the forms option in init, along with manual tracking calls and success callbacks. Ordinary forms need none of this.

Check your installation

  1. Open a page on the registered hostname in an up-to-date browser.

  2. With Option B, accept analytics in your banner.

  3. Visit a second page. Website activity shows up in AndR after processing, so allow some time.

  4. If form capture is on, submit a test contact through a form and check that it appears in the Fan List. Use a test address, never a real fan's details.

For a technical check, open the browser's developer console and run:

andr('status');

The result shows ready, analytics, forms and queued. ready: true means the website's settings loaded, which does not yet prove an event arrived. analytics: null means the snippet is still waiting for a banner choice. forms: true means form capture is active on this page. The result never contains contact details or tokens.

Read your website results

Fans who submit a website form land in Audience, Fan List, next to fans from Form links, and count as Identified Fans. Check the Consent column before you export them, as with any other fan. See From Form Sign-Up to Your Email List.

Page-level results are available through the AndR connector in Claude, ChatGPT or Copilot, and through the AndR API. For each website you get views, sessions, captured fans and consents for the period. For each page you get views, sessions and active time. Questions to start with:

  • "Show the most visited pages on our website over the last 28 days."

  • "Which pages hold attention longest, by average active time?"

  • "How many fans did the website capture this month, and how many gave consent?"

Two things to keep in mind. One session can cover several pages, so adding page sessions together overstates site visits. Active time counts only the time the page was visible and in use, which is shorter than the time a tab stayed open.

Common questions

Nothing is recorded. Check the website ID, the exact hostname, the installation option and the banner callback. If andr('status') shows analytics: null, the banner has not supplied a choice yet.

andr is undefined. The snippet was not published, or the external script is blocked by an ad blocker or the site's security policy.

The status result does not appear. Before the script loads, andr('status') is queued. Wait a moment and run it again.

Analytics works but no cookies appear. Ask the AndR team to switch cookies on and make sure analytics was accepted. Browser privacy settings can still block storage.

A form is not captured. Check that form capture is on, that the form and its path are not excluded, that the test values are valid and that the embed is accessible or supported. Sensitive forms and ambiguous fields are skipped on purpose.

Activity is counted twice. The snippet is installed in two places, usually the site code and a tag manager, or manual page calls were added on top of automatic tracking.

Can I use one ID on the shop or another domain? Each hostname needs its own registration and ID.

What is __andr_h in a link? The short-lived encrypted token that connects a visit across participating AndR sites. It holds no contact details.

Which browsers work? Modern browsers with JavaScript on. Blockers, private browsing, in-app browsers and browser privacy tools can limit collection and recognition.

Our site uses a strict Content Security Policy. Allow https://fans.andrmusic.co in script-src and https://fc.andrmusic.co in connect-src. The inline part of the snippet also needs your site's nonce or hash. If inline code is not possible, use the script-only version below for Option A. Banner callbacks need the full snippet.

<script async
src="https://fans.andrmusic.co/a.js"
data-andr-id="fcw_YOUR_WEBSITE_ID"
data-andr-analytics="true">
</script>

Getting help

Send your AndR contact the website URL, the website ID, the installation option, the browser, what went wrong and the result of andr('status'). Use test contacts, and never send fan contact details or handover tokens in a support message.

Related reading

Did this answer your question?