From cc1405dc65e1f51206a5394e646a3fb7a26f03ad Mon Sep 17 00:00:00 2001
From: Prince <prince@deriv.com>
Date: Tue, 1 Oct 2024 11:25:59 +0400
Subject: [PATCH] chore: added md guide

---
 public/scripts/analytics/guide.md | 169 ++++++++++++++++++++++++++----
 1 file changed, 151 insertions(+), 18 deletions(-)

diff --git a/public/scripts/analytics/guide.md b/public/scripts/analytics/guide.md
index 3d1b96103aa1c..95597b89bead7 100644
--- a/public/scripts/analytics/guide.md
+++ b/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();
+```