posthog-js 1.347.2 → 1.348.0

package/lib/src/extensions/product-tours/components/ProductTourSurveyStepInner.js

@@ -93,6 +93,6 @@ function ProductTourSurveyStepInner(_a) {
     if (!survey) {
         return (0, jsx_runtime_1.jsx)("div", {});
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { class: "ph-tour-dismiss", onClick: onDismiss, "aria-label": "Close survey", style: cursorStyle, children: (0, icons_1.cancelSVG)() }), (0, jsx_runtime_1.jsx)("div", { class: "ph-tour-survey-question", children: survey.questionText }), isOpenText ? ((0, jsx_runtime_1.jsx)(OpenTextInput, { value: textValue, onChange: setTextValue, onSubmit: handleTextSubmit, isInteractive: isInteractive })) : ((0, jsx_runtime_1.jsx)(RatingInput, { survey: survey, onSubmit: onSubmit, isInteractive: isInteractive })), (0, jsx_runtime_1.jsxs)("div", { class: "ph-tour-footer", children: [(0, jsx_runtime_1.jsxs)("span", { class: "ph-tour-progress", children: [stepIndex + 1, " of ", totalSteps] }), (0, jsx_runtime_1.jsxs)("div", { class: "ph-tour-buttons", children: [!isFirstStep && ((0, jsx_runtime_1.jsx)("button", { class: "ph-tour-button ph-tour-button--secondary", onClick: onPrevious, style: cursorStyle, children: "Back" })), isOpenText && ((0, jsx_runtime_1.jsx)("button", { class: "ph-tour-button ph-tour-button--primary", onClick: handleTextSubmit, style: cursorStyle, children: "Submit" }))] })] }), !whiteLabel && ((0, jsx_runtime_1.jsxs)("a", { href: isInteractive ? 'https://posthog.com/product-tours' : undefined, target: isInteractive ? '_blank' : undefined, rel: isInteractive ? 'noopener noreferrer' : undefined, class: "ph-tour-branding", style: isInteractive ? undefined : { cursor: 'default', pointerEvents: 'none' }, children: ["Survey by ", icons_1.IconPosthogLogo] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { class: "ph-tour-dismiss", onClick: onDismiss, "aria-label": "Close survey", style: cursorStyle, children: (0, icons_1.cancelSVG)() }), (0, jsx_runtime_1.jsx)("div", { class: "ph-tour-survey-question", children: survey.questionText }), isOpenText ? ((0, jsx_runtime_1.jsx)(OpenTextInput, { value: textValue, onChange: setTextValue, onSubmit: handleTextSubmit, isInteractive: isInteractive })) : ((0, jsx_runtime_1.jsx)(RatingInput, { survey: survey, onSubmit: onSubmit, isInteractive: isInteractive })), (0, jsx_runtime_1.jsxs)("div", { class: "ph-tour-footer", children: [(0, jsx_runtime_1.jsxs)("span", { class: "ph-tour-progress", children: [stepIndex + 1, " of ", totalSteps] }), (0, jsx_runtime_1.jsxs)("div", { class: "ph-tour-buttons", children: [!isFirstStep && ((0, jsx_runtime_1.jsx)("button", { class: "ph-tour-button ph-tour-button--secondary", onClick: onPrevious, style: cursorStyle, children: survey.backButtonText || 'Back' })), isOpenText && ((0, jsx_runtime_1.jsx)("button", { class: "ph-tour-button ph-tour-button--primary", onClick: handleTextSubmit, style: cursorStyle, children: survey.submitButtonText || 'Submit' }))] })] }), !whiteLabel && ((0, jsx_runtime_1.jsxs)("a", { href: isInteractive ? 'https://posthog.com/product-tours' : undefined, target: isInteractive ? '_blank' : undefined, rel: isInteractive ? 'noopener noreferrer' : undefined, class: "ph-tour-branding", style: isInteractive ? undefined : { cursor: 'default', pointerEvents: 'none' }, children: ["Survey by ", icons_1.IconPosthogLogo] }))] }));
 }
 //# sourceMappingURL=ProductTourSurveyStepInner.js.map

