Expose the target element in INP attribution

README.md

@@ -344,7 +344,7 @@ function sendToGoogleAnalytics({name, delta, value, id, attribution}) {
       eventParams.debug_target = attribution.largestShiftTarget;
       break;
     case 'INP':
-      eventParams.debug_target = attribution.eventTarget;
+      eventParams.debug_target = attribution.interactionTargetSelector;
       break;
     case 'LCP':
       eventParams.debug_target = attribution.element;
@@ -897,18 +897,23 @@ interface INPAttribution {
   /**
    * A selector identifying the element that the user first interacted with
    * as part of the frame where the INP candidate interaction occurred.
-   * If `interactionTarget` is an empty string, that generally means the
-   * element was removed from the DOM after the interaction.
+   * If this value is an empty string, that generally means the element was
+   * removed from the DOM after the interaction.
    */
-  interactionTarget: string;
-
+  interactionTargetSelector: string;
+  /**
+   * A reference to the HTML element identified by `interactionTargetSelector`.
+   * NOTE: for attribution purpose, a selector identifying the element is
+   * typically more useful than the element itself. However, the element is
+   * also made available in case additional context is needed.
+   */
+  interactionTargetElement: Node | undefined;
   /**
    * The time when the user first interacted during the frame where the INP
    * candidate interaction occurred (if more than one interaction occurred
    * within the frame, only the first time is reported).
    */
   interactionTime: DOMHighResTimeStamp;
-
   /**
    * The best-guess timestamp of the next paint after the interaction.
    * In general, this timestamp is the same as the `startTime + duration` of
@@ -921,7 +926,6 @@ interface INPAttribution {
    * animation frame, which should be closer to the "real" value.
    */
   nextPaintTime: DOMHighResTimeStamp;
-
   /**
    * The type of interaction, based on the event type of the `event` entry
    * that corresponds to the interaction (i.e. the first `event` entry
@@ -930,13 +934,11 @@ interface INPAttribution {
    * and for "keydown" or "keyup" events this will be "keyboard".
    */
   interactionType: 'pointer' | 'keyboard';
-
   /**
    * An array of Event Timing entries that were processed within the same
    * animation frame as the INP candidate interaction.
    */
   processedEventEntries: PerformanceEventTiming[];
-
   /**
    * If the browser supports the Long Animation Frame API, this array will
    * include any `long-animation-frame` entries that intersect with the INP
@@ -946,21 +948,18 @@ interface INPAttribution {
    * are detect, this array will be empty.
    */
   longAnimationFrameEntries: PerformanceLongAnimationFrameTiming[];
-
   /**
    * The time from when the user interacted with the page until when the
    * browser was first able to start processing event listeners for that
    * interaction. This time captures the delay before event processing can
    * begin due to the main thread being busy with other work.
    */
   inputDelay: number;
-
   /**
    * The time from when the first event listener started running in response to
    * the user interaction until when all event listener processing has finished.
    */
   processingDuration: number;
-
   /**
    * The time from when the browser finished processing all event listeners for
    * the user interaction until the next frame is presented on the screen and
@@ -970,7 +969,6 @@ interface INPAttribution {
    * as off-main-thread work (such as compositor, GPU, and raster work).
    */
   presentationDelay: number;
-
   /**
    * The loading state of the document at the time when the interaction
    * corresponding to INP occurred (see `LoadState` for details). If the

src/attribution/onINP.ts

@@ -263,7 +263,8 @@ const attributeINP = (metric: INPMetric): INPMetricWithAttribution => {
   const nextPaintTime = Math.max.apply(Math, nextPaintTimeCandidates);
 
   const attribution: INPAttribution = {
-    interactionTarget: getSelector(interactionTargetElement),
+    interactionTargetSelector: getSelector(interactionTargetElement),
+    interactionTargetElement: interactionTargetElement,
     interactionType: firstEntry.name.startsWith('key') ? 'keyboard' : 'pointer',
     interactionTime: firstEntry.startTime,
     nextPaintTime: nextPaintTime,

src/types/inp.ts

@@ -33,18 +33,23 @@ export interface INPAttribution {
   /**
    * A selector identifying the element that the user first interacted with
    * as part of the frame where the INP candidate interaction occurred.
-   * If `interactionTarget` is an empty string, that generally means the
-   * element was removed from the DOM after the interaction.
+   * If this value is an empty string, that generally means the element was
+   * removed from the DOM after the interaction.
    */
-  interactionTarget: string;
-
+  interactionTargetSelector: string;
+  /**
+   * A reference to the HTML element identified by `interactionTargetSelector`.
+   * NOTE: for attribution purpose, a selector identifying the element is
+   * typically more useful than the element itself. However, the element is
+   * also made available in case additional context is needed.
+   */
+  interactionTargetElement: Node | undefined;
   /**
    * The time when the user first interacted during the frame where the INP
    * candidate interaction occurred (if more than one interaction occurred
    * within the frame, only the first time is reported).
    */
   interactionTime: DOMHighResTimeStamp;
-
   /**
    * The best-guess timestamp of the next paint after the interaction.
    * In general, this timestamp is the same as the `startTime + duration` of
@@ -57,7 +62,6 @@ export interface INPAttribution {
    * animation frame, which should be closer to the "real" value.
    */
   nextPaintTime: DOMHighResTimeStamp;
-
   /**
    * The type of interaction, based on the event type of the `event` entry
    * that corresponds to the interaction (i.e. the first `event` entry
@@ -66,13 +70,11 @@ export interface INPAttribution {
    * and for "keydown" or "keyup" events this will be "keyboard".
    */
   interactionType: 'pointer' | 'keyboard';
-
   /**
    * An array of Event Timing entries that were processed within the same
    * animation frame as the INP candidate interaction.
    */
   processedEventEntries: PerformanceEventTiming[];
-
   /**
    * If the browser supports the Long Animation Frame API, this array will
    * include any `long-animation-frame` entries that intersect with the INP
@@ -82,21 +84,18 @@ export interface INPAttribution {
    * are detect, this array will be empty.
    */
   longAnimationFrameEntries: PerformanceLongAnimationFrameTiming[];
-
   /**
    * The time from when the user interacted with the page until when the
    * browser was first able to start processing event listeners for that
    * interaction. This time captures the delay before event processing can
    * begin due to the main thread being busy with other work.
    */
   inputDelay: number;
-
   /**
    * The time from when the first event listener started running in response to
    * the user interaction until when all event listener processing has finished.
    */
   processingDuration: number;
-
   /**
    * The time from when the browser finished processing all event listeners for
    * the user interaction until the next frame is presented on the screen and
@@ -106,7 +105,6 @@ export interface INPAttribution {
    * as off-main-thread work (such as compositor, GPU, and raster work).
    */
   presentationDelay: number;
-
   /**
    * The loading state of the document at the time when the interaction
    * corresponding to INP occurred (see `LoadState` for details). If the

test/e2e/onCLS-test.js

@@ -866,7 +866,7 @@ function getAttribution(entries) {
   }
 
   const largestShiftSource = largestShiftEntry.sources.find((source) => {
-    return source.node !== '#text';
+    return source.node !== '[object Text]';
   });
 
   return {largestShiftEntry, largestShiftSource};

test/e2e/onINP-test.js

@@ -58,7 +58,7 @@ describe('onINP()', async function () {
     assert.strictEqual(inp.name, 'INP');
     assert.strictEqual(inp.value, inp.delta);
     assert.strictEqual(inp.rating, 'good');
-    assert(containsEntry(inp.entries, 'click', 'h1'));
+    assert(containsEntry(inp.entries, 'click', '[object HTMLHeadingElement]'));
     assert(allEntriesPresentTogether(inp.entries));
     assert.match(inp.navigationType, /navigate|reload/);
   });
@@ -81,7 +81,7 @@ describe('onINP()', async function () {
     assert.strictEqual(inp.name, 'INP');
     assert.strictEqual(inp.value, inp.delta);
     assert.strictEqual(inp.rating, 'good');
-    assert(containsEntry(inp.entries, 'click', 'h1'));
+    assert(containsEntry(inp.entries, 'click', '[object HTMLHeadingElement]'));
     assert(allEntriesPresentTogether(inp.entries));
     assert.match(inp.navigationType, /navigate|reload/);
   });
@@ -109,7 +109,7 @@ describe('onINP()', async function () {
     assert.strictEqual(inp.name, 'INP');
     assert.strictEqual(inp.value, inp.delta);
     assert.strictEqual(inp.rating, 'good');
-    assert(containsEntry(inp.entries, 'click', 'h1'));
+    assert(containsEntry(inp.entries, 'click', '[object HTMLHeadingElement]'));
     assert(allEntriesPresentTogether(inp.entries));
     assert.match(inp.navigationType, /navigate|reload/);
   });
@@ -135,7 +135,7 @@ describe('onINP()', async function () {
     assert.strictEqual(inp.name, 'INP');
     assert.strictEqual(inp.value, inp.delta);
     assert.strictEqual(inp.rating, 'good');
-    assert(containsEntry(inp.entries, 'click', 'h1'));
+    assert(containsEntry(inp.entries, 'click', '[object HTMLHeadingElement]'));
     assert(allEntriesPresentTogether(inp.entries));
     assert.match(inp.navigationType, /navigate|reload/);
   });
@@ -158,7 +158,7 @@ describe('onINP()', async function () {
     assert.strictEqual(inp.name, 'INP');
     assert.strictEqual(inp.value, inp.delta);
     assert.strictEqual(inp.rating, 'good');
-    assert(containsEntry(inp.entries, 'click', 'h1'));
+    assert(containsEntry(inp.entries, 'click', '[object HTMLHeadingElement]'));
     assert(allEntriesPresentTogether(inp.entries));
     assert.match(inp.navigationType, /navigate|reload/);
   });
@@ -183,7 +183,7 @@ describe('onINP()', async function () {
     assert.strictEqual(inp.name, 'INP');
     assert.strictEqual(inp.value, inp.delta);
     assert.strictEqual(inp.rating, 'good');
-    assert(containsEntry(inp.entries, 'click', 'h1'));
+    assert(containsEntry(inp.entries, 'click', '[object HTMLHeadingElement]'));
     assert(allEntriesPresentTogether(inp.entries));
     assert.match(inp.navigationType, /navigate|reload/);
   });
@@ -312,7 +312,7 @@ describe('onINP()', async function () {
     assert.strictEqual(inp1.name, 'INP');
     assert.strictEqual(inp1.value, inp1.delta);
     assert.strictEqual(inp1.rating, 'good');
-    assert(containsEntry(inp1.entries, 'click', 'h1'));
+    assert(containsEntry(inp1.entries, 'click', '[object HTMLHeadingElement]'));
     assert(allEntriesPresentTogether(inp1.entries));
     assert.match(inp1.navigationType, /navigate|reload/);
 
@@ -337,7 +337,9 @@ describe('onINP()', async function () {
     assert.strictEqual(inp2.name, 'INP');
     assert.strictEqual(inp2.value, inp2.delta);
     assert.strictEqual(inp2.rating, 'good');
-    assert(containsEntry(inp2.entries, 'keydown', '#textarea'));
+    assert(
+      containsEntry(inp2.entries, 'keydown', '[object HTMLTextAreaElement]'),
+    );
     assert(allEntriesPresentTogether(inp1.entries));
     assert(inp2.entries[0].startTime > inp1.entries[0].startTime);
     assert.strictEqual(inp2.navigationType, 'back-forward-cache');
@@ -363,7 +365,9 @@ describe('onINP()', async function () {
     assert.strictEqual(inp3.name, 'INP');
     assert.strictEqual(inp3.value, inp3.delta);
     assert.strictEqual(inp3.rating, 'needs-improvement');
-    assert(containsEntry(inp3.entries, 'pointerdown', '#reset'));
+    assert(
+      containsEntry(inp3.entries, 'pointerdown', '[object HTMLButtonElement]'),
+    );
     assert(allEntriesPresentTogether(inp3.entries));
     assert(inp3.entries[0].startTime > inp2.entries[0].startTime);
     assert.strictEqual(inp3.navigationType, 'back-forward-cache');
@@ -403,7 +407,7 @@ describe('onINP()', async function () {
     assert.strictEqual(inp.name, 'INP');
     assert.strictEqual(inp.value, inp.delta);
     assert.strictEqual(inp.rating, 'good');
-    assert(containsEntry(inp.entries, 'click', 'h1'));
+    assert(containsEntry(inp.entries, 'click', '[object HTMLHeadingElement]'));
     assert(allEntriesPresentTogether(inp.entries));
     assert.strictEqual(inp.navigationType, 'prerender');
   });
@@ -428,7 +432,7 @@ describe('onINP()', async function () {
     assert.strictEqual(inp.name, 'INP');
     assert.strictEqual(inp.value, inp.delta);
     assert.strictEqual(inp.rating, 'good');
-    assert(containsEntry(inp.entries, 'click', 'h1'));
+    assert(containsEntry(inp.entries, 'click', '[object HTMLHeadingElement]'));
     assert(allEntriesPresentTogether(inp.entries));
     assert.strictEqual(inp.navigationType, 'restore');
   });
@@ -455,11 +459,16 @@ describe('onINP()', async function () {
       assert.strictEqual(inp1.name, 'INP');
       assert.strictEqual(inp1.value, inp1.delta);
       assert.strictEqual(inp1.rating, 'good');
-      assert(containsEntry(inp1.entries, 'click', 'h1'));
+      assert(
+        containsEntry(inp1.entries, 'click', '[object HTMLHeadingElement]'),
+      );
       assert(allEntriesPresentTogether(inp1.entries));
       assert.match(inp1.navigationType, /navigate|reload/);
 
-      assert.equal(inp1.attribution.interactionTarget, 'html>body>main>h1');
+      assert.equal(
+        inp1.attribution.interactionTargetSelector,
+        'html>body>main>h1',
+      );
       assert.equal(inp1.attribution.interactionType, 'pointer');
       assert.equal(inp1.attribution.interactionTime, inp1.entries[0].startTime);
       assert.equal(inp1.attribution.loadState, 'complete');
@@ -533,7 +542,11 @@ describe('onINP()', async function () {
       assert(allEntriesPresentTogether(inp2.entries));
       assert.match(inp2.navigationType, /navigate|reload/);
 
-      assert.equal(inp2.attribution.interactionTarget, '#textarea');
+      assert.equal(inp2.attribution.interactionTargetSelector, '#textarea');
+      assert.equal(
+        inp2.attribution.interactionTargetElement,
+        '[object HTMLTextAreaElement]',
+      );
       assert.equal(inp2.attribution.interactionType, 'keyboard');
       assert.equal(inp2.attribution.interactionTime, inp2.entries[0].startTime);
       assert.equal(inp2.attribution.loadState, 'complete');
@@ -542,7 +555,7 @@ describe('onINP()', async function () {
         containsEntry(
           inp2.attribution.processedEventEntries,
           'keydown',
-          '#textarea',
+          '[object HTMLTextAreaElement]',
         ),
       );
 
@@ -648,7 +661,14 @@ describe('onINP()', async function () {
       // The event target should match the h1, even if the `pointerup`
       // entry doesn't contain a target.
       // See: https://bugs.chromium.org/p/chromium/issues/detail?id=1367329
-      assert.equal(inp1.attribution.interactionTarget, 'html>body>main>h1');
+      assert.equal(
+        inp1.attribution.interactionTargetSelector,
+        'html>body>main>h1',
+      );
+      assert.equal(
+        inp1.attribution.interactionTargetElement,
+        '[object HTMLHeadingElement]',
+      );
     });
 
     it('reports the interaction target when target is removed from the DOM', async function () {
@@ -672,7 +692,11 @@ describe('onINP()', async function () {
       const [inp] = await getBeacons();
 
       assert.equal(inp.attribution.interactionType, 'pointer');
-      assert.equal(inp.attribution.interactionTarget, '#reset');
+      assert.equal(inp.attribution.interactionTargetSelector, '#reset');
+      assert.equal(
+        inp.attribution.interactionTargetElement,
+        '[object HTMLButtonElement]',
+      );
     });
 
     it('includes LoAF entries if the browser supports it', async function () {