svelte-segment-events
This is a Svelte wrapper for the Segment.com Analytics.js (Javascript) source (docs).
Table of contents
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
