Extends
- Controller
Members
(static) classes
- Source:
Properties:
| Name | Type | Description |
|---|---|---|
success |
String | targets the CSS to use for success highlighting on border and text |
warning |
String | targets the CSS to use for warning highlighting on border and text |
error |
String | targets the CSS to use for error highlighting on border and text |
(static) rumIdentifier :Number
- Source:
Will be set on initialize with the current Unix timestamp in milliseconds
Type:
- Number
(static) targets
- Source:
Properties:
| Name | Type | Description |
|---|---|---|
footer |
function | targets the normal footer section |
vitalsButton |
function | targets the button to display CWV |
metrics |
function | targets the CWV section |
lcp |
function | targets the text result of LCP |
fid |
function | targets the text result of FID |
cls |
function | targets the text result of CLS |
(static) values
- Source:
Properties:
| Name | Type | Description |
|---|---|---|
lcp |
Object | holds LCP data eg {"data":1201.705,"vitalsScore":"good"} |
fid |
Object | holds FID data eg {"data":1.305,"vitalsScore":"good"} |
cls |
Object | holds CLS data eg {"data":0.0049,"vitalsScore":"good"} |
Methods
alertColor() → {String}
- Source:
Properties:
| Name | Type | Description |
|---|---|---|
value |
String | CWV rating of good, needsImprovement or poor |
CLS value change callback which calls coreWebVitalResponse
Example
this.alertColor("good")Returns:
The Stimulus class target
- Type
- String
alertSubstring() → {String}
- Source:
Properties:
| Name | Type | Description |
|---|---|---|
currentContent |
String | The text associated with the CWV |
Splits the string at ... and returns the text on LHS with ... on the end
Example
this.alertSubstring("Largest Contentful Paint ... waiting")Returns:
eg. Largest Contentful Paint ...
- Type
- String
clsValueChanged() → {void}
- Source:
- See:
-
- coreWebVitalResponse
CLS value change callback which calls coreWebVitalResponse
Returns:
N/A
- Type
- void
coreWebVitalResponse() → {void}
- Source:
- See:
-
- alertColor
- alertSubstring
Properties:
| Name | Type | Description |
|---|---|---|
cwv |
String | string identifying the CWV |
value |
Object | CWV object with score and reading of good, needs improvement or poor |
target |
String | string identifying the target in the DOM |
Returns if no value object present. This will happen on the first runs of the value change callbacks on initial page load.
Adds a relevent class for the alert colour.
Replaces the ... waiting text with the CWV score.
Example
this.coreWebVitalResponse("cls", this.clsValue, this.clsTarget)Returns:
N/A
- Type
- void
disconnect() → {void}
- Source:
Displays the normal footer again when the controller disconnects and hides the CWV section
Returns:
N/A
- Type
- void
fidValueChanged() → {void}
- Source:
- See:
-
- coreWebVitalResponse
FID value change callback which calls coreWebVitalResponse
Returns:
N/A
- Type
- void
initialize() → {void}
- Source:
Initialises perfume.js only on DOMContentLoaded. The CWV's are only available on a full page load so this prevents the initialisation on Turbo drive navigations
Returns:
N/A
- Type
- void
lcpValueChanged() → {void}
- Source:
- See:
-
- coreWebVitalResponse
LCP value change callback which calls coreWebVitalResponse
Returns:
N/A
- Type
- void
organiseDataBasedOnMetric() → {Object}
- Source:
Properties:
| Name | Type | Description |
|---|---|---|
metric |
String | the userAgent string |
data |
String | Number | the userAgent string |
The rum metric could be a float or string and I want to store it appropriately in supabase so this will populate 2 different fields depending on the metric
Returns:
- Type
- Object
reveal() → {void}
- Source:
Displays the CWV section in the footer and hides the normal footer
Returns:
N/A
- Type
- void
rumLogger() → {void}
- Source:
- See:
-
- visitorIsBot
- postRumLoggerData
Properties:
| Name | Type | Attributes | Description |
|---|---|---|---|
metric |
String | string identifying the RUM metric |
|
data |
String | Number | value associated with the metric |
|
vitalsScore |
String |
<optional> |
CWV reading of good, needs improvement or poor |
Sends the Real User Metric data to a Netlify background function.
Netlify background functions will immediately return a 202 to indicate that the bckground function has been triggered but we are not to wait for a result as the function will be queued and could take as much as 15 mins to run.
Examples
this.rumLogger("cls", 0, "good")this.rumLogger("networkInformation", "4g")Returns:
N/A
- Type
- void
visitorIsBot() → {Boolean}
- Source:
Properties:
| Name | Type | Description |
|---|---|---|
userAgent |
String | the userAgent string |
Checks if the part of the user_agent matches against one of the given bot names
Returns:
- Type
- Boolean