Switch LCP back to target

GoogleChrome · Dec 16, 2024 · 050b2af · 050b2af
1 parent 270fd70
commit 050b2af
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ### v5.0.0-rc.1 (???)
 
-- LCP and CLS attribution now saves the target selector for when the element is removed from the DOM ([#562](https://github.com/GoogleChrome/web-vitals/pull/562))
+- **[BREAKING]** Change LCP selector from element to target. LCP and CLS attribution now saves the target selector for when the element is removed from the DOM ([#562](https://github.com/GoogleChrome/web-vitals/pull/562))
 
 ### v5.0.0-rc.0 (2024-10-03)
 

diff --git a/README.md b/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,7 +930,7 @@ interface LCPAttribution {
    * A selector identifying the element corresponding to the largest contentful paint
    * for the page.
    */
-  element?: string;
+  target?: string;
   /**
    * The URL (if applicable) of the LCP image resource. If the LCP element
    * is a text node, this value will not be set.

diff --git a/src/attribution/onLCP.ts b/src/attribution/onLCP.ts
@@ -71,7 +71,7 @@ const attributeLCP = (metric: LCPMetric): LCPMetricWithAttribution => {
       );
 
       attribution = {
-        element: lcpEntry.element
+        target: lcpEntry.element
           ? getSelector(lcpEntry.element)
           : lcpTargetMap.get(lcpEntry),
         timeToFirstByte: ttfb,

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

diff --git a/test/e2e/onLCP-test.js b/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(
@@ -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);
@@ -700,7 +700,7 @@ describe('onLCP()', async function () {
 
       const [lcp] = await getBeacons();
       assertStandardReportsAreCorrect([lcp]);
-      assert.equal(lcp.attribution.element, 'html>body>main>p>img.bar.foo');
+      assert.equal(lcp.attribution.target, 'html>body>main>p>img.bar.foo');
     });
 
     it('reports the element (reportAllChanges === true)', async function () {
@@ -721,8 +721,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');
     });
   });
 });