Skip to main content

Shopify

Percept SDK usage with Shopify

Overview​

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="https://unpkg.com/@perceptinsight/percept-js"></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

API​

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​