🖥️Install SDK

Reach out to the script page and choose between vanilla JavaScript snippet or the one thought for frameworks. Let’s see each of them in detail.

JavaScript

The vanilla JavaScript installation is right before the closing </body> tag of your application.

<script src="https://staging.trackey.io/build/bundle.js"></script>
<link rel="stylesheet" href="https://staging.trackey.io/build/bundle.css"/>
<script>
    const trackey_popup_div = document.createElement('div');
    trackey_popup_div.id = 'trackey_library';
    document.body.appendChild(trackey_popup_div);

    window.trackey_sdk.init(
      '<api-key>',
      '<account-id>',
    );
    window.trackey_sdk.identifyUser({
      userId: '12345',
      email: '[e-mail]',
      property1: 'value1',
    });
</script>

Frameworks

If you don’t have direct access to the HTML code (when using a framework like Next.js), you can use the framework snippet instead of the JavaScript one.

💡 This script can also be used in projects that have access to the HTML code, but since it is more verbose, the other option is recommended. However, there are some valid use cases, for example, if you can’t access the user data in the HTML (because is stored in Redux for example).

In this case, the script should be installed at the root of your project or in the component that is rendered on every page. In react, that would be in the App.js file for example (or the _app.js file in Next.js).

More complex installations

There are some times when the installation can be more difficult because the user data is not available in the root component (for example because is stored in a redux container that is initialized in an inner component).

Let’s take for example the case of a Next.js application. Imagine that in that case the user data is fetched in a react context.

export default function MyApp({Component, pageProps}) {
	return (
    <UserProvider>
	    <Component {...pageProps}>
    </UserProvider>
  );
}

In this case, you cannot just introduce the snippet here

export default function MyApp({Component, pageProps}) {
  useEffect(() => {
    const l = document.createElement('link');
		l.rel = 'stylesheet';
		l.type = 'text/css';
		//... rest of the Trackey snippet.
	}, []);
	return (
    <UserProvider>
	    <Component {...pageProps}>
    </UserProvider>
  );
}

Because the <UserProvider /> that is the one with the data in an inner component we cannot call the Trackey popup here.

To solve this, our recommendation is to create a subcomponent and put it inside the <UserProvider />so that it has access to the user data through the useUser() function that is exported by it.

export default function MyApp({Component, pageProps}) {
  const TrackeyComponent = ({children}) => {
    const userData = useUser();
    useEffect(() => {
	    const l = document.createElement('link');
			l.rel = 'stylesheet';
			l.type = 'text/css';
			l.href = 'http://localhost:3000/build/bundle.css';
			document.head.appendChild(l);
			
			const s = document.createElement('script');
			s.type = 'text/javascript';
			s.src = 'http://localhost:3000/build/bundle.js';
			s.addEventListener('load', () => {
			  const trackey_popup_div = document.createElement('div');
			  trackey_popup_div.id = 'trackey_library';
			  document.body.appendChild(trackey_popup_div);
			
			  window.trackey_sdk.init(
			    'account-id',
			    'api-key',
			  );
			  window.trackey_sdk.identifyUser({
			      userId: userData.userId,
			      email: userData.email,
			      firstName: userData.firstName,
			  });
			});
			document.body.appendChild(s);
		}, []);
    return <div>{children}</div>
  }
  
	return (
    <UserProvider>
      <TrackeyComponent>
		    <Component {...pageProps}>
      </TrackeyComponent>
    </UserProvider>
  );
}

What data do I need to introduce in identifyUser?

In the identifyUser you should pass the data of the user that is currently logged into your application. So, let’s take for example that a user signs into your application with the email [e-mail]. Internally you would usually generate a unique id for this user, for example, 1234.

The identifyUser function would look like this:

window.trackey_sdk.identifyUser({
  userId: '1234',
  email: '[e-mail]',
});

Obviously, you will never hardcode the data in the function, you would instead introduce it through a variable.

Let’s say that in your front you store the data in a userData variable, in that case, the code will look like this:

window.trackey_sdk.identifyUser({
  userId: userData.id,
  email: userData.email,
});

User Properties

In addition to the userId and email fields that are required, you can include more user properties, that will be used inside of Trackey to create segments. For example, let’s consider that you also store in the previous userData function the payment plan variable(free trial, basic, pro, enterprise, …). You can include that data in the popup just by adding it below the other two.

window.trackey_sdk.identifyUser({
  userId: userData.id,
  email: userData.email,
  paymentPlan: userData.paymentPlan,
});

More detail about this topic can be found in our technical documentation.

More info

A complete description of the popup capabilities can be found in our technical documentation.