package/lib/src/extensions/product-tours/components/ProductTourSurveyStepInner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductTourSurveyStepInner.js","sourceRoot":"","sources":["../../../../../src/extensions/product-tours/components/ProductTourSurveyStepInner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from 'preact'\nimport { useState, useRef, useEffect } from 'preact/hooks'\nimport { ProductTourStep, ProductTourAppearance, ProductTourSurveyQuestion } from '../../../posthog-product-tours-types'\nimport { cancelSVG, IconPosthogLogo } from '../../surveys/icons'\nimport {\n    dissatisfiedEmoji,\n    neutralEmoji,\n    satisfiedEmoji,\n    veryDissatisfiedEmoji,\n    verySatisfiedEmoji,\n} from '../../surveys/icons'\n\nexport interface ProductTourSurveyStepInnerProps {\n    step: ProductTourStep\n    appearance?: ProductTourAppearance\n    stepIndex: number\n    totalSteps: number\n    onPrevious?: () => void\n    onSubmit?: (response: string | number | null) => void\n    onDismiss?: () => void\n}\n\nconst threeScaleEmojis = [dissatisfiedEmoji, neutralEmoji, satisfiedEmoji]\nconst fiveScaleEmojis = [veryDissatisfiedEmoji, dissatisfiedEmoji, neutralEmoji, satisfiedEmoji, verySatisfiedEmoji]\n\nfunction getScaleNumbers(scale: number): number[] {\n    switch (scale) {\n        case 5:\n            return [1, 2, 3, 4, 5]\n        case 10:\n            return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\n        default:\n            return [1, 2, 3, 4, 5]\n    }\n}\n\nfunction OpenTextInput({\n    value,\n    onChange,\n    onSubmit,\n    isInteractive,\n}: {\n    value: string\n    onChange: (text: string) => void\n    onSubmit?: () => void\n    isInteractive: boolean\n}): h.JSX.Element {\n    const inputRef = useRef<HTMLTextAreaElement>(null)\n\n    useEffect(() => {\n        if (isInteractive) {\n            setTimeout(() => inputRef.current?.focus(), 100)\n        }\n    }, [isInteractive])\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n        if (e.key === 'Enter' && e.metaKey && isInteractive) {\n            e.preventDefault()\n            onSubmit?.()\n        }\n    }\n\n    return (\n        <textarea\n            ref={inputRef}\n            class=\"ph-tour-survey-textarea\"\n            rows={3}\n            placeholder=\"Your feedback (optional)...\"\n            value={value}\n            onInput={(e) => onChange((e.target as HTMLTextAreaElement).value)}\n            onKeyDown={handleKeyDown}\n            disabled={!isInteractive}\n            style={isInteractive ? undefined : { cursor: 'default' }}\n        />\n    )\n}\n\nfunction RatingInput({\n    survey,\n    onSubmit,\n    isInteractive,\n}: {\n    survey: ProductTourSurveyQuestion\n    onSubmit?: (rating: number) => void\n    isInteractive: boolean\n}): h.JSX.Element {\n    const [selectedRating, setSelectedRating] = useState<number | null>(null)\n    const display = survey.display || 'emoji'\n    const scale = survey.scale || 5\n\n    const handleSelect = (rating: number) => {\n        if (!isInteractive) {\n            return\n        }\n        setSelectedRating(rating)\n        // Auto-submit on selection for ratings\n        onSubmit?.(rating)\n    }\n\n    if (display === 'emoji') {\n        const emojis = scale === 3 ? threeScaleEmojis : fiveScaleEmojis\n        return (\n            <div class=\"ph-tour-survey-rating-container\">\n                <div class=\"ph-tour-survey-rating-emoji\">\n                    {emojis.map((emoji, idx) => {\n                        const rating = idx + 1\n                        const isActive = selectedRating === rating\n                        return (\n                            <button\n                                key={idx}\n                                type=\"button\"\n                                class={`ph-tour-survey-emoji-button ${isActive ? 'ph-tour-survey-emoji-button--active' : ''}`}\n                                onClick={() => handleSelect(rating)}\n                                style={isInteractive ? undefined : { cursor: 'default' }}\n                                aria-label={`Rate ${rating}`}\n                            >\n                                {emoji}\n                            </button>\n                        )\n                    })}\n                </div>\n                {(survey.lowerBoundLabel || survey.upperBoundLabel) && (\n                    <div class=\"ph-tour-survey-rating-labels\">\n                        <span>{survey.lowerBoundLabel}</span>\n                        <span>{survey.upperBoundLabel}</span>\n                    </div>\n                )}\n            </div>\n        )\n    }\n\n    // Number display\n    const numbers = getScaleNumbers(scale)\n    return (\n        <div class=\"ph-tour-survey-rating-container\">\n            <div\n                class=\"ph-tour-survey-rating-numbers\"\n                style={{ gridTemplateColumns: `repeat(${numbers.length}, minmax(0, 1fr))` }}\n            >\n                {numbers.map((num) => {\n                    const isActive = selectedRating === num\n                    return (\n                        <button\n                            key={num}\n                            type=\"button\"\n                            class={`ph-tour-survey-number-button ${isActive ? 'ph-tour-survey-number-button--active' : ''}`}\n                            onClick={() => handleSelect(num)}\n                            style={isInteractive ? undefined : { cursor: 'default' }}\n                            aria-label={`Rate ${num}`}\n                        >\n                            {num}\n                        </button>\n                    )\n                })}\n            </div>\n            {(survey.lowerBoundLabel || survey.upperBoundLabel) && (\n                <div class=\"ph-tour-survey-rating-labels\">\n                    <span>{survey.lowerBoundLabel}</span>\n                    <span>{survey.upperBoundLabel}</span>\n                </div>\n            )}\n        </div>\n    )\n}\n\nexport function ProductTourSurveyStepInner({\n    step,\n    appearance,\n    stepIndex,\n    totalSteps,\n    onPrevious,\n    onSubmit,\n    onDismiss,\n}: ProductTourSurveyStepInnerProps): h.JSX.Element {\n    const [textValue, setTextValue] = useState('')\n    const survey = step.survey\n    const whiteLabel = appearance?.whiteLabel ?? false\n    const isFirstStep = stepIndex === 0\n    const isOpenText = survey?.type === 'open'\n\n    const isInteractive = !!(onPrevious || onSubmit || onDismiss)\n    const cursorStyle = isInteractive ? undefined : { cursor: 'default' }\n\n    const handleTextSubmit = () => {\n        onSubmit?.(textValue.trim() || null)\n    }\n\n    if (!survey) {\n        return <div />\n    }\n\n    return (\n        <>\n            <button class=\"ph-tour-dismiss\" onClick={onDismiss} aria-label=\"Close survey\" style={cursorStyle}>\n                {cancelSVG()}\n            </button>\n\n            <div class=\"ph-tour-survey-question\">{survey.questionText}</div>\n\n            {isOpenText ? (\n                <OpenTextInput\n                    value={textValue}\n                    onChange={setTextValue}\n                    onSubmit={handleTextSubmit}\n                    isInteractive={isInteractive}\n                />\n            ) : (\n                <RatingInput survey={survey} onSubmit={onSubmit} isInteractive={isInteractive} />\n            )}\n\n            <div class=\"ph-tour-footer\">\n                <span class=\"ph-tour-progress\">\n                    {stepIndex + 1} of {totalSteps}\n                </span>\n\n                <div class=\"ph-tour-buttons\">\n                    {!isFirstStep && (\n                        <button\n                            class=\"ph-tour-button ph-tour-button--secondary\"\n                            onClick={onPrevious}\n                            style={cursorStyle}\n                        >\n                            Back\n                        </button>\n                    )}\n                    {isOpenText && (\n                        <button\n                            class=\"ph-tour-button ph-tour-button--primary\"\n                            onClick={handleTextSubmit}\n                            style={cursorStyle}\n                        >\n                            Submit\n                        </button>\n                    )}\n                </div>\n            </div>\n\n            {!whiteLabel && (\n                <a\n                    href={isInteractive ? 'https://posthog.com/product-tours' : undefined}\n                    target={isInteractive ? '_blank' : undefined}\n                    rel={isInteractive ? 'noopener noreferrer' : undefined}\n                    class=\"ph-tour-branding\"\n                    style={isInteractive ? undefined : { cursor: 'default', pointerEvents: 'none' }}\n                >\n                    Survey by {IconPosthogLogo}\n                </a>\n            )}\n        </>\n    )\n}\n"]}
+{"version":3,"file":"ProductTourSurveyStepInner.js","sourceRoot":"","sources":["../../../../../src/extensions/product-tours/components/ProductTourSurveyStepInner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from 'preact'\nimport { useState, useRef, useEffect } from 'preact/hooks'\nimport { ProductTourStep, ProductTourAppearance, ProductTourSurveyQuestion } from '../../../posthog-product-tours-types'\nimport { cancelSVG, IconPosthogLogo } from '../../surveys/icons'\nimport {\n    dissatisfiedEmoji,\n    neutralEmoji,\n    satisfiedEmoji,\n    veryDissatisfiedEmoji,\n    verySatisfiedEmoji,\n} from '../../surveys/icons'\n\nexport interface ProductTourSurveyStepInnerProps {\n    step: ProductTourStep\n    appearance?: ProductTourAppearance\n    stepIndex: number\n    totalSteps: number\n    onPrevious?: () => void\n    onSubmit?: (response: string | number | null) => void\n    onDismiss?: () => void\n}\n\nconst threeScaleEmojis = [dissatisfiedEmoji, neutralEmoji, satisfiedEmoji]\nconst fiveScaleEmojis = [veryDissatisfiedEmoji, dissatisfiedEmoji, neutralEmoji, satisfiedEmoji, verySatisfiedEmoji]\n\nfunction getScaleNumbers(scale: number): number[] {\n    switch (scale) {\n        case 5:\n            return [1, 2, 3, 4, 5]\n        case 10:\n            return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\n        default:\n            return [1, 2, 3, 4, 5]\n    }\n}\n\nfunction OpenTextInput({\n    value,\n    onChange,\n    onSubmit,\n    isInteractive,\n}: {\n    value: string\n    onChange: (text: string) => void\n    onSubmit?: () => void\n    isInteractive: boolean\n}): h.JSX.Element {\n    const inputRef = useRef<HTMLTextAreaElement>(null)\n\n    useEffect(() => {\n        if (isInteractive) {\n            setTimeout(() => inputRef.current?.focus(), 100)\n        }\n    }, [isInteractive])\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n        if (e.key === 'Enter' && e.metaKey && isInteractive) {\n            e.preventDefault()\n            onSubmit?.()\n        }\n    }\n\n    return (\n        <textarea\n            ref={inputRef}\n            class=\"ph-tour-survey-textarea\"\n            rows={3}\n            placeholder=\"Your feedback (optional)...\"\n            value={value}\n            onInput={(e) => onChange((e.target as HTMLTextAreaElement).value)}\n            onKeyDown={handleKeyDown}\n            disabled={!isInteractive}\n            style={isInteractive ? undefined : { cursor: 'default' }}\n        />\n    )\n}\n\nfunction RatingInput({\n    survey,\n    onSubmit,\n    isInteractive,\n}: {\n    survey: ProductTourSurveyQuestion\n    onSubmit?: (rating: number) => void\n    isInteractive: boolean\n}): h.JSX.Element {\n    const [selectedRating, setSelectedRating] = useState<number | null>(null)\n    const display = survey.display || 'emoji'\n    const scale = survey.scale || 5\n\n    const handleSelect = (rating: number) => {\n        if (!isInteractive) {\n            return\n        }\n        setSelectedRating(rating)\n        // Auto-submit on selection for ratings\n        onSubmit?.(rating)\n    }\n\n    if (display === 'emoji') {\n        const emojis = scale === 3 ? threeScaleEmojis : fiveScaleEmojis\n        return (\n            <div class=\"ph-tour-survey-rating-container\">\n                <div class=\"ph-tour-survey-rating-emoji\">\n                    {emojis.map((emoji, idx) => {\n                        const rating = idx + 1\n                        const isActive = selectedRating === rating\n                        return (\n                            <button\n                                key={idx}\n                                type=\"button\"\n                                class={`ph-tour-survey-emoji-button ${isActive ? 'ph-tour-survey-emoji-button--active' : ''}`}\n                                onClick={() => handleSelect(rating)}\n                                style={isInteractive ? undefined : { cursor: 'default' }}\n                                aria-label={`Rate ${rating}`}\n                            >\n                                {emoji}\n                            </button>\n                        )\n                    })}\n                </div>\n                {(survey.lowerBoundLabel || survey.upperBoundLabel) && (\n                    <div class=\"ph-tour-survey-rating-labels\">\n                        <span>{survey.lowerBoundLabel}</span>\n                        <span>{survey.upperBoundLabel}</span>\n                    </div>\n                )}\n            </div>\n        )\n    }\n\n    // Number display\n    const numbers = getScaleNumbers(scale)\n    return (\n        <div class=\"ph-tour-survey-rating-container\">\n            <div\n                class=\"ph-tour-survey-rating-numbers\"\n                style={{ gridTemplateColumns: `repeat(${numbers.length}, minmax(0, 1fr))` }}\n            >\n                {numbers.map((num) => {\n                    const isActive = selectedRating === num\n                    return (\n                        <button\n                            key={num}\n                            type=\"button\"\n                            class={`ph-tour-survey-number-button ${isActive ? 'ph-tour-survey-number-button--active' : ''}`}\n                            onClick={() => handleSelect(num)}\n                            style={isInteractive ? undefined : { cursor: 'default' }}\n                            aria-label={`Rate ${num}`}\n                        >\n                            {num}\n                        </button>\n                    )\n                })}\n            </div>\n            {(survey.lowerBoundLabel || survey.upperBoundLabel) && (\n                <div class=\"ph-tour-survey-rating-labels\">\n                    <span>{survey.lowerBoundLabel}</span>\n                    <span>{survey.upperBoundLabel}</span>\n                </div>\n            )}\n        </div>\n    )\n}\n\nexport function ProductTourSurveyStepInner({\n    step,\n    appearance,\n    stepIndex,\n    totalSteps,\n    onPrevious,\n    onSubmit,\n    onDismiss,\n}: ProductTourSurveyStepInnerProps): h.JSX.Element {\n    const [textValue, setTextValue] = useState('')\n    const survey = step.survey\n    const whiteLabel = appearance?.whiteLabel ?? false\n    const isFirstStep = stepIndex === 0\n    const isOpenText = survey?.type === 'open'\n\n    const isInteractive = !!(onPrevious || onSubmit || onDismiss)\n    const cursorStyle = isInteractive ? undefined : { cursor: 'default' }\n\n    const handleTextSubmit = () => {\n        onSubmit?.(textValue.trim() || null)\n    }\n\n    if (!survey) {\n        return <div />\n    }\n\n    return (\n        <>\n            <button class=\"ph-tour-dismiss\" onClick={onDismiss} aria-label=\"Close survey\" style={cursorStyle}>\n                {cancelSVG()}\n            </button>\n\n            <div class=\"ph-tour-survey-question\">{survey.questionText}</div>\n\n            {isOpenText ? (\n                <OpenTextInput\n                    value={textValue}\n                    onChange={setTextValue}\n                    onSubmit={handleTextSubmit}\n                    isInteractive={isInteractive}\n                />\n            ) : (\n                <RatingInput survey={survey} onSubmit={onSubmit} isInteractive={isInteractive} />\n            )}\n\n            <div class=\"ph-tour-footer\">\n                <span class=\"ph-tour-progress\">\n                    {stepIndex + 1} of {totalSteps}\n                </span>\n\n                <div class=\"ph-tour-buttons\">\n                    {!isFirstStep && (\n                        <button\n                            class=\"ph-tour-button ph-tour-button--secondary\"\n                            onClick={onPrevious}\n                            style={cursorStyle}\n                        >\n                            {survey.backButtonText || 'Back'}\n                        </button>\n                    )}\n                    {isOpenText && (\n                        <button\n                            class=\"ph-tour-button ph-tour-button--primary\"\n                            onClick={handleTextSubmit}\n                            style={cursorStyle}\n                        >\n                            {survey.submitButtonText || 'Submit'}\n                        </button>\n                    )}\n                </div>\n            </div>\n\n            {!whiteLabel && (\n                <a\n                    href={isInteractive ? 'https://posthog.com/product-tours' : undefined}\n                    target={isInteractive ? '_blank' : undefined}\n                    rel={isInteractive ? 'noopener noreferrer' : undefined}\n                    class=\"ph-tour-branding\"\n                    style={isInteractive ? undefined : { cursor: 'default', pointerEvents: 'none' }}\n                >\n                    Survey by {IconPosthogLogo}\n                </a>\n            )}\n        </>\n    )\n}\n"]}

