Merge pull request #2000 from prince-deriv/analytics-guide

Prince/Analytics md guide

public/scripts/analytics/guide.md

@@ -1,26 +1,159 @@
-# Project Title
+# Cache Track Events Documentation
 
-A brief description of what the project is about.
+This documentation covers the `cacheTrackEvents` utility for managing page load and user interaction events. It caches events and fires them once the analytics service is ready.
 
-## Table of Contents
+## Methods
 
-- [Introduction](#introduction)
-- [Installation](#installation)
-- [Usage](#usage)
-- [Features](#features)
-- [Contributing](#contributing)
-- [License](#license)
+### 1. `cacheTrackEvents.loadEvent(events)`
 
-## Introduction
+Triggers an event when the page is loaded and immediately stores it in the cache if analytics is not yet ready.
 
-Provide a high-level overview of the project. Describe the problem it solves or the goal it achieves.
+**Example usage:**
 
-## Installation
+```js
+cacheTrackEvents.loadEvent([
+  {
+    name: "ce_virtual_signup_form",
+    properties: {
+      action: "email_confirmation_sent",
+      form_source: window.location.hostname,
+      form_name: "virtual_signup_ppc_landing",
+      url: window.location.href,
+    },
+  },
+]);
+```
 
-To install and run the project locally, follow these steps:
+### 2. `cacheTrackEvents.pageLoadEvent(events)`
 
-```bash
-git clone https://github.com/username/repository.git
-cd repository
-npm install
-npm start
+Triggers an event on page load with specific page targeting. You can either include or exclude pages to trigger the event accordingly.
+
+**Example usage:**
+
+```js
+cacheTrackEvents.pageLoadEvent([
+  {
+    excludedPages: ["signup-success"],
+    event: {
+      name: "ce_virtual_signup_form",
+      properties: {
+        action: "open",
+        form_source: window.location.hostname,
+        form_name: "virtual_signup_ppc_landing",
+        url: window.location.href,
+      },
+    },
+  },
+  {
+    pages: ["signup-success"],
+    event: {
+      name: "ce_virtual_signup_form",
+      properties: {
+        action: "email_confirmation_sent",
+        form_source: window.location.hostname,
+        form_name: "virtual_signup_ppc_landing",
+        url: window.location.href,
+      },
+    },
+  },
+]);
+```
+
+### 3. `cacheTrackEvents.addEventhandler(handlers)`
+
+This function waits for the specified elements to be ready. It applies click listeners that store events in cookies if analytics is not ready, or fire them immediately if analytics is available.
+
+**Example usage:**
+
+```js
+cacheTrackEvents.addEventhandler([
+  {
+    element: ".btn-free-demo .w-button",
+    event: {
+      name: "ce_cta_clicks",
+      properties: {
+        action: "click",
+        cta_name: "Try free demo",
+      },
+    },
+  },
+  {
+    element: '[data-attributes="btn-primary-fcta"][data-class="w-button"]',
+    event: {
+      name: "ce_cta_clicks",
+      properties: {
+        action: "click",
+        cta_name: "Try free demo",
+      },
+    },
+  },
+  {
+    element: ".livechatbtn",
+    event: {
+      name: "ce_widget_usage_form",
+      properties: {
+        action: "click",
+        widget_name: "livechat",
+      },
+    },
+  },
+  {
+    element: ".whatsapp_chat",
+    event: {
+      name: "ce_widget_usage_form",
+      properties: {
+        action: "click",
+        widget_name: "whatsapp",
+      },
+    },
+  },
+  {
+    element: ".tradershub-btn",
+    event: {
+      name: "ce_cta_clicks",
+      properties: {
+        action: "click",
+        cta_name: "Traders Hub",
+      },
+    },
+  },
+  {
+    element: '[data-attributes="btn-primary-nav"]',
+    event: {
+      name: "ce_cta_clicks",
+      properties: {
+        action: "click",
+        cta_name: "Try free demo",
+      },
+    },
+  },
+  {
+    element: '[data-attributes="btn-primary-nav"].tradershub-btn',
+    event: {
+      name: "ce_cta_clicks",
+      properties: {
+        action: "click",
+        cta_name: "Trader's Hub",
+      },
+    },
+  },
+  {
+    element: '[data-attributes="btn-secondary-nav"]',
+    event: {
+      name: "ce_cta_clicks",
+      properties: {
+        action: "click",
+        cta_name: "Login",
+      },
+    },
+  },
+]);
+```
+
+### 4. `cacheTrackEvents.pageView()`
+
+This triggers the RudderStack page view event when analytics is loaded. If the user moves to another page while analytics is not yet ready, it will store it in cookies to handle and fire accordingly.
+
+```js
+cacheTrackEvents.pageView();
+```