Merge pull request #1392 from inplayer-org/feat/add-analytics-to-components

Feat/add analytics to components

Author: mustran

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.18] - 10.01.2022
+
+## Added
+
+- Handlers for Checkbox, Radiobutton, Daypicker and Datepicker.
+- Handler for selected Tab change.
+
 # [2.5.17] - 12.11.2021
 
 ## Added

index.d.ts

@@ -81,13 +81,23 @@ export enum AnalyticsEvents {
   CLICK = 'click',
   DROPDOWN_CHANGE = 'dropdown_change',
   DROPDOWN_SELECT = 'dropdown_select',
+  CHECKBOX_ON = 'checkbox_on',
+  CHECKBOX_OFF = 'checkbox_off',
+  RADIOBUTTON_SELECT = 'radiobutton_select',
+  DATEPICKER_CHANGE = 'datepicker_date_change',
+  DAYPICKER_CHANGE = 'daypicker_date_change',
 }
 
 export enum AnalyticsComponentType {
   BUTTON = 'button',
   DROPDOWN = 'dropdown',
   ICON = 'icon',
   LINK = 'link',
+  CHECKBOX = 'checkbox',
+  DATEPICKER = 'datepicker',
+  DAYPICKER = 'daypicker',
+  DATEPICKER_PRESET = 'datepicker_preset',
+  TAB = 'tab',
 }
 
 export interface Event {
@@ -96,8 +106,8 @@ export interface Event {
   type: AnalyticsComponentType | string;
   tag: AnalyticsTag;
   pages: AnalyticsPage[];
-  merchantId: number;
-  ip: string;
+  merchantId?: number;
+  ip?: string;
 }
 
 export type AnalyticsHandlerFn = (event: Record<string, any>) => void;
@@ -233,12 +243,12 @@ export interface TableOptions<T extends TableRowData> {
   headerSection?: Node | JSX.Element | null;
 }
 
-export interface TableButtonProps {
+interface TableButtonProps extends AnalyticsProps {
   label: string;
   icon?: string | ReactNode;
   onClick: (e: SyntheticEvent) => any;
   type: string;
-};
+}
 
 export interface TableProps<TableData extends TableRowData = TableRowData> extends AnalyticsProps{
   columns: Array<TableColumn<TableData>>;

src/analytics/index.tsx

@@ -41,13 +41,23 @@ export enum AnalyticsEvents {
   CLICK = 'click',
   DROPDOWN_CHANGE = 'dropdown_change',
   DROPDOWN_SELECT = 'dropdown_select',
+  CHECKBOX_ON = 'checkbox_on',
+  CHECKBOX_OFF = 'checkbox_off',
+  RADIOBUTTON_SELECT = 'radiobutton_select',
+  DATEPICKER_CHANGE = 'datepicker_date_change',
+  DAYPICKER_CHANGE = 'daypicker_date_change',
 }
 
 export enum AnalyticsComponentType {
   BUTTON = 'button',
   DROPDOWN = 'dropdown',
   ICON = 'icon',
   LINK = 'link',
+  CHECKBOX = 'checkbox',
+  DATEPICKER = 'datepicker',
+  DAYPICKER = 'daypicker',
+  DATEPICKER_PRESET = 'datepicker_preset',
+  TAB = 'tab',
 }
 
 export interface Event {

src/components/Button/Button.tsx

@@ -79,22 +79,20 @@ const Button = ({
         modifiers={buttonModifiers}
         fullWidth={fullWidth}
         fullHeight={fullHeight}
-        onClick={
-          !tag
-            ? onClick
-            : (e) => {
-                if (onClick) onClick(e);
+        onClick={(e) => {
+          onClick?.(e);
 
-                tracker.track({
-                  event: AnalyticsEvents.CLICK,
-                  type: AnalyticsComponentType.BUTTON,
-                  tag,
-                  pages,
-                  merchantId,
-                  ip,
-                });
-              }
-        }
+          if (tag) {
+            tracker.track({
+              event: AnalyticsEvents.CLICK,
+              type: AnalyticsComponentType.BUTTON,
+              tag,
+              pages,
+              merchantId,
+              ip,
+            });
+          }
+        }}
         {...rest}
       >
         <Content icon={icon} iconPosition={iconPosition}>

src/components/Checkbox/Checkbox.tsx

@@ -1,7 +1,12 @@
 import React, { ChangeEvent, RefObject } from 'react';
 import Label from '../Label';
 import CheckboxWrapper from './CheckboxWrapper';
-import { AnalyticsProps } from '../../analytics';
+import {
+  AnalyticsComponent,
+  AnalyticsComponentType,
+  AnalyticsProps,
+  AnalyticsEvents,
+} from '../../analytics';
 
 type Props = {
   label: string;
@@ -19,15 +24,50 @@ const Checkbox: React.FC<Props> = ({
   onChange,
   containerRef = null,
   disabled = false,
+  tag = '',
   ...rest
 }) => {
   const onCheckboxChange = (e: ChangeEvent<HTMLInputElement>): any => onChange(e.target.checked);
 
   return (
-    <CheckboxWrapper ref={containerRef}>
-      <input disabled={disabled} type="checkbox" id={id} onChange={onCheckboxChange} {...rest} />
-      <Label htmlFor={id}>{label}</Label>
-    </CheckboxWrapper>
+    <AnalyticsComponent>
+      {({ pages, tracker, merchantId, ip }) => (
+        <CheckboxWrapper ref={containerRef}>
+          <input
+            disabled={disabled}
+            type="checkbox"
+            id={id}
+            onChange={(e) => {
+              onCheckboxChange(e);
+
+              if (tag) {
+                if (e.target.checked) {
+                  tracker.track({
+                    event: AnalyticsEvents.CHECKBOX_ON,
+                    type: AnalyticsComponentType.CHECKBOX,
+                    tag,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                } else {
+                  tracker.track({
+                    event: AnalyticsEvents.CHECKBOX_OFF,
+                    type: AnalyticsComponentType.CHECKBOX,
+                    tag,
+                    pages,
+                    merchantId,
+                    ip,
+                  });
+                }
+              }
+            }}
+            {...rest}
+          />
+          <Label htmlFor={id}>{label}</Label>
+        </CheckboxWrapper>
+      )}
+    </AnalyticsComponent>
   );
 };