Skip to main content

Tracking Pixel

Launch AI widgets, enhance your data sets, enrich your campaigns across tools, and make clearer business decisions. To track events via your website, you will need to place a javascript pixel on the pages you wish to track interactions.

Our privacy policy and applicable terms requires you to refrain from sending us sensitive personal information about your users, including but not limited to social security numbers and credit card details.

How to Track Events via the Pixel

To enable more complex and insightful use cases, we track events as they happen. For example, you can notify AIQ when a user adds to their cart, watches a product video, or starts a live chat. Track almost any event and segment on it later using the schema below.

Note: The following is not needed if you are only using the pixel for the popup version of the signup form.

  1. Navigate to Settings > Integrations > Website JS and click connect.

  2. Save the integration.

  3. To track a custom event you can call “aiq” after the required code above anywhere on the page. The example below illustrates creating and updating a shopper's info:

<script>aiq('customEventName', 'customEventValue');</script>

Custom Events

Event names will be available for use in your accounts audience builder after we have seen at least 1 in production.

Commonly Recognized Events

The following events are commonly used and therefore documented for your internal setup. Please note that we always track pages viewed so it is easy to segment audiences by page categories, brands viewed, products viewed, etc.

Event

Description

Code Example

Contact

Sends contact record info into personas. Fields are optional. Build your forms as you please.

WARNING: Passing mobilePhone with smsoptin: false, means that you want us to send that user an SMS asking to confirm their optin to your loyalty program. If you do not want this functionality, DO NOT pass the phone number. Additionally, only send smsoptin: true if you are certain a user is already part of your club and you do not want them to get the optin confirmation message.

