Add element

Author: tunetheweb

README.md

@@ -902,6 +902,14 @@ interface INPAttribution {
    */
   interactionTarget: string;
 
+  /**
+   * A node identifying the element that the user first interacted with
+   * as part of the frame where the INP candidate interaction occurred.
+   * If `interactionTargetElement` is null, that generally means the
+   * element was removed from the DOM after the interaction.
+   */
+  interactionTargetElement?: Node;
+
   /**
    * The time when the user first interacted during the frame where the INP
    * candidate interaction occurred (if more than one interaction occurred

src/attribution/onINP.ts

@@ -236,9 +236,10 @@ const attributeINP = (metric: INPMetric): INPMetricWithAttribution => {
   // https://bugs.chromium.org/p/chromium/issues/detail?id=1367329
   // We also fallback to interactionTargetMap for when target removed from DOM
   const firstEntryWithTarget = metric.entries.find((entry) => entry.target);
-  const interactionTarget = firstEntryWithTarget
-    ? getSelector(firstEntryWithTarget.target)
-    : getSelector(interactionTargetMap.get(firstEntry.interactionId)) || '';
+  const interactionTargetElement =
+    firstEntryWithTarget?.target ||
+    interactionTargetMap.get(firstEntry.interactionId);
+  const interactionTarget = getSelector(interactionTargetElement);
 
   // Since entry durations are rounded to the nearest 8ms, we need to clamp
   // the `nextPaintTime` value to be higher than the `processingEnd` or
@@ -254,6 +255,7 @@ const attributeINP = (metric: INPMetric): INPMetricWithAttribution => {
 
   const attribution: INPAttribution = {
     interactionTarget: interactionTarget,
+    interactionTargetElement: interactionTargetElement,
     interactionType: firstEntry.name.startsWith('key') ? 'keyboard' : 'pointer',
     interactionTime: firstEntry.startTime,
     nextPaintTime: nextPaintTime,

src/types/inp.ts

@@ -38,6 +38,14 @@ export interface INPAttribution {
    */
   interactionTarget: string;
 
+  /**
+   * A node identifying the element that the user first interacted with
+   * as part of the frame where the INP candidate interaction occurred.
+   * If `interactionTargetElement` is null, that generally means the
+   * element was removed from the DOM after the interaction.
+   */
+  interactionTargetElement?: Node;
+
   /**
    * The time when the user first interacted during the frame where the INP
    * candidate interaction occurred (if more than one interaction occurred

test/e2e/onINP-test.js

@@ -668,10 +668,11 @@ describe('onINP()', async function () {
       await stubVisibilityChange('hidden');
       await beaconCountIs(1);
 
-      const [inp1] = await getBeacons();
+      const [inp] = await getBeacons();
 
-      assert.equal(inp1.attribution.interactionType, 'pointer');
-      assert.equal(inp1.attribution.interactionTarget, '#reset');
+      assert.equal(inp.attribution.interactionType, 'pointer');
+      assert.equal(inp.attribution.interactionTarget, '#reset');
+      assert(inp.attribution.interactionTargetElement);
     });
 
     it('includes LoAF entries if the browser supports it', async function () {