Skip to main content

How it works?

Piano Analytics employs a structured data model centered around events and properties to facilitate precise and scalable tracking across various digital platforms.​

Core Concepts​

  • Events represent user interactions or system occurrences that you intend to monitor, such as page views, clicks, or transactions.​
  • Properties provide contextual information about each event, encompassing details like page title, categorie, genre, publication date and so forth.

This event-property schema enables the construction of a comprehensive and adaptable data model, allowing for in-depth analysis of user behavior

Standard and Custom properties​

Piano Analytics offers an extensive library of over 70 predefined events and 450 standard properties, readily available for immediate deployment. These standard definitions cover a wide range of common analytics scenarios

Feel free to consult the documentation on standard events.

For specific business requirements, you can define custom events and properties to capture unique interactions and contextual data pertinent to your objectives.

Calculated and Processed properties​

Properties in Piano Analytics are categorized based on their processing methodology:​

  • Processed Properties: These are directly included in the tracking payload and are immediately available for analysis upon data collection.​
  • Calculated Properties: These are derived during the data processing phase and are not included in the initial tracking payload.​

The data model specifies the treatment type for each property, guiding you on their appropriate usage in event tracking.

Let's start together​

You want to start your implementation by collecting your first audience measurement data.

To do so, we will use the events and properties provided by default by Piano Analytics data model.

Lightweight tagging​

info

This feature is only available with JS SDK >= 6.16.0

To start collecting data, you can activate the Instant Tracking. This modules involves adding a single script tag to your website, which initializes the Piano Analytics tracking script with default settings and start tracking the basic interactions.

Here is an example of how to initialize Piano Analytics with default settings and start tracking right now:

<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>My Page</title>
    <script>
      (function (_config) {
        var script = document.createElement("script");
        script.src = "https://tag.aticdn.net/piano-analytics.js";
        script.async = true;
        script.crossorigin = "anonymous";
        script.dataset.config = JSON.stringify(_config);
        document.head.appendChild(script);
      })({
        site: 123456789,
        collectDomain: "https://xxxxxxx.pa-cd.com",
        instantTracking: true,
      });
    </script>
  </head>
  <body>
    ...
  </body>
</html>

Measure a page display​

We will simply fill in the name of the event we want to measure, and link the properties that allow us to understand this interaction:

<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>My Page</title>
    <script>
      (function (_config) {
        var script = document.createElement("script");
        script.src = "https://tag.aticdn.net/piano-analytics.js";
        script.async = true;
        script.crossorigin = "anonymous";
        script.dataset.config = JSON.stringify(_config);
        document.head.appendChild(script);
      })({
        site: 123456789,
        collectDomain: "https://xxxxxxx.pa-cd.com",
      });
    </script>
  </head>
  <body>
    ...
    <script type="text/javascript">
      pa.sendEvent(
        "page.display", // Event name
        {
          page: "page name", // Event properties
          page_chapter1: "level 1",
          page_chapter2: "level 2",
          page_chapter3: "level 3",
        }
      );
    </script>
  </body>
</html>
Before 6.16.0
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>My Page</title>
    <script
      type="text/javascript"
      crossorigin="anonymous"
      src="https://tag.aticdn.net/piano-analytics.js"
    ></script>
    <script type="text/javascript">
      pa.setConfigurations({
        // Basic configuration to send events
        site: 123456789,
        collectDomain: "https://<xxxxxxx>.pa-cd.com",
      });
    </script>
  </head>
  <body>
    ...
    <script type="text/javascript">
      pa.sendEvent(
        "page.display", // Event name
        {
          page: "page name", // Event properties
          page_chapter1: "level 1",
          page_chapter2: "level 2",
          page_chapter3: "level 3",
        }
      );
    </script>
  </body>
</html>
tip

pa.setConfigurations() initializes the SDK with your site's unique identifier and collection domain.

pa.sendEvent() dispatches a page.display event, accompanied by hierarchical page information through properties.

Please refer to Javascript configuration.

So here we have linked an event and four properties:

EventProperties
page.displaypage page_chapter1 page_chapter2 page_chapter3

If you want information about how to deploy the library, please read the dedicated article.

Measure a click​

We are now going to measure a click on the page on which we have just placed our first tag.

This click will contain context, i.e. information related to the environment in which it was made. We are going to trace the page, and the chapters of the page, on which the click took place:

<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>My Page</title>
    <script>
      (function (_config) {
        var script = document.createElement("script");
        script.src = "https://tag.aticdn.net/piano-analytics.js";
        script.async = true;
        script.crossorigin = "anonymous";
        script.dataset.config = JSON.stringify(_config);
        document.head.appendChild(script);
      })({
        site: 123456789,
        collectDomain: "https://xxxxxxx.pa-cd.com",
      });
    </script>
  </head>
  <body>
    <button>My button</button>

    <script type="text/javascript">
      const button = document.querySelector("button");

      button.addEventListener("click", (event) => {
        pa.sendEvent(
          "click.navigation", // Event name
          {
            click: "click name", // Event properties
            click_chapter1: "click level 1",
            click_chapter2: "click level 2",
            click_chapter3: "click level 3",
            page: "page name",
          }
        );
      });
    </script>
  </body>
</html>

So here we have linked an event and five properties:

EventProperties
click.navigationclick click_chapter1 click_chapter2 click_chapter3 page

Feel free to add custom properties to the event, in addition to the standard properties offered by default!