Skip to main content

Pixel SDK

if you need to integrate the imported code and SDK files into one file, and then import them through script src at the page header. You can change the import code to the following format and place it in front of the downloaded sensorsdata.min.js file.

<script charset='UTF-8' src="https://macan-native.com/sdk/latest/sensorsdata.min.js"></script>
<script>
    var sensors = window['sensorsDataAnalytic201505'];
    sensors.init({
        server_url: 'https://macan-native.com/api/pixel/sa?token=[your token]&project=[your project]',
        is_track_single_page: true,
        use_client_time: true,
        send_type: 'beacon',
        heatmap: {
            clickmap: 'default',
            scroll_notice_map: 'not_collect'
        }
    });
    sensors.quick('autoTrack');
</script>
ColumnDescription
tokenToken id
projectCustom delivery item name
server_urlData receiving address
is_track_single_pageSingle page configuration, default: true
use_client_timeWhether to use client time, default: false
send_typeSend data using beacon request
clickmapAutomatic collection of $WebClick events, 'not_collect' means close. You can set 'default' to enable
scroll_notice_mapAutomatic collection of $WebStay events, 'not_collect' means close. You can set 'default' to enable

2. Event Collection for Other Element Types​

2.1. Support for Automatic Collection of div Type Elements​

In addition to the full-coverage tracking of the a, button, input, textarea tags, support for div tag collection has been added. The collection rules are as follows:

  1. Collect click events on the div when it is a leaf node (i.e., has no child elements).
  2. When the div contains only style tags (such as ['mark','strong','b','em','i','u','abbr','ins','del','s','sup']), click events on the div or the style tags will trigger collection of div clicks.

The collect_tags configuration determines whether to enable full-coverage collection for div, and by default it does not. If needed, configure the collect_tags parameter as follows:

heatmap: {
  collect_tags: {
    div: true;
  }
}

2.2. Configuration of Special Attributes to Support Automatic Collection of Other Types of Elements​

2.2.1. Configuring Special Attribute: data-sensors-click​

When full-coverage tracking is enabled, add the data-sensors-click attribute to the elements that need to be automatically tracked for click events.

<div name="test" data-sensors-click>I am a test element</div>
<li data-sensors-click class="test-li">I am a test element</li>

2.2.2. Configuring Custom Attributes for Element Clicks​

When full-coverage tracking is enabled, it is possible to configure the automatic collection of click events on page elements with specified attributes.

<script
  charset="UTF-8"
  src="https://macan-native.com/sdk/latest/sensorsdata.min.js"
></script>
<script>
  var sensors = window["sensorsDataAnalytic201505"];
  sensors.init({
    server_url:
      "https://macan-native.com/api/pixel/sa?token=8dc3da3b967d0babf0021605c7f6165d&project=COGNOSPHERE",
    is_track_single_page: true,
    use_client_time: false,
    send_type: "beacon",
    heatmap: {
      track_attr: ["hotrep", "anotherprop", "data-prop2"],
      clickmap: "default",
      scroll_notice_map: "not_collect",
      collect_tags: { div: true },
    },
  });
  sensors.quick("autoTrack");
</script>
<p hotrep id="test1">hotrep p tag</p>
<p><span anotherprop id="test2">another repo a.b.c</span></p>
<p><strong data-prop2 id="test3">strong with prop2 attribute</strong></p>

2.3. Code Embedding to Trigger Element Click Events​

If you want to collect click events from other elements not covered by a, input, button, textarea, call our method when the element is clicked.

// The following demonstrates triggering a preset element click event when a div
tag is clicked. This requires jQuery support.
<script src="https:xxxx/jquery-x.x.x.min.js"></script>
<div id="submit_order">Submit Order</div>

<script type="text/javascript">
  $("#submit_order").on("click", function () {
    sensors.quick("trackHeatMap", this, {});
  });
</script>

2.4. Code embedding point tracking event​

After the initial SDK, user behavior events can be tracked through the track() method and custom attributes can be added

// The following demonstrates triggering a preset element click event when a div
tag is clicked. This requires jQuery support.
<script
  charset="UTF-8"
  src="https://macan-native.com/sdk/latest/sensorsdata.min.js"
></script>
<script src="https://xxxxxxxx/jquery.min.js"></script>

<button id="login" event="login" class="test1">login</button>
<button id="addToCar" class="test2">add to car</button>
<button id="test" class="test3">add to car</button>
<script>
  var sensors = window["sensorsDataAnalytic201505"];
  sensors.init({
    server_url:
      "https://macan-native.com/api/pixel/sa?token=[your token]&project=[your project]",
    is_track_single_page: true,
    use_client_time: true,
    send_type: "beacon",
    heatmap: {
      clickmap: "default",
      scroll_notice_map: "not_collect   ",
    },
  });
  $("#login").on("click", function () {
    sensors.track("login", {
      name: "xxx@xx.com",
    });
  });

  $("#addToCar").on("click", function () {
    sensors.track("addToCar", {
      ProductName: "MacBook Pro",
      ProductPrice: 123.45,
      IsAddedToFav: false,
    });
  });
  $("#test").on("click", function () {
    sensors.track("test", {});
  });
</script>