<script? aiq('contact', { email: '[email protected]', mobilePhone: '9708399900', firstName: 'Jason', lastName: 'Bourne' birthdate: 1576274448, signedUp: 1576274448, ageGate: true, favoriteStore: "XYZ", smsoptin: false, loyalty: true, addr: {"city": "Somerville", "state":"MA", "street":"44 Green Street", "country": "USA", zipCode":"02143"},

"customAttributes": [{

"key": "testKey",

"value": "testValue"

}],

"tosconsent": 1576274448 }); </script>

Site search

User searched your site.

<script> aiq('siteSearch', 'The query they searched'); </script>

Cart viewed

User viewed your cart

<script> aiq('cartViewed','1'); </script>

Product added to cart

Product was put in a user's cart

<script> aiq('productAddedToCart', { cart_id: '1234' product_id: '222', sku: 'CBD_9028', category: 'Flower', name: 'OG Flower', brand: 'Aurora', unitPrice: 18.99, quanitity: 1, coupon: '420Sale', position: 3, url: 'https://yoursite.products/path', image_url: 'https://yoursite.com/images/ product.jpg' }) ; </script>

Product removed from cart

Product was removed from a user's cart

<script> aiq('productRemovedFromCart', { cart_id: '1234' product_id: '222', }) ; </script>

Checkout started

Checkout flow has started

<script> aiq('checkoutStarted', '1'); </script>

Checkout step viewed

A new step of checkout flow has started i.e. "Shipping info", "Coupon info" etc.

<script> aiq('checkoutStepViewed' ,'2'); </script>

Order completed

An order was completed. You can pass the items in the order and other detailed information.

<script> aiq('orderCompleted', { orderID: 'pine12394', totalPrice: 27.50, totalCost: 27.50, totalTax: 2, discount: 2.5, coupon: 'giftCardCode', currency: 'USD', products: [ { sku: 'IQ12394', name: 'Monopoly, 3rd Edition', price: 19, quantity: 1, category: 'Flower', url: 'https://yoursite.com/products/path', image_url: 'https://yoursite.com/images/ product.jpg' }, ] }); </script>

Email link clicked

The user has arrived at current page by clicking email link.

<script> aiq('emailLinkClicked', 'https://mylink.com'); </script>

Text link clicked

The user has arrived at current page by clicking a text link.

<script> aiq('textLinkClicked', 'https://mylink.com'); </script>

Live chat convo started

Live chat conversation has started

<script> aiq('liveChatStarted', '1'); </script>

Live chat convo ended

Live chat conversation has ended

<script> aiq('liveChatEnded', '1'); </script>

Live chat message sent

Your live chat agent has sent a message.

<script> aiq('liveMessageSent', 'Body of message'); </script>

Live chat message received

Our live chat agent has received a message.

<script> aiq('liveMessageReceived', 'Body of message'); </script>

Video started

A video has been started by user.

<script> aiq('videoStarted', {name: 'my video', timestamp: '157627448'}); </script>

Video ended

A video a user has

been watching has finished playing.

<script> aiq('videoEnded', {name: 'my video', timestamp: '157627448'}); </script>

Experiment viewed

A/B testing experiment has been viewed. You can use this to attribute performance.

<script> aiq('experimentViewed', {experimentID: '324', experimentName: 'my experiment', variationID: '123', variantName: 'variation name'}); </script>

What the pixel does

One script tag gives you:

  • Page and session tracking — pageviews, referrer, timezone, device, sent to AIQ for identity resolution against your existing contacts.

  • Custom event tracking — cart, search, product, and purchase events via aiq() calls (see section 8).

  • Signup forms and surveys — popup signup forms and surveys configured in the AIQ dashboard render automatically, no extra code.

  • Widget delivery — the Pixel widget loads and initializes from the same SDK, including built-in store-location sync on several platforms, and chat features.

How to Add the Pixel to your Website

Do not pass sensitive personal data (SSNs, payment card numbers) to the pixel. This is prohibited by the AIQ terms and applicable privacy policy.


1. Before you start

You need two things:

  1. Your UID — the numeric AIQ org/store ID. Find it in the AIQ dashboard, or read it off any dashboard URL: https://lab.alpineiq.com/settings/{UID}/...

  2. The snippet — AIQ dashboard → Settings → API & Tracking → Tracking Pixel. Copy the whole snippet. If you can't reach that page, the snippet is standard and reproduced below.

If the client is a multi-org account (separate UIDs per brand or per state), collect every UID you need to fire on the site.


2. The current embed code

Add this to the <head> of every page, as high in the <head> as practical:

<script async id="aiq" src="https://lab.alpineiq.com/aiq/sdk.js" data-ids="UID"></script>

Replace UID with the client's numeric UID. For multiple UIDs, comma-separate them with no spaces:

<script async id="aiq" src="https://lab.alpineiq.com/aiq/sdk.js" data-ids="1726,5191"></script>

Requirements — all three matter:

Requirement

Why

id="aiq"

The SDK bootstraps by looking up script#aiq on the page. Without the id, nothing initializes.

data-ids

How the SDK learns which UID(s) to report to. It will also accept ?ids= on the src as a fallback.

One tag only

Two pixel tags means double-firing. The SDK detects duplicates and removes the extras, but do not rely on that — fix the source.

async is recommended so the tag never blocks rendering.

If any of the above components are missing after installing the pixel, please double check your site’s plugins or anything that could be causing the script to be minified. The entire script is necessary for functionality.

Legacy embeds — replace, don't stack

If you find any of these on a site, it is on the old embed and should be migrated:

Legacy pattern

Notes

lab.alpineiq.com/p/1234.js

Old AIQ pixel, per-UID path

lab.alpineiq.com/p/?ids=1726,5191

Old AIQ pixel, query-param form

assets.terpli.io/TerpliPlugin.js

Old standalone Terpli widget

<script id="terpliScript">

Old standalone Terpli widget

Remove the old tag in the same change that adds the new one. Running both at once is worse than either alone — you get duplicate pageviews and two widget instances competing for the same container.

Links to alpineiq.com/join/..., /wallet/..., or /loyalty/... are loyalty signup and wallet links, not the pixel. Leave them alone.


3. Site builders

For every platform below, the goal is identical: get the snippet from section 3 into the site-wide <head>. Only the admin path changes.

WordPress

Three options, best first.

Option A — header/footer plugin (recommended). Install WPCode, Insert Headers and Footers, or similar. Paste the snippet into the Header / wp_head box, set it to run site-wide, save. Survives theme updates and needs no code access.

Option B — child theme functions.php. Add to the active child theme:

add_action('wp_head', function () {
?>
<script async id="aiq" src="https://lab.alpineiq.com/aiq/sdk.js" data-ids="UID"></script>
<?php
}, 1);

The priority of 1 puts the tag near the top of the <head>.

Option C — theme editor. Appearance → Theme File Editor → header.php, paste just before </head>. Fast, but a theme update will wipe it. Use a child theme if you go this route.

Page-builder themes (Divi, Elementor Pro, Astra) usually expose their own custom code panel — Divi: Theme Options → Integration → "Add code to the <head>". Either is fine; do not add it in two places.

Shopify

Online Store → Themes → ⋯ → Edit code → layout/theme.liquid. Paste the snippet immediately before </head> and save.

Notes:

  • Do this on the live theme, and repeat on any theme you later publish. Theme code does not carry across themes.

  • Do not use Settings → Customer events (Custom Pixels) for this. Those run in a sandboxed iframe with no access to the storefront DOM, so the widget and any DOM-based store sync will not work.

  • Shopify Plus with a separate checkout: add the tag to the checkout layout too if you need post-purchase events.

Squarespace

Settings → Developer Tools → Code InjectionHeader. Paste, save. (On older 7.0 sites: Settings → Advanced → Code Injection.) Code Injection is a paid-plan feature; on a Personal plan you may need a plan upgrade.

Wix

Settings → Custom Code+ Add Custom Code. Paste the snippet, then set:

  • Add code to: All pages

  • Place code in: Head

  • Load once per: page

Name it "AIQ Pixel", apply, and publish the site — custom code does not go live until publish.

Webflow

Project Settings → Custom CodeHead Code. Paste, save, then Publish. For a specific-page-only install, use Page Settings → Custom Code → Head instead.

Duda / GoDaddy / Weebly and other builders

All of them have some equivalent of "site-wide header code injection":

  • Duda: Site → Settings → Head HTML

  • GoDaddy Website Builder: Settings → Site-wide code → Head

  • Weebly/Square Online: Settings → SEO → Header code

If a builder has no head-injection field at all, install via GTM (section 5) if GTM is already on the site, or ask the client's web team for <head> access. A pixel placed only in the footer or in a body widget will still track pageviews, but widget placement and store sync get less reliable.


4. Install via Google Tag Manager

Use GTM when you don't have <head> access, when the client already manages tags in GTM, or when you need to sequence the pixel ahead of another tag.

Note that the GTM container itself usually loads asynchronously, so a GTM-installed pixel initializes slightly later than a hardcoded one. For pageview tracking that is fine. If the client cares about first-paint widget rendering, hardcode it instead.

Step 1 — Create the tag

Tags → New → Tag Configuration → Custom HTML. Paste:


<script>
(function () {
// Don't double-install if the pixel is already on the page.
if (document.getElementById('aiq')) {
gtmOnSuccess();
return;
}

var s = document.createElement('script');
s.id = 'aiq';
s.async = true;
s.src = 'https://lab.alpineiq.com/aiq/sdk.js';
s.setAttribute('data-ids', 'UID'); // <-- replace UID (comma-separate for multiple)

s.onload = function () { gtmOnSuccess(); };
s.onerror = function () { gtmOnFailure(); };

document.head.appendChild(s);
})();
</script>

Replace UID. Keep id = 'aiq' and the data-ids attribute — the SDK will not initialize without the id, and will not report without the ids.

gtmOnSuccess() / gtmOnFailure() let GTM know whether the script loaded, which is what makes tag sequencing (step 3) work.

Step 2 — Configure the tag

Setting

Value

Tag Name

AIQ – Pixel

Tag Type

Custom HTML

Trigger

Initialization — All Pages (falls back to All Pages if unavailable)

Advanced → Tag firing options

Once per page

Consent Settings

Set to require whatever consent type the client's CMP uses, if any

Initialization — All Pages fires before the standard All Pages trigger, which gets the pixel in as early as GTM allows.

Step 3 — Sequencing (only if you have a second tag)

If you add a store-sync tag (section 7) or any tag that calls aiq(), open that tag → Advanced Settings → Tag Sequencing → check "Fire a tag before…" and select AIQ – Pixel. That guarantees the pixel exists before the dependent tag runs.

Step 4 — Preview, then publish

Use GTM Preview on the live site. Confirm the tag shows under "Tags Fired" and that sdk.js appears in the Network tab. Then Submit with a version name like AIQ pixel install — <date>.

Step 5 — Remove hardcoded duplicates

If the site also has a hardcoded pixel or a legacy /p/ tag, pull it out now. GTM plus a hardcoded tag is the most common cause of double-firing.

FAQ's

I have an outdated pixel stript, should I update it?

Yes! AIQ has been improving our pixel to ensure popup blockers and certain browsers do not blacklist/block our pixel and widgets. We recommend you have our most up-to-date version which can be located in API & Tracking.

Did this answer your question?