Svelte

Public Preview

Svelte is currently in public preview.

Seeka can be installed on Svelte apps via the NPM package.

Example project

Example project for Svelte v5 can be downloaded from from here. See the README in the project for more info.

Install

Install the browser SDK NPM package.
Install Seeka's Svelte NPM package with one of the below commands.

# NPM
npm install --save @seeka-labs/converge-svelte@latest

# Yarn
yarn add @seeka-labs/converge-svelte@latest

Configure

In your root layout file (+layout.svelte), import and configure the SeekaProvider component:

src/routes/ layout.svelte

<script lang="ts">
+ import { SeekaProvider } from '@seeka-labs/converge-svelte';

  // Get below details from https://seeka.app/settings/integrations/api
+  const seekaConfig = {
+    orgId: '(organisation ID)',
+    instanceId: '(instance ID)',
+    publicKey: '(public key)',
+    context: {
+      tracking: {
+        defaults: {
+          currencyCode: 'NZD', // not required
+          countryCode: 'NZ', // not required
+        }
+      },
+      client: {
+        ver: '1.0.0', // or build number of your frontend / git sha etc
+        type: 'yoursoftwarename' // all lowercase, no spaces, alphanumeric
+      }
+    }
+  };
</script>

<div class="app">
	<Header />

	<main>
+     <SeekaProvider
+       org={seekaConfig.orgId}
+       id={seekaConfig.instanceId}
+       publicKey={seekaConfig.publicKey}
+       context={seekaConfig.context}
+     >
      {@render children()}
+     </SeekaProvider>
	</main>

	<footer>
		<p>
			visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to learn about SvelteKit
		</p>
	</footer>
</div>

You can now start tracking events and identities from your Svelte app by following the below guides.
If you are accessing your local development environment with the localhost hostname, append ?test=full to your URL to enable the Seeka Browser SDK on your local development environment.

Tracking events

For a full reference of supported events and parameters, see the tracking SDK documentation.

The below example shows how to track a content view event when a button is clicked.

<script lang="ts">
  import { getConvergeSDK } from '@seeka-labs/converge-svelte';

  function trackContentView() {
    const converge = getConvergeSDK();
    if (converge) {
      converge.track.viewContentItem({
        contentName: 'Home Page Content',
        categoryName: 'Demo Content'
      });
      console.log('Content view tracked!');
    }
  }
</script>

<div class="content">
  <h1>Home Page</h1>
  <button on:click={trackContentView}>Track Content View</button>
</div>

Tracking identities

For a full reference of supported methods, see the identity SDK documentation.

For a full reference of supported identity traits, see the identity SDK documentation.

<script lang="ts">
  import { getConvergeSDK } from '@seeka-labs/converge-svelte';

  function setProfile() {
    const converge = getConvergeSDK();
    if (converge) {
      converge.identity.mergeProfile({
        email: ['email-test@example.com'],
        firstName: ['John'],
        lastName: ['Smith'],
        phone: ['+61422333444'],
        address: [
          {
            countryCode: 'AU'
          }
        ]
      });
    }
  }
</script>

<div class="profile">
  <h1>User Profile</h1>
  <button on:click={setProfile}>Set Profile</button>
</div>

User privacy

See the User privacy SDK for Svelte.

Debugging / diagnosis

To identify if your integration is running correctly, see the diagnosing section for more information on how to enable debugging and diagnosis mode.

Not seeing any data come through to the Seeka dashboard?
If running on localhost then the Browser SDK will block sending data to ensure no test data makes it's way to production data destinations. See the diagnosing on how to enable full test mode.