Update README with example for generateTarget (#619)

* Update README with example for generateTarget

* Apply suggestions from code review

Co-authored-by: Philip Walton <[email protected]>

---------

Co-authored-by: Philip Walton <[email protected]>

Author: tunetheweb

README.md

@@ -648,7 +648,7 @@ A subclass of `ReportOpts` used for each metric function exported in the [attrib
 
 ```ts
 interface AttributionReportOpts extends ReportOpts {
-  generateTarget?: (el: Node | null) => unknown;
+  generateTarget?: (el: Node | null) => string;
 }
 ```
 
@@ -790,15 +790,29 @@ console.log(LCPThresholds); // [ 2500, 4000 ]
 
 In the [attribution build](#attribution-build) each of the metric functions has two primary differences from their standard build counterparts:
 
-1. They accept an `AttributionReportOpts` objects instead of a `ReportOpts` object. The `AttributionReportOpts` object supports an additional, optional, `generateTarget()` function that lets developers customize how DOM elements are stringified for reporting purposes. When passed, the return value `generateTarget()` function will be used for any "target" properties in the following attribution objects: [`CLSAttribution`](#CLSAttribution), [`INPAttribution`](#INPAttribution), and [`LCPAttribution`](#LCPAttribution).
+1. Their callback is invoked with a `MetricWithAttribution` objects instead of a `Metric` object. Each `MetricWithAttribution` extends the `Metric` object and adds an additional `attribution` object, which contains potentially-helpful debugging information that can be sent along with the metric values for the current page visit in order to help identify issues happening to real-users in the field.
 
-```ts
-interface AttributionReportOpts extends ReportOpts {
-  generateTarget?: (el: Node | null) => string;
-}
-```
+2. They accept an `AttributionReportOpts` objects instead of a `ReportOpts` object. The `AttributionReportOpts` object supports an additional, optional, `generateTarget()` function that lets developers customize how DOM elements are stringified for reporting purposes. When passed, the return value of the `generateTarget()` function will be used for any "target" properties in the following attribution objects: [`CLSAttribution`](#CLSAttribution), [`INPAttribution`](#INPAttribution), and [`LCPAttribution`](#LCPAttribution).
+
+   ```ts
+   interface AttributionReportOpts extends ReportOpts {
+     generateTarget?: (el: Node | null) => string;
+   }
+   ```
+
+   For example, if a web page has unique `data-name` attibute on many elements, you may prefer to use those over the built-in selector-style strings that are generated by default.
+
+   ```js
+   function customGenerateTarget(el) {
+     if (el.dataset.name) {
+       return el.dataset.name;
+     }
+
+     // Do some other fallback when data-name doesn't exist (not-shown).
+   }
 
-2. Their callback is invoked with a `MetricWithAttribution` objects instead of a `Metric` object. Each `MetricWithAttribution` extends the `Metric` object and adds an additional `attribution` object, which contains potentially-helpful debugging information that can be sent along with the metric values for the current page visit in order to help identify issues happening to real-users in the field.
+   onLCP(sendToAnalytics, {generateTarget: customGenerateTarget});
+   ```
 
 The next sections document the shape of the `attribution` object for each of the metrics: