> ## Documentation Index
> Fetch the complete documentation index at: https://support.getskara.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Add Viewed Product Tracking

**Note**: In order to track analytics, it is necessary to have the Chat add-on included in your plan.

Viewed Product snippet tracks when customers view specific products on your site, and to enable this tracking you must add a code snippet to your BigCommerce Theme file. Instructions for installing this snippet are described below.

* First, you need to ensure that web tracking is enabled for your BigCommerce website and to do that you need to install the main script on all web pages.
* Navigate to **Storefront > My Themes** from your BigCommerce dashboard.
* From the current theme, click the **Advanced Settings** dropdown and click Edit Theme Files.
* **This opens the web editor**.
* Navigate to **templates > pages** and scroll down to open any page and the bottom of the page, paste the below code, and then click **Save & apply all files**.
* For this snippet to work correctly, repeat step 4 and add it to all of your product pages.

```html theme={null}
<script>
window.skaraSettings = {
  workspace_id: "{{workspaceId}}",
  app_key: "{{appKey}}",
  tenant_id: "demomessenger.salesmate.io",
  hide_default_launcher: true,
  is_include_bigcommerce_tracking_file: true,
  email: "{{customer.email}}",
  name: "{{customer.name}}",
  bigcommerce_store_id: "{{settings.store_hash}}",
};
</script>

<script>
!(function (e, t, a, i, d, n, o) {
  (e.Widget = i),
  (e[i] =
    e[i] ||
    function () {
      (e[i].q = e[i].q || []).push(arguments);
    }),
  (n = t.createElement(a)),
  (o = t.getElementsByTagName(a)[0]),
  (n.id = i),
  (n.src = d),
  (window._Skara_widget_script_url = d),
  (n.async = 1),
  o.parentNode.insertBefore(n, o);
})(
  window,
  document,
  "script",
  "loadwidget",
  "https://demomessenger.skara.io/messenger-platform/messenger-platform-main.js"
);

loadwidget("init", {});
loadwidget("load_widget", "Widget Loading...!");
</script>
```

<Note>
  **Note**: You need to copy workspace\_id, app\_key, & tenant\_id from the messenger installation settings in your skara.
</Note>

* Navigate to **Conversations Icon** on the left menu bar
* Click on **Chats**
* Head to **Inbox Settings** on bottom left.

<img src="https://mintcdn.com/salesmate/l9lRPUMtxWzQCwQW/Screenshot2025-11-14at6.24.01PM.png?fit=max&auto=format&n=l9lRPUMtxWzQCwQW&q=85&s=02b6d83cc3a1744ba20fe5e7e9056fca" alt="Salesmate chat settings navigation" width="3360" height="2100" data-path="Screenshot2025-11-14at6.24.01PM.png" />

* Here, click on **Channel** and then locate the **Skara Chat** channel. From the **Actions** menu, select **Edit**.
* Navigate to the **Installation** section
* Copy the **workspace\_id ,app\_key** & **tenant\_id** from the code snippet of the web installation.

<img src="https://mintcdn.com/salesmate/lFksaO0ddiIhXJPw/chats/installing-salesmate-chats/images/002-salesmate-chat-installation-settings-50772263974553.png?fit=max&auto=format&n=lFksaO0ddiIhXJPw&q=85&s=6ce81a76449bef3b75265dca744f329a" alt="Salesmate chat installation settings" width="1920" height="890" data-path="chats/installing-salesmate-chats/images/002-salesmate-chat-installation-settings-50772263974553.png" />

* From your BigCommerce admin, navigate to **templates > pages** and click to open the product.html page.
* Scroll down to the bottom of this page, and paste the below code.

```javascript theme={null}
<script type="text/javascript">
window.addEventListener('__SM_ANALYTICS_READY__', () => {
  SKARA.productViewed({
    productId: "{{product.id}}",
    storeId: "{{settings.store_hash}}"
  });
});
</script>
```

Optional:

1. You can also track if a customer viewed the product through a quick view card, but for this an extra step is required.
2. From your BigCommerce admin, navigate to **templates > components > products** and open **card.html**, and add the below attribute to the quick view button element.

```html theme={null}
data-product-viewed="{{id}}"
```