@aranova/tracking-browser

v0.7.2

Published

6 days ago

Aranova tracking global browser script (CDN / <script> install). Serve via jsDelivr, not as an npm import.

0High
0Medium
0Low

riteshahlawat

@aranova/tracking-browser

Global browser script for Aranova tracking on sites that cannot use the React or Next.js packages.

This package is intended for CDN/script-tag installs, not application imports.

Install

Place the script in the document <head> before the rest of the page can run.

<script src="https://cdn.jsdelivr.net/npm/@aranova/tracking-browser@0/dist/browser/aranova-tracking.global.js"></script>
<script>
  window.AranovaTracking.init({
    apiKey: 'aranv_pk_...',
    endpoint: 'https://api.internal.aranova.io/tracking',
    gtagId: 'AW-XXXXXXXXXX',
    renderConsentBanner: true,
    triggers: {
      automatic: {
        page_view: {},
        time_on_site: { thresholdSeconds: 60 },
        specific_page_visit: {
          pages: [
            { name: 'contact_page', pathPattern: /^\/(contact|book|get-started)/ },
          ],
        },
      },
      manual: {
        form_submit: {},
        phone_click: {},
        cta_click: {},
      },
    },
  });
</script>

Pin an exact version for production when possible, for example @aranova/[email protected].

Multiple gtag IDs

To install multiple Google Ads tags simultaneously (for example a production MCC and a test MCC for verifying conversion actions before they touch the live account), pass gtagIds instead of gtagId. Every entry fires gtag('config', ...) on every page — gtag natively supports multiple configured tags.

<script>
  window.AranovaTracking.init({
    apiKey: 'aranv_pk_...',
    endpoint: 'https://api.internal.aranova.io/tracking',
    environment: 'production',  // 'production' | 'development'
    gtagIds: {
      production: 'AW-111111111',  // real client account
      test: 'AW-222222222',         // test MCC for development
    },
    triggers: {
      automatic: { page_view: {} },
    },
  });
</script>

The labels are arbitrary and surface in the Aranova dashboard's SDK versions table. environment lets the dashboard filter test traffic out of production analytics.

Manual Events

The browser package validates manual events at runtime. If an event is not registered under triggers.manual, or the metadata shape is invalid, the SDK warns and drops the event.

<form id="lead-form" action="/api/lead">
  <select name="service_interest" aria-label="Service interest">
    <option value="cleaning">Cleaning</option>
    <option value="teeth_whitening">Teeth whitening</option>
  </select>
  <label>
    <input name="is_existing_patient" type="checkbox" />
    Existing patient
  </label>
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('lead-form').addEventListener('submit', function (event) {
    var form = event.currentTarget;
    var data = new FormData(form);

    window.AranovaTracking.trackEvent('form_submit', {
      form: {
        id: form.id,
        action: form.getAttribute('action'),
        fields: [
          {
            name: 'service_interest',
            type: 'select',
            label: 'Service interest',
            value: String(data.get('service_interest') || ''),
          },
          {
            name: 'is_existing_patient',
            type: 'checkbox',
            label: 'Existing patient',
            value: data.get('is_existing_patient') === 'on',
          },
        ],
      },
      page: { path: window.location.pathname },
    });
  });
</script>

fields[].value can be any JSON value: string, number, boolean, null, array, or object. Only send reviewed, allowlisted, non-sensitive values; do not send names, emails, phone numbers entered by the visitor, addresses, payment data, medical details, passwords, file contents, or free-text messages.

<a href="tel:+14165550199" onclick="window.AranovaTracking.trackEvent('phone_click', {
  phone_number: '+14165550199',
  page: { path: window.location.pathname },
  section: 'header'
})">
  (416) 555-0199
</a>

Global API

window.AranovaTracking.init(config);
window.AranovaTracking.trackEvent(eventType, metadata);
window.AranovaTracking.captureTrackingParams();
window.AranovaTracking.getTrackingParams();
window.AranovaTracking.getConsentState();
window.AranovaTracking.setConsentState('granted');
window.AranovaTracking.setConsentState('denied');

Automatic Events

Configured automatic events are fired by the SDK:

page_view
time_on_site
specific_page_visit
scroll_depth
multi_page_session
form_start

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@aranova/tracking-browser

Install

Multiple gtag IDs

Manual Events

Global API

Automatic Events