LCP element -> target

README.md

@@ -351,7 +351,7 @@ function sendToGoogleAnalytics({name, delta, value, id, attribution}) {
       eventParams.debug_target = attribution.interactionTarget;
       break;
     case 'LCP':
-      eventParams.debug_target = attribution.element;
+      eventParams.debug_target = attribution.target;
       break;
   }
 
@@ -930,11 +930,11 @@ interface LCPAttribution {
    * A selector identifying the element corresponding to the largest contentful paint
    * for the page.
    */
-  element?: string;
+  target?: string;
   /**
    * The element corresponding to the largest contentful paint for the page.
    */
-  elementNode?: Node;
+  targetElement?: Node;
   /**
    * The URL (if applicable) of the LCP image resource. If the LCP element
    * is a text node, this value will not be set.

src/attribution/onLCP.ts

@@ -71,8 +71,8 @@ const attributeLCP = (metric: LCPMetric): LCPMetricWithAttribution => {
       );
 
       attribution = {
-        element: getSelector(lcpEntry.element ?? lcpTargetMap.get(lcpEntry)),
-        elementNode: lcpEntry.element ?? lcpTargetMap.get(lcpEntry),
+        target: getSelector(lcpEntry.element ?? lcpTargetMap.get(lcpEntry)),
+        targetElement: lcpEntry.element ?? lcpTargetMap.get(lcpEntry),
         timeToFirstByte: ttfb,
         resourceLoadDelay: lcpRequestStart - ttfb,
         resourceLoadDuration: lcpResponseEnd - lcpRequestStart,

src/types/lcp.ts

@@ -34,11 +34,11 @@ export interface LCPAttribution {
    * A selector identifying the element corresponding to the largest contentful paint
    * for the page.
    */
-  element?: string;
+  target?: string;
   /**
    * The element corresponding to the largest contentful paint for the page.
    */
-  elementNode?: Node;
+  targetElement?: Node;
   /**
    * The URL (if applicable) of the LCP image resource. If the LCP element
    * is a text node, this value will not be set.

test/e2e/onLCP-test.js

@@ -465,7 +465,7 @@ describe('onLCP()', async function () {
       assertStandardReportsAreCorrect([lcp]);
 
       assert(lcp.attribution.url.endsWith('/test/img/square.png?delay=500'));
-      assert.equal(lcp.attribution.element, 'html>body>main>p>img.bar.foo');
+      assert.equal(lcp.attribution.target, 'html>body>main>p>img.bar.foo');
       assert.equal(
         lcp.attribution.timeToFirstByte +
           lcp.attribution.resourceLoadDelay +
@@ -515,7 +515,7 @@ describe('onLCP()', async function () {
       assertStandardReportsAreCorrect([lcp]);
 
       assert(lcp.attribution.url.endsWith('/test/img/square.png?delay=500'));
-      assert.equal(lcp.attribution.element, 'html>body>main>p>img.bar.foo');
+      assert.equal(lcp.attribution.target, 'html>body>main>p>img.bar.foo');
 
       // Specifically check that resourceLoadDelay falls back to `startTime`.
       assert.equal(
@@ -565,7 +565,7 @@ describe('onLCP()', async function () {
 
       assert(lcp.attribution.url.endsWith('/test/img/square.png?delay=500'));
       assert.equal(lcp.navigationType, 'prerender');
-      assert.equal(lcp.attribution.element, 'html>body>main>p>img.bar.foo');
+      assert.equal(lcp.attribution.target, 'html>body>main>p>img.bar.foo');
 
       // Assert each individual LCP sub-part accounts for `activationStart`
       assert.equal(
@@ -624,7 +624,7 @@ describe('onLCP()', async function () {
       const [lcp] = await getBeacons();
 
       assert.equal(lcp.attribution.url, undefined);
-      assert.equal(lcp.attribution.element, 'html>body>main>h1');
+      assert.equal(lcp.attribution.target, 'html>body>main>h1');
       assert.equal(lcp.attribution.resourceLoadDelay, 0);
       assert.equal(lcp.attribution.resourceLoadDuration, 0);
       assert.equal(
@@ -641,7 +641,7 @@ describe('onLCP()', async function () {
       // Deep equal won't work since some of the properties are removed before
       // sending to /collect, so just compare some.
       const lcpEntry = lcp.entries.slice(-1)[0];
-      assert.equal(lcp.attribution.lcpEntry.element, lcpEntry.element);
+      assert.equal(lcp.attribution.lcpEntry.target, lcpEntry.target);
       assert.equal(lcp.attribution.lcpEntry.size, lcpEntry.size);
       assert.equal(lcp.attribution.lcpEntry.startTime, lcpEntry.startTime);
     });
@@ -673,7 +673,7 @@ describe('onLCP()', async function () {
       assert.strictEqual(lcp2.entries.length, 0);
       assert.strictEqual(lcp2.navigationType, 'back-forward-cache');
 
-      assert.equal(lcp2.attribution.element, undefined);
+      assert.equal(lcp2.attribution.target, undefined);
       assert.equal(lcp2.attribution.timeToFirstByte, 0);
       assert.equal(lcp2.attribution.resourceLoadDelay, 0);
       assert.equal(lcp2.attribution.resourceLoadDuration, 0);
@@ -701,7 +701,7 @@ describe('onLCP()', async function () {
       const [lcp] = await getBeacons();
       assertStandardReportsAreCorrect([lcp]);
       // Note this should be the reduced selector without the full path
-      assert.equal(lcp.attribution.element, 'img.bar.foo');
+      assert.equal(lcp.attribution.target, 'img.bar.foo');
     });
 
     it('reports the target (reportAllChanges === true)', async function () {
@@ -722,8 +722,8 @@ describe('onLCP()', async function () {
       const [lcp1, lcp2] = await getBeacons();
       assertFullReportsAreCorrect([lcp1, lcp2]);
       // Note these should be the full selectors with the full paths
-      assert.equal(lcp1.attribution.element, 'html>body>main>h1');
-      assert.equal(lcp2.attribution.element, 'html>body>main>p>img.bar.foo');
+      assert.equal(lcp1.attribution.target, 'html>body>main>h1');
+      assert.equal(lcp2.attribution.target, 'html>body>main>p>img.bar.foo');
     });
   });
 });