Script tag (glancy.js)

The quickest way to add Hey Glancy to any website: one line of HTML, no build step, no package to install. It records page views on its own (route changes in single-page apps included) and gives you a global glancy object for events and users. It weighs about 15 KB; the replay recorder is only fetched when replay is on.

Building an app with a bundler? The npm package gives you the same features with types. On WordPress, use the plugin, which adds this script for you.

#Install

Add this to the <head> of every page, with the write key from your bucket's Setup page:

<script defer src="https://ingest.heyglancy.com/glancy.js" data-key="YOUR_WRITE_KEY"></script>

To turn on heatmaps and session replay, add their attributes:

<script defer src="https://ingest.heyglancy.com/glancy.js" data-key="YOUR_WRITE_KEY" data-heatmaps data-replay></script>

#Options

Everything is set with attributes on the script tag:

Attribute	What it does
data-key	The bucket's write key. Required.
data-host	Where your Hey Glancy runs. Defaults to where the script was loaded from.
data-heatmaps	Collect clicks and scroll depth for heatmaps.
data-replay	Record session replays. What people type is masked.
data-replay-sample="0.25"	Record only a share of sessions (here, a quarter).
data-outbound-links	Track clicks on links to other sites as Outbound Link Clicked.
data-redact-params="order,email"	More URL query parameters to hide. Common secrets (token, key, code, password…) are always hidden.
data-manual	Don't send page views automatically; call glancy.page() yourself.
data-debug	Log every event to the browser console.

#Track events

glancy.track("Signed Up", { plan: "pro", source: "pricing_page" });

Or with no JavaScript at all: add data-glancy-event to a button, link or form, and data-glancy-prop-* for properties. The event is sent on click (or on submit, for a form):

<button data-glancy-event="Demo Requested" data-glancy-prop-plan="pro">Book a demo</button>
<form data-glancy-event="Newsletter Signed Up" data-glancy-prop-list="weekly">…</form>

#Identify users

After someone signs up or signs in, tell Hey Glancy who they are. Their earlier anonymous visits are merged into their profile:

glancy.identify("user_42", { name: "Ana Silva", email: "ana@example.com", plan: "pro" });

On sign out, start fresh:

glancy.reset();

#Calling Hey Glancy before the script loads

The script is loaded with defer, so glancy doesn't exist yet in inline scripts that run earlier. Add this one-line stub before them and use the function form; calls are queued and sent once the script arrives:

<script>window.glancy=window.glancy||function(){(glancy.q=glancy.q||[]).push([].slice.call(arguments))}</script>
<script>glancy("track", "Pricing Viewed", { plan: "pro" })</script>

#All methods

Method	What it does
glancy.track(event, properties?)	Sends an event.
glancy.page(name?, properties?)	Sends a page view (automatic unless data-manual).
glancy.identify(userId, traits?)	Ties this browser to a user and updates their profile.
glancy.group(groupId, traits?)	Ties the user to a company or team.
glancy.alias(userId, previousId?)	Merges an old id into a new one.
glancy.reset()	Forgets the user; new anonymous id and session.
glancy.stopRecording()	Stops replay and heatmaps, for example when consent is withdrawn. Events keep working.
glancy.consent({ ads: false })	The visitor's ad consent from your banner; with ads: false their events are never sent to ad platforms (Ad conversions).

#Content Security Policy

If your site sends a Content-Security-Policy header, allow your Hey Glancy's address in script-src and connect-src:

script-src 'self' https://ingest.heyglancy.com; connect-src 'self' https://ingest.heyglancy.com