feat(product tours): add click tracking to banner actions

Author: adboio

.changeset/two-monkeys-swim.md

@@ -0,0 +1,5 @@
+---
+'posthog-js': patch
+---
+
+add banner click tracking for tours

packages/browser/src/extensions/product-tours/components/ProductTourBanner.tsx

@@ -6,7 +6,7 @@ import { cancelSVG } from '../../surveys/icons'
 export interface ProductTourBannerProps {
     step: ProductTourStep
     onDismiss: () => void
-    onTriggerTour?: () => void
+    onActionClick?: () => void
     displayFrequency?: ProductTourDisplayFrequency
 }
 
@@ -17,15 +17,16 @@ interface BannerWrapperProps {
 
 interface LinkWrapperProps extends BannerWrapperProps {
     href: string
+    onClick?: () => void
 }
 
 interface ButtonWrapperProps extends BannerWrapperProps {
     onClick: () => void
 }
 
-function LinkWrapper({ class: className, href, children }: LinkWrapperProps): h.JSX.Element {
+function LinkWrapper({ class: className, href, onClick, children }: LinkWrapperProps): h.JSX.Element {
     return (
-        <a class={className} href={href} target="_blank" rel="noopener noreferrer">
+        <a class={className} href={href} target="_blank" rel="noopener noreferrer" onClick={onClick}>
             {children}
         </a>
     )
@@ -58,7 +59,7 @@ function StaticWrapper({ class: className, children }: BannerWrapperProps): h.JS
 export function ProductTourBanner({
     step,
     onDismiss,
-    onTriggerTour,
+    onActionClick,
     displayFrequency,
 }: ProductTourBannerProps): h.JSX.Element {
     const config = step.bannerConfig ?? { behavior: 'sticky' }
@@ -97,15 +98,15 @@ export function ProductTourBanner({
 
     if (action?.type === 'link' && action.link) {
         return (
-            <LinkWrapper class={classNames} href={action.link}>
+            <LinkWrapper class={classNames} href={action.link} onClick={onActionClick}>
                 {content}
             </LinkWrapper>
         )
     }
 
-    if (action?.type === 'trigger_tour' && onTriggerTour) {
+    if (action?.type === 'trigger_tour' && onActionClick) {
         return (
-            <ButtonWrapper class={classNames} onClick={onTriggerTour}>
+            <ButtonWrapper class={classNames} onClick={onActionClick}>
                 {content}
             </ButtonWrapper>
         )

packages/browser/src/extensions/product-tours/product-tour.css

@@ -335,6 +335,7 @@
 }
 
 .ph-tour-button {
+    text-decoration: none;
     display: inline-flex;
     align-items: center;
     justify-content: center;

packages/browser/src/extensions/product-tours/product-tours.tsx

@@ -584,6 +584,35 @@ export class ProductTourManager {
         this._cleanup()
     }
 
+    private _handleBannerActionClick = (): void => {
+        if (!this._activeTour) {
+            return
+        }
+
+        const step = this._getCurrentStep()
+        if (!step) {
+            return
+        }
+
+        const action = step.bannerConfig?.action
+
+        this._captureEvent(ProductTourEventName.BANNER_ACTION_CLICKED, {
+            [ProductTourEventProperties.TOUR_ID]: this._activeTour.id,
+            [ProductTourEventProperties.TOUR_NAME]: this._activeTour.name,
+            [ProductTourEventProperties.TOUR_ITERATION]: this._activeTour.current_iteration || 1,
+            [ProductTourEventProperties.TOUR_STEP_ID]: step.id,
+            [ProductTourEventProperties.TOUR_STEP_ORDER]: this._currentStepIndex,
+            [ProductTourEventProperties.TOUR_BUTTON_ACTION]: action?.type,
+            [ProductTourEventProperties.TOUR_BUTTON_LINK]: action?.link,
+            [ProductTourEventProperties.TOUR_BUTTON_TOUR_ID]: action?.tourId,
+        })
+
+        if (action?.type === 'trigger_tour' && action.tourId) {
+            this._cleanup()
+            this.showTourById(action.tourId)
+        }
+    }
+
     private _handleButtonClick = (button: ProductTourStepButton): void => {
         if (this._activeTour) {
             const currentStep = this._activeTour.steps[this._currentStepIndex]
@@ -821,19 +850,11 @@ export class ProductTourManager {
 
         const { shadow } = result
 
-        const handleTriggerTour = () => {
-            const tourId = step.bannerConfig?.action?.tourId
-            if (tourId) {
-                this._cleanup()
-                this.showTourById(tourId)
-            }
-        }
-
         render(
             <ProductTourBanner
                 step={step}
                 onDismiss={() => this.dismissTour('user_clicked_skip')}
-                onTriggerTour={handleTriggerTour}
+                onActionClick={this._handleBannerActionClick}
                 displayFrequency={this._activeTour.display_frequency}
             />,
             shadow

packages/browser/src/posthog-product-tours-types.ts

@@ -197,6 +197,7 @@ export enum ProductTourEventName {
     BUTTON_CLICKED = 'product tour button clicked',
     STEP_SELECTOR_FAILED = 'product tour step selector failed',
     BANNER_CONTAINER_SELECTOR_FAILED = 'product tour banner container selector failed',
+    BANNER_ACTION_CLICKED = 'product tour banner action clicked',
 }
 
 export enum ProductTourEventProperties {