> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zixflow.com/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript Snippet

> Add Zixflow to any website with a script tag — no bundler or npm install required.

The JavaScript snippet is the quickest way to send data from your website to Zixflow. Paste it into your site's `<head>`, and it loads the Zixflow browser SDK (version **1.1.8**) from `cdp.zixflow.com`.

> [!NOTE]
>
> Using React, Vue, Next.js, or another bundler? You can install the SDK as an npm package instead. See [Installation](https://docs.zixflow.com/documentation/sdk/javascript/installation.md).

## How it works

When people visit your website, you want to know who they are. The `identify` method gives a person a unique identity in Zixflow. After you identify someone, later calls in that browser session are linked to that person.

You can send events before you identify someone. These events are anonymous: the SDK gives each visitor an `anonymousId`. When you identify the person, Zixflow links their earlier anonymous activity to them, so you see their full history on your site.

### What the snippet does

* **On its own**, the snippet tracks anonymous page views, similar to Google Analytics.
* **With `identify`**, you know who each visitor is and can store details about them, like email and name.
* **With `track`**, you record the actions people take, such as signing up or making a purchase, and use them to trigger automations.

## Install the snippet

**1. Get your write key**

Copy the write key from your JavaScript source settings in Zixflow.

**2. Add the snippet to your site**

Paste this snippet into the `<head>` section of every page on your site. Replace `YOUR_WRITE_KEY` with your write key.

```html theme={null}
<script>
  !function(){var i="analytics",analytics=window[i]=window[i]||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Zixflow snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","screen","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware","register","deregister"];analytics.factory=function(e){return function(){if(window[i].initialized)return window[i][e].apply(window[i],arguments);var n=Array.prototype.slice.call(arguments);n.unshift(e);analytics.push(n);return analytics}};for(var n=0;n<analytics.methods.length;n++){var key=analytics.methods[n];analytics[key]=analytics.factory(key)}analytics.load=function(key,n){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.setAttribute("data-global-zixflow-analytics-key",i);t.src="https://cdp.zixflow.com/v1/analytics-js/snippet/"+key+"/analytics.min.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r);analytics._writeKey=key;analytics._loadOptions=n};analytics.SNIPPET_VERSION="1.1.8";
  analytics.load("YOUR_WRITE_KEY");
  analytics.page();
  }}();
</script>
```

The snippet loads `https://cdp.zixflow.com/v1/analytics-js/snippet/YOUR_WRITE_KEY/analytics.min.js` asynchronously. Until it finishes loading, the snippet queues your calls (`identify`, `track`, `page`, and the rest) and then sends them in order.

**3. Check that it works**

Load your website, open your browser's developer tools, and check the **Network** tab. You should see a request for `analytics.min.js` from `cdp.zixflow.com`, followed by a `page` request. You can also run this in the console:

```javascript theme={null}
analytics.ready(() => console.log('Zixflow is ready'))
```

Now you can use the snippet to identify people and send events to Zixflow.

> [!WARNING]
>
> Your write key is visible to anyone who views your page source. The key can only send data into Zixflow, but if that's a concern, send data from your server with the [Node.js SDK](https://docs.zixflow.com/documentation/sdk/nodejs/introduction.md) instead.

### Use a different global name

The snippet creates `window.analytics` by default. If another tool on your site already uses `window.analytics`, change the value of `i` at the start of the snippet, for example `var i="zixflowanalytics"`. Then call methods on that name, like `zixflowanalytics.track(...)`.

### Install with a tag manager

You can add the snippet with a tag manager like [Google Tag Manager](https://support.google.com/tagmanager/answer/6107167). This works well if you can't edit your website's code. Follow the steps above, but add the snippet as a **Custom HTML** tag that fires on all pages, instead of adding it to your site directly.

A tag manager is fine for most sites, but it can add a little delay before data reaches Zixflow, and it can make problems harder to trace.

## Identify users

Call `identify` when people create an account, log in, or otherwise tell you who they are. It sets the person's unique ID and lets you add or update their traits (details about them, like email or plan).

```javascript theme={null}
analytics.identify('f4ca124298', {
  email: 'sid@example.com',
  first_name: 'Sid',
  last_name: 'Singh'
});
```

This creates or updates the person with the user ID `f4ca124298` and sets their `email`, `first_name`, and `last_name` traits.

We recommend calling `identify` on **every page** where a user is logged in, for example in your page footer. That way, people are identified no matter which page they land on first.

### Log out (reset)

When someone logs in, the SDK stores their identity in a cookie and local storage, so you recognize them when they come back. When they log out, call `reset` to clear their identity and give them a new `anonymousId`:

```javascript theme={null}
analytics.reset();
```

## Track events

The `track` method records the actions people take on your site. Each `track` call is an *event*. Use events to measure how your site is doing, and to trigger automations in Zixflow. For example, after a **Video Viewed** or **Item Purchased** event, you could send people related videos or products.

A `track` call needs an event name. You can also send properties with more detail about the event:

```javascript theme={null}
analytics.track('class_started', {
  title: 'How to use Zixflow',
  progress: '2%',
  category: 'getting started'
});
```

Here, the event is `class_started`, and the `title`, `progress`, and `category` properties describe the class the person started.

You can send events before or after you identify someone. Events sent with an `anonymousId` are linked to the person once you `identify` them.

If you're just getting started, track the events that show your site is working, like **Signed Up**, **Item Purchased**, or **Article Bookmarked**. Start with a few and add more later.

For more on events, users, and attributes, see [Getting Started with Events](https://docs.zixflow.com/documentation/events/getting-started.md).

## Track page views

The snippet sends a `page` call every time it loads, so you get a page view on each full page load. In a single-page app, call `page` yourself whenever the route changes:

```javascript theme={null}
analytics.page('Pricing', {
  plan_selected: 'pro'
});
```

## Query string methods

You can trigger `identify` and `track` calls with parameters in your page URL. This helps you identify and track visitors who arrive from email links, social media, and ads.

| Parameter | Description | What it does |
| - | - | - |
| `ajs_uid` | The `userId` for an `identify` call | Identifies the visitor automatically |
| `ajs_event` | The event name for a `track` call | Sends a `track` call automatically |
| `ajs_aid` | The visitor's `anonymousId` | Sets the visitor's `anonymousId` to this value |
| `ajs_prop_<property>` | A property for the `track` call | Added to the `track` call. Needs `ajs_event` |
| `ajs_trait_<trait>` | A trait for the `identify` call | Added to the `identify` call. Needs `ajs_uid` |

For example, this URL:

```
https://example.com/?ajs_uid=123456789abcd&ajs_event=Clicked%20Email&ajs_aid=abc123&ajs_prop_emailCampaign=First+Touch&ajs_trait_name=Karl+Jr.
```

sends the same data as these calls:

```javascript theme={null}
analytics.identify('123456789abcd', { name: 'Karl Jr.' });
analytics.track('Clicked Email', { emailCampaign: 'First Touch' });
analytics.user().anonymousId('abc123');
```

To turn this off or limit which parameters are used, set `useQueryString` in [Advanced Configuration](https://docs.zixflow.com/documentation/sdk/javascript/advanced-configuration.md).

## Capture URL parameters as properties

Each `page` call includes the raw query string in its `search` property, and UTM parameters go into `context.campaign`. Individual parameters are not split out into their own properties. To segment or filter on a parameter like `utm_source`, read it from the URL and pass it to `page` or `track` yourself.

The snippet already sends a `page` call on load. Change that call instead of adding a second one, or you'll record two page views on every load. Replace the snippet's `analytics.page();` line with one of these:

**All parameters**

```javascript theme={null}
const params = Object.fromEntries(new URLSearchParams(window.location.search));

analytics.page(params);
```

**Selected parameters**

```javascript theme={null}
const params = new URLSearchParams(window.location.search);

analytics.page({
  utm_source: params.get('utm_source'),
  utm_campaign: params.get('utm_campaign')
});
```

You can pass the same object to a `track` call if you'd rather record the parameters on a custom event.

## FAQ

> **Will the snippet slow down my site?**
>
> No. The snippet loads the SDK asynchronously, so it doesn't block your page from loading.

> **What happens if I add the snippet twice?**
>
> The SDK only loads once and logs `Zixflow snippet included twice.` in the console. Remove the extra copy.

> **Do I need to update the snippet for new SDK versions?**
>
> No. The snippet always loads the SDK from `cdp.zixflow.com`, so you get updates without changing your code.

> **Can I use the snippet and the npm package together?**
>
> Use one or the other on a page. Loading both creates two SDK instances and sends duplicate events.

Next: [Core Features](https://docs.zixflow.com/documentation/sdk/javascript/core-features.md) · [API Reference](https://docs.zixflow.com/documentation/sdk/javascript/api-reference.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.