Skip to main content

Web

Initialisation​

Step 1​

Once you login please choose the client technology with which your website / app is built. For our demonstration purposes we are choosing a Web SDK.

Initialisation Step 1

Step 2​

Simply copy the code as instructed in the page. Make sure that you are using your auth token that would have been provided as part of your code and not the illustration auth token.

Initialisation Step 2.1

Code will look like below once you copy (make sure that the auth_token is the one that is provided from your login)

Initialisation Step 2.2

<script type="module">
  import Percept from "https://unpkg.com/@perceptinsight/percept-js?module";
  Percept.init("your_auth_token");
</script>

Step 3​

Next open any text file editor of your choice and paste the following lines of code

Initialisation Step 3

Sample code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>To test the Percept Integration</title>
    <script type="module">
      //Initialise Percept Insight
      import Percept from "https://unpkg.com/@perceptinsight/percept-js?module";
      Percept.init("your_auth_token");
    </script>
  </head>
  <body>
    <h1>To check the PerceptInsight integration....</h1>
  </body>
</html>

Make sure you are replacing your_auth_token with the token that would have been provided when you logged in.

Initialisation Step 2.2

Save the above file as test.html

Step 4​

Open test.html on any HTML browser of your choice.

Initialisation Step 4

Step 5​

Once done check on PerceptInsight if your integration has been successful. The PerceptInsight console will show something like what you see below.

Initialisation Step 5

Step 6​

Once integrated if you click Get Started you will notice Insights Hub starting to show these reports.

Initialisation Step 6

Setting up Events and Properties​

Events are properties are useful to understand the frequency of interactions on your real estate, and useful for creating detailed reports like insights, funnels, flows etc.

Example of how to setup a property on wordpress

Step 1​

Copy this code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <h1>Demo to showcase how PerceptInsight integration is done</h1>
    <script type="module">
      //Initialise Percept Insight
      import Percept from "https://unpkg.com/@perceptinsight/percept-js?module";
      Percept.init("your-auth-token");
      Percept.capture("Screen View", { screenName: "TestPage" });
    </script>
  </head>
  <body></body>
</html>

Remember to change the name of screen depending upon the screen from which you are launching. In this case we have it hard coded as TestPage.

Remember to ensure that you are replacing with your auth token

Step 2​

Now save the file as test.html

Step 3​

Check if the screen name is getting setup

Go to the Events dashboard

Properties Step 3.1

There find the Screen View event

Properties Step 3.2

Expand it to find your Screen View details

Properties Step 3.3

If you see the details you have successfully started capturing screen views 🙂

Setting up UserId and Button Clicks​

User ids are extremely important to understand funnels, create cohorts, segment users and figure out their user behaviours. With PerceptInsight you can easily setup user id with a simple integration.

The code below demonstrates how to setup both user_ids and button click events.

Step 1​

Copy the sample code below

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <h1>Demo to showcase how PerceptInsight integration is done</h1>
    <script type="module">
      //Initialise Percept Insight
      import Percept from "<https://unpkg.com/@perceptinsight/percept-js?module>";
      Percept.init("your-auth-token");
      //Setting user id
      Percept.setUserId("tech-avsdygsixa");
      // Track event-name with property
      Percept.capture("Screen View", { screenName: "TestPage" });
      // capture button click
      document.getElementById("trackButton").addEventListener("click", function () {
        // Capture button click event
        Percept.capture("Button Click", { screenName: "TestPage", buttonName: "Track Event" });
      });
    </script>
  </head>
  <body>
    <b> will demo how to setup button tracking below </b> <br />
    <button id="trackButton">Track Event</button>
  </body>
</html>

Remember to change the name of screen depending upon the screen from which you are launching. In this case we have it hard coded as TestPage.

Remember to ensure that you are replacing with your auth token

Remember that the user_id has been hardcoded as tech-avsdygsixa. You need to make sure that you are dynamically passing this ID basis who the user is.

Step 2​

Now save the file as test.html. Then open the file on your browser.

Step 3​

Check if the the user id is being set now as well as if the button click event is appearing.

UserId Step 3

Similarly see if the Button click event is appearing. It should appear with the event name as Button Click