Code review

carlosdanieltt · carlosdanieltt · commit 379f0794d087 · 2025-04-09T23:13:51.000Z
diff --git a/src/autocapture/index.js b/src/autocapture/index.js
@@ -160,7 +160,8 @@ Autocapture.prototype.trackDomEvent = function(ev, mpEventName) {
         blockElementCallback: this.getConfig(CONFIG_BLOCK_ELEMENT_CALLBACK),
         blockSelectors: this.getConfig(CONFIG_BLOCK_SELECTORS),
         captureExtraAttrs: this.getConfig(CONFIG_CAPTURE_EXTRA_ATTRS),
-        captureTextContent: this.getConfig(CONFIG_CAPTURE_TEXT_CONTENT)
+        captureTextContent: this.getConfig(CONFIG_CAPTURE_TEXT_CONTENT),
+        capturedForHeatMap: mpEventName === MP_EV_CLICK && !this.getConfig(CONFIG_TRACK_CLICK) && this.mp.get_active_record_heatmap_data(),
     });
     if (props) {
         _.extend(props, DEFAULT_PROPS);
@@ -171,13 +172,13 @@ Autocapture.prototype.trackDomEvent = function(ev, mpEventName) {
 Autocapture.prototype.initClickTracking = function() {
     window.removeEventListener(EV_CLICK, this.listenerClick);
 
-    if (!this.getConfig(CONFIG_TRACK_CLICK) && !this.mp.get_active_record_capture_interactions()) {
+    if (!this.getConfig(CONFIG_TRACK_CLICK) && !this.mp.get_config('record_heatmap_data')) {
         return;
     }
     logger.log('Initializing click tracking');
 
     this.listenerClick = window.addEventListener(EV_CLICK, function(ev) {
-        if (!this.getConfig(CONFIG_TRACK_CLICK) && !this.mp.get_active_record_capture_interactions()) {
+        if (!this.getConfig(CONFIG_TRACK_CLICK) && !this.mp.get_active_record_heatmap_data()) {
             return;
         }
         this.trackDomEvent(ev, MP_EV_CLICK);
diff --git a/src/autocapture/utils.js b/src/autocapture/utils.js
@@ -114,6 +114,7 @@ function getPropsForDOMEvent(ev, config) {
     var blockSelectors = config.blockSelectors || [];
     var captureTextContent = config.captureTextContent || false;
     var captureExtraAttrs = config.captureExtraAttrs || [];
+    var capturedForHeatMap = config.capturedForHeatMap || false;
 
     // convert array to set every time, as the config may have changed
     var blockAttrsSet = {};
@@ -192,6 +193,7 @@ function getPropsForDOMEvent(ev, config) {
                         props['$' + prop] = ev[prop];
                     }
                 });
+                props['$captured_for_heatmap'] = capturedForHeatMap;
                 target = guessRealClickTarget(ev);
             }
             // prioritize text content from "real" click target if different from original target
diff --git a/src/mixpanel-core.js b/src/mixpanel-core.js
@@ -152,7 +152,7 @@ var DEFAULT_CONFIG = {
     'record_mask_text_selector':         '*',
     'record_max_ms':                     MAX_RECORDING_MS,
     'record_min_ms':                     0,
-    'record_capture_interactions':       false,
+    'record_heatmap_data':               false,
     'record_sessions_percent':           0,
     'recorder_src':                      'https://cdn.mxpnl.com/libs/mixpanel-recorder.min.js'
 };
@@ -488,11 +488,8 @@ MixpanelLib.prototype.resume_session_recording = function () {
     }
 };
 
-MixpanelLib.prototype.get_active_record_capture_interactions = function () {
-    if (this._recorder) {
-        return this._recorder['getActiveReplayId']() && this.get_config('record_capture_interactions');
-    }
-    return false;
+MixpanelLib.prototype.get_active_record_heatmap_data = function () {
+    return this._get_session_replay_id() && this.get_config('record_heatmap_data');
 };
 
 MixpanelLib.prototype.get_session_recording_properties = function () {
@@ -1850,7 +1847,7 @@ MixpanelLib.prototype.set_config = function(config) {
         }
         Config.DEBUG = Config.DEBUG || this.get_config('debug');
 
-        if (('autocapture' in config || this.get_config('record_capture_interactions')) && this.autocapture) {
+        if (('autocapture' in config || 'record_heatmap_data' in config) && this.autocapture) {
             this.autocapture.init();
         }
     }
diff --git a/tests/test.js b/tests/test.js
@@ -3891,7 +3891,7 @@
                 same(this.requests.length, 0, "autocapture init with pageview=false should not fire request on load");
             });
 
-            test("autocapture tracks click events", 4, function() {
+            test("autocapture tracks click events", 5, function() {
                 mixpanel.init("autocapture_test_token", {
                     autocapture: {
                         pageview: false,
@@ -3912,6 +3912,7 @@
                 same(this.requests.length, 1, "click event should fire request");
                 var last_event = getRequestData(this.requests[0]);
                 same(last_event.event, "$mp_click", "last request should be $mp_click event");
+                same(last_event.properties.$captured_for_heatmap, false, "click event should not be tagged as captured for heatmap");
                 ok(originalHandlerCalled, "original click handler should also have been called");
             });
 
@@ -6184,6 +6185,14 @@
                     this.randomStub = sinon.stub(Math, 'random');
                     this.fetchStub = sinon.stub(window, 'fetch');
 
+                    if (USE_XHR) {
+                        this.xhr = sinon.useFakeXMLHttpRequest();
+                        this.requests = [];
+                        this.xhr.onCreate = _.bind(function(req) {
+                            this.requests.push(req);
+                        }, this);
+                    }
+
                     // realistic successful response
                     this.fetchStub.returns(Promise.resolve(new Response(JSON.stringify({code: 200, status: 'OK'}), {
                         status: 200,
@@ -6324,6 +6333,10 @@
                         this.responseBlobStub.restore();
                     }
 
+                    if (USE_XHR) {
+                        this.xhr.restore();
+                    }
+
                     var scriptEl = this.getRecorderScript();
                     if (scriptEl) {
                         scriptEl.parentNode.removeChild(scriptEl);
@@ -6547,6 +6560,51 @@
                     }, this))
             });
 
+            if (USE_XHR) {
+                asyncTest('does not track clicks when using recording and capturing heat map data is off', function () {
+                    this.randomStub.returns(0.02);
+                    this.initMixpanelRecorder({record_sessions_percent: 100, record_heatmap_data: false, batch_requests: false});
+                    this.waitForRecorderLoad()
+                        .then(_.bind(function () {
+                            var e1 = ele_with_class();
+                            var originalHandlerCalled = false;
+                            e1.e.onclick = function() {
+                                originalHandlerCalled = true;
+                                return false;
+                            }
+
+                            simulateMouseClick(e1.e);
+
+                            same(this.requests.length, 0, "click event should not fire request");
+                            ok(originalHandlerCalled, "original click handler should also have been called");
+                        }, this))
+                        .then(start)
+                });
+
+                asyncTest('tracks clicks when using recording and capturing capturing heat map data is on', function () {
+                    this.randomStub.returns(0.02);
+                    this.initMixpanelRecorder({record_sessions_percent: 100, record_heatmap_data: true, batch_requests: false});
+                    this.waitForRecorderLoad()
+                        .then(_.bind(function () {
+                            var e1 = ele_with_class();
+                            var originalHandlerCalled = false;
+                            e1.e.onclick = function() {
+                                originalHandlerCalled = true;
+                                return false;
+                            }
+
+                            simulateMouseClick(e1.e);
+
+                            same(this.requests.length, 1, "click event should fire request");
+                            var last_event = getRequestData(this.requests[0]);
+                            same(last_event.event, "$mp_click", "last request should be $mp_click event");
+                            same(last_event.properties.$captured_for_heatmap, true, "last request should be tagged as captured for heat map");
+                            ok(originalHandlerCalled, "original click handler should also have been called");
+                        }, this))
+                        .then(start)
+                });
+            }
+
             test('respects tracking opt-out when sampled', 3, function () {
                 this.randomStub.returns(0.02);
                 this.initMixpanelRecorder({record_sessions_percent: 10, window: {navigator: {doNotTrack: '1'}}});

Original file line number	Diff line number	Diff line change
`@@ -114,6 +114,7 @@ function getPropsForDOMEvent(ev, config) {`
`114`	`114`	`var blockSelectors = config.blockSelectors \|\| [];`
`115`	`115`	`var captureTextContent = config.captureTextContent \|\| false;`
`116`	`116`	`var captureExtraAttrs = config.captureExtraAttrs \|\| [];`
	`117`	`+ var capturedForHeatMap = config.capturedForHeatMap \|\| false;`
`117`	`118`
`118`	`119`	`// convert array to set every time, as the config may have changed`
`119`	`120`	`var blockAttrsSet = {};`
`@@ -192,6 +193,7 @@ function getPropsForDOMEvent(ev, config) {`
`192`	`193`	`props['$' + prop] = ev[prop];`
`193`	`194`	`}`
`194`	`195`	`});`
	`196`	`+ props['$captured_for_heatmap'] = capturedForHeatMap;`
`195`	`197`	`target = guessRealClickTarget(ev);`
`196`	`198`	`}`
`197`	`199`	`// prioritize text content from "real" click target if different from original target`