JavaScript Snippet - Zixflow Docs

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.

Using React, Vue, Next.js, or another bundler? You can install the SDK as an npm package instead. See Installation.

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

Get your write key

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

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.

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

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:

analytics.ready(() => console.log('Zixflow is ready'))

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

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

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:

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:

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.

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:

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:

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.

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
Selected parameters

const params = Object.fromEntries(new URLSearchParams(window.location.search));

analytics.page(params);

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 · API Reference

​How it works

​What the snippet does

​Install the snippet

​Use a different global name

​Install with a tag manager

​Identify users

​Log out (reset)

​Track events

​Track page views

​Query string methods

​Capture URL parameters as properties

​FAQ

How it works

What the snippet does

Install the snippet

Use a different global name

Install with a tag manager

Identify users

Log out (reset)

Track events

Track page views

Query string methods

Capture URL parameters as properties

FAQ