Merge pull request #4211 from Codeinwp/feat/hfb-tracking

Tracking improvements for Header/Footer Builder in Customizer
Codeinwp · Mar 12, 2024 · 8ab100d · 8ab100d
2 parents 2e55cc0 + ea6ad55
commit 8ab100d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 13 deletions.
diff --git a/assets/apps/customizer-controls/src/builder/components/BuilderItem.tsx b/assets/apps/customizer-controls/src/builder/components/BuilderItem.tsx
@@ -17,7 +17,8 @@ type Props = {
 
 const BuilderItem: React.FC<Props> = (props) => {
 	const { componentId, currentSection, slot, row, index } = props;
-	const { actions, builder, sidebarItems } = useContext(BuilderContext);
+	const { actions, builder, sidebarItems, device } =
+		useContext(BuilderContext);
 
 	const itemDetails =
 		window.NeveReactCustomize.HFG[builder].items[componentId];
@@ -52,11 +53,13 @@ const BuilderItem: React.FC<Props> = (props) => {
 			})
 		);
 
-		window.tiTrk?.with('neve').set(`${componentId}_removed`, {
-			feature: builder + '_builder',
-			featureComponent: 'component-removed',
-			featureValue: { row, slot, item: componentId },
-		});
+		window.tiTrk
+			?.with('neve')
+			.set(`${componentId}__${device}_${builder}_removed`, {
+				feature: builder + '_builder',
+				featureComponent: 'component-removed',
+				featureValue: { row, slot, item: componentId, device },
+			});
 	};
 
 	const iconSize = 18;

diff --git a/assets/apps/customizer-controls/src/builder/components/ComponentsPopover.tsx b/assets/apps/customizer-controls/src/builder/components/ComponentsPopover.tsx
@@ -25,7 +25,8 @@ const ComponentsPopover: React.FC<Props> = ({
 
 	const url = window.NeveReactCustomize.upsellComponentsLink;
 
-	const { builder, actions, sidebarItems } = useContext(BuilderContext);
+	const { builder, actions, sidebarItems, device } =
+		useContext(BuilderContext);
 	const { updateLayout, setSidebarItems } = actions;
 
 	const addItemToSlot = (itemId: string) => {
@@ -37,11 +38,19 @@ const ComponentsPopover: React.FC<Props> = ({
 		updateLayout(rowId, slotId, nextItems);
 		setSidebarItems(sidebarItems.filter((i) => i.id !== itemId));
 
-		window.tiTrk?.with('neve').set(`${itemId}_added`, {
-			feature: builder + '_builder',
-			featureComponent: 'component-added',
-			featureValue: { row: rowId, slot: slotId, item: itemId },
-		});
+		window.tiTrk
+			?.with('neve')
+			.set(`${itemId}__${device}_${builder}_added`, {
+				feature: builder + '_builder',
+				featureComponent: 'component-added',
+				featureValue: {
+					row: rowId,
+					slot: slotId,
+					item: itemId,
+					device,
+					trigger: 'popover',
+				},
+			});
 		closePopup();
 	};
 

diff --git a/assets/apps/customizer-controls/src/builder/components/Slot.tsx b/assets/apps/customizer-controls/src/builder/components/Slot.tsx
@@ -19,7 +19,7 @@ type Props = {
 };
 
 const Slot: React.FC<Props> = ({ items, slotId, rowId, className }) => {
-	const { currentSection, builder, actions, dragging } =
+	const { currentSection, builder, actions, dragging, device } =
 		useContext(BuilderContext);
 	const { updateLayout, onDragStart } = actions;
 
@@ -44,6 +44,26 @@ const Slot: React.FC<Props> = ({ items, slotId, rowId, className }) => {
 					const nextState = newState.map((item) => {
 						return { id: item.id };
 					});
+
+					// Track the added components.
+					nextState
+						?.filter((item) => !items.some((i) => i.id === item.id))
+						?.forEach((item) => {
+							window.tiTrk
+								?.with('neve')
+								.set(`${item.id}__${device}_${builder}_added`, {
+									feature: builder + '_builder',
+									featureComponent: 'component-added',
+									featureValue: {
+										row: rowId,
+										slot: slotId,
+										item: item.id,
+										device,
+										trigger: 'drag-and-drop',
+									},
+								});
+						});
+
 					updateLayout(rowId, slotId, nextState);
 				}}
 			>