Skip to content

Commit a948d3c

Browse files
authored
Remove reference to Universal Analytics from README (#371)
* Remove reference to Universal Analytics from README * Review feedback * Review feedback
1 parent 3806160 commit a948d3c

1 file changed

Lines changed: 4 additions & 83 deletions

File tree

README.md

Lines changed: 4 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -326,88 +326,7 @@ onLCP(sendToAnalytics);
326326

327327
### Send the results to Google Analytics
328328

329-
Google Analytics does not support reporting metric distributions in any of its built-in reports; however, if you set a unique dimension value (in this case, the metric `id`, as shown in the examples below) on every metric instance that you send to Google Analytics, you can create a report yourself using the [Google Analytics Reporting API](https://developers.google.com/analytics/devguides/reporting) and any data visualization library you choose.
330-
331-
As an example of this, the [Web Vitals Report](https://github.com/GoogleChromeLabs/web-vitals-report) is a free and open-source tool you can use to create visualizations of the Web Vitals data that you've sent to Google Analytics.
332-
333-
[![web-vitals-report](https://user-images.githubusercontent.com/326742/101584324-3f9a0900-3992-11eb-8f2d-182f302fb67b.png)](https://github.com/GoogleChromeLabs/web-vitals-report)
334-
335-
In order to use the [Web Vitals Report](https://github.com/GoogleChromeLabs/web-vitals-report) (or build your own custom reports using the API) you need to send your data to Google Analytics following one of the examples outlined below:
336-
337-
#### Using `analytics.js`
338-
339-
```js
340-
import {onCLS, onFID, onLCP} from 'web-vitals';
341-
342-
function sendToGoogleAnalytics({name, delta, id}) {
343-
// Assumes the global `ga()` function exists, see:
344-
// https://developers.google.com/analytics/devguides/collection/analyticsjs
345-
ga('send', 'event', {
346-
eventCategory: 'Web Vitals',
347-
eventAction: name,
348-
// The `id` value will be unique to the current page load. When sending
349-
// multiple values from the same page (e.g. for CLS), Google Analytics can
350-
// compute a total by grouping on this ID (note: requires `eventLabel` to
351-
// be a dimension in your report).
352-
eventLabel: id,
353-
// Google Analytics metrics must be integers, so the value is rounded.
354-
// For CLS the value is first multiplied by 1000 for greater precision
355-
// (note: increase the multiplier for greater precision if needed).
356-
eventValue: Math.round(name === 'CLS' ? delta * 1000 : delta),
357-
// Use a non-interaction event to avoid affecting bounce rate.
358-
nonInteraction: true,
359-
// Use `sendBeacon()` if the browser supports it.
360-
transport: 'beacon',
361-
362-
// OPTIONAL: any additional attribution params here.
363-
// See: https://web.dev/debug-performance-in-the-field/
364-
// dimension1: '...',
365-
// dimension2: '...',
366-
// ...
367-
});
368-
}
369-
370-
onCLS(sendToGoogleAnalytics);
371-
onFID(sendToGoogleAnalytics);
372-
onLCP(sendToGoogleAnalytics);
373-
```
374-
375-
#### Using `gtag.js` (Universal Analytics)
376-
377-
```js
378-
import {onCLS, onFID, onLCP} from 'web-vitals';
379-
380-
function sendToGoogleAnalytics({name, delta, id}) {
381-
// Assumes the global `gtag()` function exists, see:
382-
// https://developers.google.com/analytics/devguides/collection/gtagjs
383-
gtag('event', name, {
384-
event_category: 'Web Vitals',
385-
// The `id` value will be unique to the current page load. When sending
386-
// multiple values from the same page (e.g. for CLS), Google Analytics can
387-
// compute a total by grouping on this ID (note: requires `eventLabel` to
388-
// be a dimension in your report).
389-
event_label: id,
390-
// Google Analytics metrics must be integers, so the value is rounded.
391-
// For CLS the value is first multiplied by 1000 for greater precision
392-
// (note: increase the multiplier for greater precision if needed).
393-
value: Math.round(name === 'CLS' ? delta * 1000 : delta),
394-
// Use a non-interaction event to avoid affecting bounce rate.
395-
non_interaction: true,
396-
397-
// OPTIONAL: any additional attribution params here.
398-
// See: https://web.dev/debug-performance-in-the-field/
399-
// dimension1: '...',
400-
// dimension2: '...',
401-
// ...
402-
});
403-
}
404-
405-
onCLS(sendToGoogleAnalytics);
406-
onFID(sendToGoogleAnalytics);
407-
onLCP(sendToGoogleAnalytics);
408-
```
409-
410-
#### Using `gtag.js` (Google Analytics 4)
329+
Google Analytics does not support reporting metric distributions in any of its built-in reports; however, if you set a unique event parameter value (in this case, the metric_id, as shown in the example below) on every metric instance that you send to Google Analytics, you can create a report yourself by first getting the data via the [Google Analytics Data API](https://developers.google.com/analytics/devguides/reporting/data/v1) or via [BigQuery export](https://support.google.com/analytics/answer/9358801) and then visualizing it any charting library you choose.
411330

412331
[Google Analytics 4](https://support.google.com/analytics/answer/10089681) introduces a new Event model allowing custom parameters instead of a fixed category, action, and label. It also supports non-integer values, making it easier to measure Web Vitals metrics compared to previous versions.
413332

@@ -438,6 +357,8 @@ onFID(sendToGoogleAnalytics);
438357
onLCP(sendToGoogleAnalytics);
439358
```
440359

360+
For details on how to query this data in [BigQuery](https://cloud.google.com/bigquery), or visualise it in [Looker Studio](https://lookerstudio.google.com/), see [Measure and debug performance with Google Analytics 4 and BigQuery](https://web.dev/vitals-ga4/).
361+
441362
### Send the results to Google Tag Manager
442363

443364
The recommended way to measure Web Vitals metrics with Google Tag Manager is using the [Core Web Vitals](https://www.simoahava.com/custom-templates/core-web-vitals/) custom template tag created and maintained by [Simo Ahava](https://www.simoahava.com/).
@@ -485,7 +406,7 @@ onFID(sendToGoogleAnalytics);
485406
onLCP(sendToGoogleAnalytics);
486407
```
487408

488-
_**Note:** this example relies on custom [event parameters](https://support.google.com/analytics/answer/11396839) in Google Analytics 4. For Universal Analytics the attribution data should be set using a [custom dimension](https://support.google.com/analytics/answer/2709828) rather than `debug_target` as shown above._
409+
_**Note:** this example relies on custom [event parameters](https://support.google.com/analytics/answer/11396839) in Google Analytics 4._
489410

490411
See [Debug performance in the field](https://web.dev/debug-performance-in-the-field/) for more information and examples.
491412

0 commit comments

Comments
 (0)