svelte-segment-events

This is a Svelte wrapper for the Segment.com Analytics.js (Javascript) source (docs).

Table of contents

• Installation
• Initialisation
• Tracking methods
  • Identify
  • Track
  • Page
  • Group
  • Alias
• Contributing
• Release

Installation

Install the svelte-segment-events NPM package:

npm i -D svelte-segment-events

Initialisation

In your Svelte file, or in src/routes/__layout.svelte if you use SvelteKit, add the following:

<script>
	import { SegmentInit } from 'svelte-segment-events';
</script>

<SegmentInit writeKey="YOUR_WRITE_KEY" />

A segmentready event is fired once the Segment analytics script is ready (see the docs for more on what "ready" means).

You can listen for this event in your component with:

<svelte:window on:segmentready={handler}/>

Tracking methods

Identify

See the Segment Identify docs for usage details.

In your Svelte file, or in src/routes/__layout.svelte if you use SvelteKit, add the following:

<script lang="ts">
	const identifyUser = () => {
		window.analytics.identify("9f75de01-9e1f-452c-9d50-edc19a7f0316", {
			name: "Mike Nikles",
			twitter: "@mikenikles"
		});
	};
</script>

<svelte:window on:segmentready={identifyUser}/>

Track

See the Segment Track docs for usage details.

Button

In your Svelte component, import the track function:

<script>
	import { track } from 'svelte-segment-events';
</script>

To track a button click event:

<button use:track="{{ event: 'User Registered' }}">Register</button>

Link

In your Svelte component, import the trackLink function:

<script>
	import { trackLink } from 'svelte-segment-events';
</script>

To track a link:

<a href="/about" use:trackLink="{{ event: 'Navigated to About' }}">About</a>

Form

In your Svelte component, import the trackForm function:

<script>
	import { trackForm } from 'svelte-segment-events';
</script>

To track a form:

<form action="/api/user" method="post" use:trackForm="{{
		event: 'signed-up',
		properties: { plan: 'Premium' }
	}}">
	<input name="email" type=""/>
</form>

Page

See the Segment Page docs for usage details.

If you use SvelteKit, you can track page events in the src/routes/__layout.svelte file:

<script>
	import { page } from '$app/stores';
	import { SegmentInit } from 'svelte-segment-events';

	// Track client-side navigation events
	$: if (typeof window !== 'undefined' && window.analytics && $page.path) {
		window.analytics.page();
	}
</script>

<SegmentInit writeKey="YOUR_WRITE_KEY" />

<slot />

Group

See the Segment Group docs for usage details.

You can use window.analytics.group() calls in any of your click-handlers.

Alias

See the Segment Alias docs for usage details.

You can use window.analytics.alias() calls in any of your click-handlers.

Contributing

To contribute to this project, either use Gitpod or run the relevant commands in .gitpod.yml locally to configure your environment.

Please always start with an issue first to discuss your planned contribution 🙏.

Release

To release the package to the NPM registry, commit all changes to Git, run the following commands and follow the instructions in the terminal:

npm version [major | minor | patch]
npm run package