diff --git a/README.md b/README.md index 5bd69307..3cb8d5de 100644 --- 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,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. diff --git a/src/attribution/onLCP.ts b/src/attribution/onLCP.ts index 69c271ca..2f6eaa73 100644 --- a/src/attribution/onLCP.ts +++ b/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, diff --git a/src/types/lcp.ts b/src/types/lcp.ts index e265495c..2f00abf0 100644 --- a/src/types/lcp.ts +++ b/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. diff --git a/test/e2e/onLCP-test.js b/test/e2e/onLCP-test.js index 37d6a8a1..19f1fe2c 100644 --- 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( @@ -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'); }); }); });