Script Tag/Web

The Alytica Web SDK provides a simple way to track user behavior on your website by embedding a script tag. This document details the installation process and explains how to use the Web SDK within your project.

Overview

The Alytica JavaScript SDK allows you to track user interactions, page views, web vitals, and custom events on your website. This documentation covers all available methods and configuration options.

Installation

Direct Script Installation

Add the following code to the <head> section of your HTML:

<script>
  window.alytica = window.alytica || { q: [] };
  window.alytica.q.push(['init', {
    clientId: 'YOUR_CLIENT_ID',
    // Optional configurations
    trackPageViews: true,
    trackWebVitals: true,
    trackOutgoingLinks: true,
    trackAttributes: true
  }]);
</script>
<script src="https://your-alytica-script-url.js" async></script>

Configuration Options

When initializing the SDK, you can provide several configuration options:

Option	Type	Default	Description
`clientId`	String	Required	Your Alytica Client ID
`clientSecret`	String	Optional	Your Alytica Client Secret
`trackPageViews`	Boolean	`false`	Automatically track page views
`trackWebVitals`	Boolean	`false`	Track Web Vitals metrics
`trackOutgoingLinks`	Boolean	`false`	Track clicks on external links
`trackAttributes`	Boolean	`false`	Track elements with data-track attributes
`trackHashChanges`	Boolean	`false`	Track hash changes as page views
`debug`	Boolean	`false`	Enable debug mode
`disabled`	Boolean	`false`	Disable tracking entirely
`waitForProfile`	Boolean	`true`	Queue events until ready() is called
`processProfiles`	Boolean	`true`	Process user profiles on the server

Core Methods

Track Events

window.alytica('track', 'event_name', { 
  // Optional properties
  property1: 'value1',
  property2: 'value2'
});

Identify Users

window.alytica('identify', 'user_id', {
  // Optional user properties
  email: 'user@example.com',
  name: 'John Doe',
  plan: 'premium'
});

Create Aliases

window.alytica('alias', 'user_id', 'alias_id');

Get Distinct ID

const distinctId = window.alytica('getDistinctId');

Reset User

Resets the current user and generates a new anonymous ID:

window.alytica('reset');

Set Global Properties

Add properties to all subsequent events:

window.alytica('setGlobalProperties', {
  app_version: '1.2.3',
  theme: 'dark'
});

Manual Page View

Manually track a page view:

window.alytica('pageView', '/path', {
  // Optional additional properties
  referrer: 'https://example.com',
  title: 'Page Title'
});

Ready

Process queued events when tracking is initially configured with waitForProfile: true:

window.alytica('ready');

Automatic Tracking

Web Vitals Tracking

When trackWebVitals: true is set, the SDK automatically tracks:

Cumulative Layout Shift (CLS)
Largest Contentful Paint (LCP)
First Contentful Paint (FCP)
Interaction to Next Paint (INP)

Events are sent with the name $web_vitals and include:

$metric_name: The name of the metric
$metric_value: The value of the metric
$metric_rating: The performance rating (good, needs improvement, poor)
$metric_delta: The change in the metric value

Page View Tracking

When trackPageViews: true is set, page views are tracked automatically on:

Initial page load
History API changes (pushState, replaceState)
popstate events
Hash changes (if trackHashChanges: true)

Events are sent with the name $pageview and include:

$path: Current URL
$title: Page title
Other global properties

Outbound Link Tracking

When trackOutgoingLinks: true is set, clicks on external links are tracked automatically.

Events are sent with the name $linkOut and include:

href: The link destination
text: The link text or title

Data Attribute Tracking

When trackAttributes: true is set, clicks on elements with data-track attributes are tracked automatically:

<button data-track="signup_click" data-plan="premium" data-source="homepage">
  Sign Up
</button>

This generates an event named signup_click with properties:

plan: "premium"
source: "homepage"

The SDK uses cookies to store user and session information:

Cookie name format: alytica_[clientId]
Default expiration: 365 days
Contains:
- Distinct ID
- Session information
- Initial user properties

Session Management

Sessions expire after 30 minutes of inactivity
New sessions generate events with updated session IDs
Event counts are maintained per session

Debugging

When debug: true is set:

Events are logged to the console
The Alytica logo is displayed in the console

Browser Compatibility

The SDK is compatible with all modern browsers that support:

fetch API
Promise
crypto.randomUUID()
ES6 features

Advanced Usage Examples

E-commerce Tracking

// Track product view
window.alytica('track', 'product_viewed', {
  product_id: '12345',
  product_name: 'Wireless Headphones',
  price: 99.99,
  currency: 'USD',
  category: 'Electronics'
});
 
// Track add to cart
window.alytica('track', 'add_to_cart', {
  product_id: '12345',
  product_name: 'Wireless Headphones',
  price: 99.99,
  quantity: 1,
  total: 99.99
});
 
// Track checkout
window.alytica('track', 'checkout_started', {
  cart_id: 'cart_12345',
  total_items: 2,
  total_value: 149.98,
  currency: 'USD'
});
 
// Track purchase
window.alytica('track', 'purchase_completed', {
  order_id: 'ORDER-123456',
  total: 149.98,
  shipping: 5.99,
  tax: 12.50,
  currency: 'USD',
  payment_method: 'credit_card',
  items: [
    {
      product_id: '12345',
      product_name: 'Wireless Headphones',
      price: 99.99,
      quantity: 1
    },
    {
      product_id: '67890',
      product_name: 'Phone Case',
      price: 49.99,
      quantity: 1
    }
  ]
});

Form Tracking

// Track form submissions
document.querySelector('form').addEventListener('submit', function(e) {
  window.alytica('track', 'form_submitted', {
    form_name: 'contact_form',
    form_id: this.id,
    form_fields: ['name', 'email', 'message']
  });
});

Custom User Properties

// Set user preferences
window.alytica('identify', userId, {
  email: userEmail,
  name: userName,
  preferences: {
    theme: 'dark',
    notifications: true,
    language: 'en'
  },
  subscription: {
    plan: 'premium',
    startDate: '2023-01-15',
    paymentFrequency: 'monthly'
  }
});

Script Tag/Web

On this page