package/lib/src/extensions/product-tours/product-tours.d.ts

@@ -44,6 +44,8 @@ export declare class ProductTourManager {
     private _removeTriggerSelectorListener;
     private _removeAllTriggerListeners;
     private _captureEvent;
+    private _captureStepShown;
+    private _captureStepSelectorFailed;
     getActiveProductTours(callback: ProductTourCallback): void;
     resetTour(tourId: string): void;
     resetAllTours(): void;

package/lib/src/extensions/product-tours/product-tours.js

@@ -25,6 +25,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProductTourManager = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
 var preact_1 = require("preact");
+var posthog_product_tours_types_1 = require("../../posthog-product-tours-types");
 var posthog_surveys_types_1 = require("../../posthog-surveys-types");
 var product_tours_utils_1 = require("./product-tours-utils");
 var ProductTourTooltip_1 = require("./components/ProductTourTooltip");
@@ -174,15 +175,16 @@ var ProductTourManager = /** @class */ (function () {
             }
         };
         this.nextStep = function () {
+            var _a;
             if (!_this._activeTour) {
                 return;
             }
             var currentStep = _this._activeTour.steps[_this._currentStepIndex];
-            _this._captureEvent('product tour step completed', {
-                $product_tour_id: _this._activeTour.id,
-                $product_tour_step_id: currentStep.id,
-                $product_tour_step_order: _this._currentStepIndex,
-            });
+            _this._captureEvent(posthog_product_tours_types_1.ProductTourEventName.STEP_COMPLETED, (_a = {},
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ID] = _this._activeTour.id,
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ID] = currentStep.id,
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ORDER] = _this._currentStepIndex,
+                _a));
             if (_this._currentStepIndex < _this._activeTour.steps.length - 1) {
                 _this._setStepIndex(_this._currentStepIndex + 1);
                 _this._renderCurrentStep();
@@ -199,32 +201,33 @@ var ProductTourManager = /** @class */ (function () {
             _this._renderCurrentStep();
         };
         this.dismissTour = function (reason) {
-            var _a;
+            var _a, _b;
             if (reason === void 0) { reason = 'user_clicked_skip'; }
             if (!_this._activeTour) {
                 return;
             }
             var currentStep = _this._activeTour.steps[_this._currentStepIndex];
-            _this._captureEvent('product tour dismissed', {
-                $product_tour_id: _this._activeTour.id,
-                $product_tour_step_id: currentStep.id,
-                $product_tour_step_order: _this._currentStepIndex,
-                $product_tour_dismiss_reason: reason,
-            });
+            _this._captureEvent(posthog_product_tours_types_1.ProductTourEventName.DISMISSED, (_a = {},
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ID] = _this._activeTour.id,
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ID] = currentStep.id,
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ORDER] = _this._currentStepIndex,
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_DISMISS_REASON] = reason,
+                _a));
             if (!_this._isPreviewMode) {
                 storage_1.localStore._set("".concat(constants_1.TOUR_DISMISSED_KEY_PREFIX).concat(_this._activeTour.id), true);
                 _this._instance.capture('$set', {
-                    $set: (_a = {}, _a["$product_tour_dismissed/".concat(_this._activeTour.id)] = true, _a),
+                    $set: (_b = {}, _b["$product_tour_dismissed/".concat(_this._activeTour.id)] = true, _b),
                 });
             }
             window.dispatchEvent(new CustomEvent('PHProductTourDismissed', { detail: { tourId: _this._activeTour.id, reason: reason } }));
             _this._cleanup();
         };
         this._handleButtonClick = function (button) {
+            var _a, _b, _c;
             if (_this._activeTour) {
                 var currentStep = _this._activeTour.steps[_this._currentStepIndex];
                 if (currentStep) {
-                    _this._captureEvent('product tour button clicked', __assign(__assign({ $product_tour_id: _this._activeTour.id, $product_tour_name: _this._activeTour.name, $product_tour_iteration: _this._activeTour.current_iteration || 1, $product_tour_step_id: currentStep.id, $product_tour_step_order: _this._currentStepIndex, $product_tour_button_text: button.text, $product_tour_button_action: button.action }, (button.link && { $product_tour_button_link: button.link })), (button.tourId && { $product_tour_button_tour_id: button.tourId })));
+                    _this._captureEvent(posthog_product_tours_types_1.ProductTourEventName.BUTTON_CLICKED, __assign(__assign((_a = {}, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ID] = _this._activeTour.id, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_NAME] = _this._activeTour.name, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ITERATION] = _this._activeTour.current_iteration || 1, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ID] = currentStep.id, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ORDER] = _this._currentStepIndex, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_BUTTON_TEXT] = button.text, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_BUTTON_ACTION] = button.action, _a), (button.link && (_b = {}, _b[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_BUTTON_LINK] = button.link, _b))), (button.tourId && (_c = {}, _c[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_BUTTON_TOUR_ID] = button.tourId, _c))));
                 }
             }
             switch (button.action) {
@@ -484,24 +487,24 @@ var ProductTourManager = /** @class */ (function () {
         return true;
     };
     ProductTourManager.prototype.showTour = function (tour, options) {
-        var _a;
-        var _b;
-        var renderReason = (_b = options === null || options === void 0 ? void 0 : options.reason) !== null && _b !== void 0 ? _b : 'auto';
+        var _a, _b;
+        var _c;
+        var renderReason = (_c = options === null || options === void 0 ? void 0 : options.reason) !== null && _c !== void 0 ? _c : 'auto';
         this.cancelPendingTour(tour.id);
         this._activeTour = tour;
         this._setStepIndex(0);
         var rendered = this._renderCurrentStep();
         if (rendered) {
-            this._captureEvent('product tour shown', {
-                $product_tour_id: tour.id,
-                $product_tour_name: tour.name,
-                $product_tour_iteration: tour.current_iteration || 1,
-                $product_tour_render_reason: renderReason,
-            });
+            this._captureEvent(posthog_product_tours_types_1.ProductTourEventName.SHOWN, (_a = {},
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ID] = tour.id,
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_NAME] = tour.name,
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ITERATION] = tour.current_iteration || 1,
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_RENDER_REASON] = renderReason,
+                _a));
             if (!this._isPreviewMode) {
                 storage_1.localStore._set("".concat(constants_1.TOUR_SHOWN_KEY_PREFIX).concat(tour.id), true);
                 this._instance.capture('$set', {
-                    $set: (_a = {}, _a["$product_tour_shown/".concat(tour.id)] = true, _a),
+                    $set: (_b = {}, _b["$product_tour_shown/".concat(tour.id)] = true, _b),
                 });
             }
         }
