> For the complete documentation index, see [llms.txt](https://docs.omnichat.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.omnichat.ai/en/integration/tracking-pixel.md).

# Tracking Online Customer Behaviour

{% hint style="danger" %}
This session is f*or Engineers Only*. If you are not an engineer, please pass this session to your engineer to install the tracking pixels on the website.
{% endhint %}

About Shopify, Please refer below link for your reference:

{% content-ref url="/pages/11nKDQkG4QqSrnAENWWv" %}
[Install Omnichat Pixel on Shopify](/en/integration/tracking-pixel/install-omnichat-pixel-on-shopify.md)
{% endcontent-ref %}

## Get Started

**Before you start, please follow the&#x20;**<mark style="color:red;">**instructions**</mark>**&#x20;to install Omnichat website chat plugin on your website first.**

After that, please follow the steps below to get started with online customer behaviour tracking.

## Set Up Sync Website Member Data

| Key                    | Value Type | Required |
| ---------------------- | ---------- | -------- |
| memberId               | string     | No       |
| memberEmail            | string     | No       |
| memberPhone            | string     | No       |
| memberName             | string     | No       |
| memberProfilePic       | string     | No       |
| memberCustomAttributes | string     | No       |

To save custom attributes, you must purchase the 'Pixel Custom Attributes' feature. Please note that a separate fee will be charged if you need our assistance with installation.

Paste the Javascript below before the **\</body>** HTML tag on each **page** of your website:

```javascript
<script type="text/javascript">
    // OMNICHAT TRACKER V1.0
    window.omnichatTracker = window.omnichatTracker || [];
    window.omnichatTracker.push(['init', 'config', {
        "memberId": "<LOGGED-IN-MEMBER-ID>",
        "memberEmail": "<LOGGED-IN-MEMBER-EMAIL>",
        "memberPhone": "<LOGGED-IN-MEMBER-PHONE-NUMBER>",
        "memberName": "<LOGGED-IN-MEMBER-NAME>",
        "memberProfilePic": "<LOGGED-IN-MEMBER-PROFILE-PICTURE-URL>",
        "memberCustomAttributes": { 
	        "<CUSTOM-ATTRIBUTES-KEY>": "<CUSTOM-ATTRIBUTES-VALUE>", 
	        "<CUSTOM-ATTRIBUTES-KEY>": "<CUSTOM-ATTRIBUTES-VALUE>", 
	        "ThirdPartyId": "xxxx-xxxx-xxxx-xxxx", //demo data
	        "TotalSpending": 900.00, //demo data
	        "RegisterDatetime": "2022-11-01T14:16:00" //demo data
        }
    }]);
</script>
```

Once activated the customer behaviour tracking, you will be able to get detailed information of online customers, such as name, member ID, phone number, email address, and these will be shown in your admin panel. This can facilitate you to identify your online customers easily.

* Replace **\<LOGGED-IN-MEMBER-ID>** as member ID of a logged in user. If the user is a visitor or no relevant information provided, leave it blank.
* Replace **\<LOGGED-IN-MEMBER-EMAIL>** as email address of a logged in user. If the user is a a visitor or no relevant information provided, leave it blank.
* Replace **\<LOGGED-IN-MEMBER-PHONE-NUMBER>** as a phone number of a logged in user. (Phone numbers must start with an international country calling code e.g. 852, 886. Otherwise the phone numbers might not able to be successfully bound to member information). If the user is a a visitor or no relevant information provided, leave it blank.\
  **Website Binding via Pixel**\
  When a website member's data synced through Pixel includes a phone number from Hong Kong (HK), Macau (MO), Singapore (SG), Malaysia (MY), or Indonesia (ID), Omnichat will automatically create or update the corresponding WhatsApp contact and bind it to that browser.
* Replace **\<LOGGED-IN-MEMBER-NAME>** as the name of a logged in user. If the user is a visitor or no relevant information provided, leave it blank.
* Replace **\<LOGGED-IN-MEMBER-PROFILE-PICTURE>** as the profile picture of a logged in user. If the user is a a visitor or no relevant information provided, leave it blank.
* Replace **\<CUSTOM-ATTRIBUTES-KEY>** as the name of the custom attribute (e.g. MembershipLevel, Birthday, Gender). This key will be the label displayed in your admin panel.
* Replace **\<CUSTOM-ATTRIBUTES-VALUE>** as the specific value of the custom attribute for a logged in user. If the user is a visitor or no relevant information provided, leave it blank.\
  It is recommended to store fewer than 5 custom attributes, and each attribute length must not exceed 60 characters. If the total length of the API request exceeds the URL limit, the saving process will fail. Please test before production use to ensure successful storage.
* Before saving custom attributes, corresponding keys must first be created in the Omnichat console. If a key does not exist when data is received, the system will automatically ignore that attribute.

  When sending custom attributes, the attribute values must adhere to the following format specifications:

  * Text: No specific format restrictions.
  * Number: Use numeric formats (Integer/Float); strings are not allowed.
  * Boolean: Use `true` / `false`.
  * Datetime: Use an ISO8601 formatted date-time string (e.g., `2022-11-01T14:16:00`).
  * Date: Use a string in `YYYY-MM-DD` format.

## Set Up E-commerce Tracking

### Introduction

Leveraging on our Javascript plugin, you will be able to collect e-commerce data of your customers as well as visitors. All data collected can be viewed in the report session or do better targeting for message broadcast in Omnichat admin panel.

### Product Data

It refers to product-related events such as adding to cart and checkout etc. It contains the following values:

| Key      | Value Type | Required | Description       |
| -------- | ---------- | -------- | ----------------- |
| id       | string     | Yes      | SKU               |
| name     | string     | Yes      | Product name      |
| brand    | string     | No       | Product brand     |
| category | string     | No       | Product category  |
| variant  | string     | No       | Product variation |
| quantity | integer    | No       | Product quantity  |
| price    | number     | No       | Product price     |

### Order Data

It refers to the information about an order that has taken place. It contains the following values:

| Key             | Value Type | Required | Description        |
| --------------- | ---------- | -------- | ------------------ |
| transaction\_id | string     | Yes      | Transaction ID     |
| amount          | number     | Yes      | Order amount       |
| currency        | string     | No       | Checkout currencyM |

### Track Product Details Views

After clicking a product listing, a user may view the product details page. To track product details views, send a `view_item` event with product details:

```javascript
window.omnichatTracker.push(['event','view_product', {
    "id": "P12345",
    "name": "Android Warhol T-Shirt",
    "brand": "Google",
    "category": "Apparel/T-Shirts",
    "variant": "Black",
    "price": '2.0'
}]);
```

### Track the behaviour of "Add to Shopping Cart"

To track the behaviour of "Add to Shopping Cart", send an `add_to_cart` event with the product information:

```javascript
window.omnichatTracker.push(['event','add_to_cart', {
    "items": [
        {
            "id": "P12345",
            "name": "A Black T-Shirt",
            "brand": "Brand B",
            "category": "Apparel/T-Shirts",
            "variant": "Black",
            "quantity": 2,
            "price": '2.0'
        }
    ]
}]);
```

### Track the behaviour of "Remove from Shopping Cart"

To track the behaviour of "Remove from a Shopping Cart", send an `remove_from_cart` event with the product information:

```javascript
window.omnichatTracker.push(['event','remove_from_cart', {
    "items": [
        {
            "id": "P12345",
            "name": "A Black T-Shirt",
            "brand": "Brand B",
            "category": "Apparel/T-Shirts",
            "variant": "Black",
            "quantity": 1,
            "price": '2.0'
        }
    ]
}]);
```

### Track Checkouts

To track checkouts, send a `checkout` event with the checkout items:

```javascript
window.omnichatTracker.push(['event','checkout', {
    "items": [
        {
            "id": "P12345",
            "name": "A Black T-Shirt",
            "brand": "Brand B",
            "category": "Apparel/T-Shirts",
            "variant": "Black",
            "quantity": 1,
            "price": '2.0'
        },
        {
            "id": "P67890",
            "name": "A Red T-Shirts",
            "brand": "Brand A",
            "category": "Apparel/T-Shirts",
            "variant": "Red",
            "quantity": 2,
            "price": '3.0'
        }
    ]
}]);
```

### Track Purchases

To track transactions, send a `purchase` event with the items in the transaction:

```javascript
window.omnichatTracker.push(['event','purchase', {
    "transaction_id": "ORDER123456",
    "amount": "7.0",
    "currency": "TWD",
    "items": [
        {
            "id": "P12345",
            "name": "A Black T-Shirt",
            "brand": "Brand B",
            "category": "Apparel/T-Shirts",
            "variant": "Black",
            "quantity": 1,
            "price": '2.0'
        },
        {
            "id": "P67890",
            "name": "A Red T-Shirts",
            "brand": "Brand A",
            "category": "Apparel/T-Shirts",
            "variant": "Red",
            "quantity": 2,
            "price": '3.0'
        }
    ]
}]);
```