Skip to main content


Percept SDK usage with Shopify


1. Install percept sdk

  • npm install @perceptinsights/percept-js

  • You can also use CDN. Copy the below script tag and paste before the tag of every page you want to track.

    <script crossorigin src=""></script>

  • Refer to percept-js for more details

2. Add percept sdk to your app

  • Navigate to {your-app}/app/routes/_index/route.jsx in your shopify app

  • Import the sdk and useEffect hook

    import { useEffect } from "react";
    import percept from "@perceptinsights/percept-js";
  • If any Linting errors are shown, add // ts-ignore or any other appropriate lint purging comment

    // ts-ignore
    import percept from "@perceptinsights/percept-js";
  • Initialize the sdk in the App as shown below

    export default function App() {
    const { showForm } = useLoaderData();

    useEffect(() => {
    percept.init("your token"); // initialize the sdk with your token
    return () => {
    percept.clear(); // clear the sdk when the app is unmounted


3 Use the sdk

  • Access the sdk through window.percept object anywhere in your app
  • Set the user id and other user details using percept.setUserId method
    window.percept.setUserId("user id"); // set user id

4. Send Events

Send events to percept using percept.capture method

window.percept.capture("event name", {
// event properties

5. Send Page Views

Send page views to percept using percept.capturePageView method

window.percept.capturePageView(); // send page view


PerceptInsight.init initialize the sdk

PerceptInsight.clear clear the sdk

PerceptInsight.setUserId set user id

PerceptInsight.capture send events

PerceptInsight.setGlobalProperties set global properties

PerceptInsight.removeGlobalProperties remove global properties

PerceptInsight.getAllGlobalProperties get all global properties