@@ -533,28 +536,29 @@ var ProductTourManager = /** @class */ (function () {
         this._renderCurrentStep();
     };
     ProductTourManager.prototype._completeTour = function () {
-        var _a;
+        var _a, _b;
         if (!this._activeTour) {
             return;
         }
-        this._captureEvent('product tour completed', {
-            $product_tour_id: this._activeTour.id,
-            $product_tour_steps_count: this._activeTour.steps.length,
-        });
+        this._captureEvent(posthog_product_tours_types_1.ProductTourEventName.COMPLETED, (_a = {},
+            _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ID] = this._activeTour.id,
+            _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEPS_COUNT] = this._activeTour.steps.length,
+            _a));
         if (!this._isPreviewMode) {
             storage_1.localStore._set("".concat(constants_1.TOUR_COMPLETED_KEY_PREFIX).concat(this._activeTour.id), true);
             this._instance.capture('$set', {
-                $set: (_a = {},
-                    _a["$product_tour_completed/".concat(this._activeTour.id)] = true,
-                    _a),
+                $set: (_b = {},
+                    _b["$product_tour_completed/".concat(this._activeTour.id)] = true,
+                    _b),
             });
         }
         window.dispatchEvent(new CustomEvent('PHProductTourCompleted', { detail: { tourId: this._activeTour.id } }));
         this._cleanup();
     };
     ProductTourManager.prototype._renderCurrentStep = function (retryCount) {
+        var _a, _b, _c;
         var _this = this;
-        var _a;
+        var _d;
         if (retryCount === void 0) { retryCount = 0; }
         if (!this._activeTour) {
             return false;
@@ -567,12 +571,7 @@ var ProductTourManager = /** @class */ (function () {
         }
         // Banner step - render full-width banner
         if (step.type === 'banner') {
-            this._captureEvent('product tour step shown', {
-                $product_tour_id: this._activeTour.id,
-                $product_tour_step_id: step.id,
-                $product_tour_step_order: this._currentStepIndex,
-                $product_tour_step_type: 'banner',
-            });
+            this._captureStepShown();
             this._isResuming = false;
             this._renderBanner();
             return true;
@@ -588,21 +587,16 @@ var ProductTourManager = /** @class */ (function () {
         }
         // Screen-positioned step (no element targeting) - render without a target element
         if (!(0, product_tours_utils_1.hasElementTarget)(step)) {
-            this._captureEvent('product tour step shown', {
-                $product_tour_id: this._activeTour.id,
-                $product_tour_step_id: step.id,
-                $product_tour_step_order: this._currentStepIndex,
-                $product_tour_step_type: step.type,
-            });
+            this._captureStepShown();
             this._isResuming = false;
             this._renderTooltipWithPreact(null);
             return true;
         }
         var result = (0, product_tours_utils_1.findStepElement)(step);
-        var inferenceProps = {
-            $use_manual_selector: (_a = step.useManualSelector) !== null && _a !== void 0 ? _a : false,
-            $inference_data_present: !!step.inferenceData,
-        };
+        var inferenceProps = (_a = {},
+            _a[posthog_product_tours_types_1.ProductTourEventProperties.USE_MANUAL_SELECTOR] = (_d = step.useManualSelector) !== null && _d !== void 0 ? _d : false,
+            _a[posthog_product_tours_types_1.ProductTourEventProperties.INFERENCE_DATA_PRESENT] = !!step.inferenceData,
+            _a);
         var previousStep = this._currentStepIndex > 0 ? this._activeTour.steps[this._currentStepIndex - 1] : null;
         var shouldWaitForElement = (previousStep === null || previousStep === void 0 ? void 0 : previousStep.progressionTrigger) === 'click' || this._isResuming;
         // 2s total timeout
@@ -618,7 +612,7 @@ var ProductTourManager = /** @class */ (function () {
                 return false;
             }
             var waitDurationMs = retryCount * retryTimeout;
-            this._captureEvent('product tour step selector failed', __assign({ $product_tour_id: this._activeTour.id, $product_tour_step_id: step.id, $product_tour_step_order: this._currentStepIndex, $product_tour_step_selector: step.selector, $product_tour_error: result.error, $product_tour_matches_count: result.matchCount, $product_tour_failure_phase: 'runtime', $product_tour_waited_for_element: shouldWaitForElement, $product_tour_wait_duration_ms: waitDurationMs }, inferenceProps));
+            this._captureStepSelectorFailed(result, __assign((_b = {}, _b[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_WAITED_FOR_ELEMENT] = shouldWaitForElement, _b[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_WAIT_DURATION_MS] = waitDurationMs, _b), inferenceProps));
             if (this._currentStepIndex === 0 && !this._isResuming) {
                 logger.warn("Tour \"".concat(this._activeTour.name, "\" failed to show: element for first step not found (").concat(result.error, ")"));
                 return false;
@@ -629,7 +623,7 @@ var ProductTourManager = /** @class */ (function () {
             return false;
         }
         if (result.error === 'multiple_matches') {
-            this._captureEvent('product tour step selector failed', __assign({ $product_tour_id: this._activeTour.id, $product_tour_step_id: step.id, $product_tour_step_order: this._currentStepIndex, $product_tour_step_selector: step.selector, $product_tour_error: result.error, $product_tour_matches_count: result.matchCount, $product_tour_failure_phase: 'runtime' }, inferenceProps));
+            this._captureStepSelectorFailed(result, inferenceProps);
             // Continue with first match for multiple_matches case
         }
         if (!result.element) {
@@ -637,7 +631,7 @@ var ProductTourManager = /** @class */ (function () {
         }
         var element = result.element;
         var metadata = (0, product_tours_utils_1.getElementMetadata)(element);
-        this._captureEvent('product tour step shown', __assign({ $product_tour_id: this._activeTour.id, $product_tour_step_id: step.id, $product_tour_step_order: this._currentStepIndex, $product_tour_step_selector: step.selector, $product_tour_step_selector_found: true, $product_tour_step_element_tag: metadata.tag, $product_tour_step_element_id: metadata.id, $product_tour_step_element_classes: metadata.classes, $product_tour_step_element_text: metadata.text }, inferenceProps));
+        this._captureStepShown(__assign((_c = {}, _c[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_SELECTOR] = step.selector, _c[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_SELECTOR_FOUND] = true, _c[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ELEMENT_TAG] = metadata.tag, _c[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ELEMENT_ID] = metadata.id, _c[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ELEMENT_CLASSES] = metadata.classes, _c[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ELEMENT_TEXT] = metadata.text, _c), inferenceProps));
         this._isResuming = false;
         this._renderTooltipWithPreact(element);
         return true;
@@ -651,18 +645,19 @@ var ProductTourManager = /** @class */ (function () {
         (0, preact_1.render)((0, jsx_runtime_1.jsx)(ProductTourTooltip_1.ProductTourTooltip, { tour: this._activeTour, step: step, stepIndex: this._currentStepIndex, totalSteps: this._activeTour.steps.length, targetElement: element, onNext: this.nextStep, onPrevious: this.previousStep, onDismiss: onDismissOverride || this.dismissTour, onSurveySubmit: onSurveySubmit, onButtonClick: this._handleButtonClick }), shadow);
     };
     ProductTourManager.prototype._renderBanner = function () {
-        var _this = this;
         var _a;
+        var _this = this;
+        var _b;
         if (!this._activeTour) {
             return;
         }
         var step = this._activeTour.steps[this._currentStepIndex];
         var result = retrieveBannerShadow(this._activeTour, step.bannerConfig);
         if (!result) {
-            this._captureEvent('product tour banner container selector failed', {
-                $product_tour_id: this._activeTour.id,
-                $product_tour_banner_selector: (_a = step === null || step === void 0 ? void 0 : step.bannerConfig) === null || _a === void 0 ? void 0 : _a.selector,
-            });
+            this._captureEvent(posthog_product_tours_types_1.ProductTourEventName.BANNER_CONTAINER_SELECTOR_FAILED, (_a = {},
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ID] = this._activeTour.id,
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_BANNER_SELECTOR] = (_b = step === null || step === void 0 ? void 0 : step.bannerConfig) === null || _b === void 0 ? void 0 : _b.selector,
+                _a));
             this.dismissTour('container_unavailable');
             return;
         }
@@ -678,9 +673,9 @@ var ProductTourManager = /** @class */ (function () {
         (0, preact_1.render)((0, jsx_runtime_1.jsx)(ProductTourBanner_1.ProductTourBanner, { step: step, onDismiss: function () { return _this.dismissTour('user_clicked_skip'); }, onTriggerTour: handleTriggerTour, displayFrequency: this._activeTour.display_frequency }), shadow);
     };
     ProductTourManager.prototype._renderSurveyStep = function () {
-        var _a;
+        var _a, _b;
         var _this = this;
-        var _b, _c, _d;
+        var _c, _d, _e;
         if (!this._activeTour) {
             return;
         }
@@ -688,19 +683,15 @@ var ProductTourManager = /** @class */ (function () {
         var step = this._activeTour.steps[this._currentStepIndex];
         var surveyId = step.linkedSurveyId;
         var questionId = step.linkedSurveyQuestionId;
-        var questionText = ((_b = step.survey) === null || _b === void 0 ? void 0 : _b.questionText) || '';
-        this._captureEvent('product tour step shown', {
-            $product_tour_id: this._activeTour.id,
-            $product_tour_step_id: step.id,
-            $product_tour_step_order: this._currentStepIndex,
-            $product_tour_step_type: 'survey',
-            $product_tour_linked_survey_id: surveyId,
-        });
-        this._captureEvent(posthog_surveys_types_1.SurveyEventName.SHOWN, (_a = {},
-            _a[posthog_surveys_types_1.SurveyEventProperties.SURVEY_ID] = surveyId,
-            _a[posthog_surveys_types_1.SurveyEventProperties.PRODUCT_TOUR_ID] = tourId,
-            _a.sessionRecordingUrl = (_d = (_c = this._instance).get_session_replay_url) === null || _d === void 0 ? void 0 : _d.call(_c),
+        var questionText = ((_c = step.survey) === null || _c === void 0 ? void 0 : _c.questionText) || '';
+        this._captureStepShown((_a = {},
+            _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_LINKED_SURVEY_ID] = surveyId,
             _a));
+        this._captureEvent(posthog_surveys_types_1.SurveyEventName.SHOWN, (_b = {},
+            _b[posthog_surveys_types_1.SurveyEventProperties.SURVEY_ID] = surveyId,
+            _b[posthog_surveys_types_1.SurveyEventProperties.PRODUCT_TOUR_ID] = tourId,
+            _b.sessionRecordingUrl = (_e = (_d = this._instance).get_session_replay_url) === null || _e === void 0 ? void 0 : _e.call(_d),
+            _b));
         var handleSubmit = function (response) {
             var _a, _b;
             var _c, _d;
@@ -836,6 +827,22 @@ var ProductTourManager = /** @class */ (function () {
         }
         this._instance.capture(eventName, properties);
     };
+    ProductTourManager.prototype._captureStepShown = function (extraProps) {
+        var _a;
+        if (!this._activeTour) {
+            return;
+        }
+        var step = this._activeTour.steps[this._currentStepIndex];
+        this._captureEvent(posthog_product_tours_types_1.ProductTourEventName.STEP_SHOWN, __assign((_a = {}, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ID] = this._activeTour.id, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ID] = step.id, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ORDER] = this._currentStepIndex, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_TYPE] = step.type, _a), extraProps));
+    };
+    ProductTourManager.prototype._captureStepSelectorFailed = function (result, extraProps) {
+        var _a;
+        if (!this._activeTour) {
+            return;
+        }
+        var step = this._activeTour.steps[this._currentStepIndex];
+        this._captureEvent(posthog_product_tours_types_1.ProductTourEventName.STEP_SELECTOR_FAILED, __assign((_a = {}, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ID] = this._activeTour.id, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ID] = step.id, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ORDER] = this._currentStepIndex, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_SELECTOR] = step.selector, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ERROR] = result.error, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_MATCHES_COUNT] = result.matchCount, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_FAILURE_PHASE] = 'runtime', _a), extraProps));
+    };
     // Public API methods delegated from PostHogProductTours
     ProductTourManager.prototype.getActiveProductTours = function (callback) {
         var _this = this;