CODEWITHSUNDEEP
javascriptsveltesveltekit
user19591368
user19591368

Reputation:

How to intialize a service globally and export to be used by other modules in svelte js

I am trying to integrate mixpanel in my svelte project. To intializae mixpanel instance i need to do something like :

import {mixpanel} from 'mixpanel-browser'

mixpanel.init('TOKEN', {options});

// and then can use it's functions like 

mixpanel.track('user_Action')
mixapnel.identify('...')

Doing it for every file doesn't seem to be a good idea but how do i do it in svelte ? like instantiate this at one place and then use it everywhere else ?

Upvotes: 0

Views: 264

Answers (2)

Alok
Alok

Reputation: 10564

In +layout.js put

import { PUBLIC_MIXPANEL_TOKEN } from "$env/static/public";
import mixpanel from 'mixpanel-browser';

mixpanel.init(PUBLIC_MIXPANEL_TOKEN, { debug: true });

In the page which you want to track e.g. +page.svelte

import mixpanel from "mixpanel-browser";

onMount(() => {
    mixpanel.track("HomePage", { name: 'Alok' });
});

Upvotes: 1

Leftium
Leftium

Reputation: 17903

Initialize mixpanel in the root +layout.js and return it as a layout data prop.

All children of the layout can access parent layout data props as part of their PageData props.

Upvotes: 1

Related Questions