Add guidance for analytics scripts handling checkout prerendering #1043
Conversation
| @@ -58,6 +58,66 @@ The following table describes the locations you can associate with Scripts API o | |||
|
|
|||
| To associate scripts with a checkout page, you need the [Modify Checkout Content OAuth scope](/docs/start/authentication/api-accounts#oauth-scopes). | |||
|
|
|||
| ## Handling prerendered checkout pages | |||
There was a problem hiding this comment.
prerendered is misspelt retext-spell retext-spell
| @@ -58,6 +58,66 @@ The following table describes the locations you can associate with Scripts API o | |||
|
|
|||
| To associate scripts with a checkout page, you need the [Modify Checkout Content OAuth scope](/docs/start/authentication/api-accounts#oauth-scopes). | |||
|
|
|||
| ## Handling prerendered checkout pages | |||
|
|
|||
| With the introduction of [Speculation Rules API](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API) and browser prerendering, checkout pages may be prerendered before users actually navigate to them. This can cause analytics and other event-tracking scripts to fire prematurely. | |||
There was a problem hiding this comment.
prerendering is misspelt retext-spell retext-spell
| @@ -58,6 +58,66 @@ The following table describes the locations you can associate with Scripts API o | |||
|
|
|||
| To associate scripts with a checkout page, you need the [Modify Checkout Content OAuth scope](/docs/start/authentication/api-accounts#oauth-scopes). | |||
|
|
|||
| ## Handling prerendered checkout pages | |||
|
|
|||
| With the introduction of [Speculation Rules API](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API) and browser prerendering, checkout pages may be prerendered before users actually navigate to them. This can cause analytics and other event-tracking scripts to fire prematurely. | |||
There was a problem hiding this comment.
prerendered is misspelt retext-spell retext-spell
|
|
||
| With the introduction of [Speculation Rules API](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API) and browser prerendering, checkout pages may be prerendered before users actually navigate to them. This can cause analytics and other event-tracking scripts to fire prematurely. | ||
|
|
||
| When scripts inject into checkout pages, they should check whether the page is being prerendered to avoid triggering events before the user actually visits the page. |
There was a problem hiding this comment.
Hard to read sentence (confidence: 4/7) retext-readability retext-readability
|
|
||
| With the introduction of [Speculation Rules API](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API) and browser prerendering, checkout pages may be prerendered before users actually navigate to them. This can cause analytics and other event-tracking scripts to fire prematurely. | ||
|
|
||
| When scripts inject into checkout pages, they should check whether the page is being prerendered to avoid triggering events before the user actually visits the page. |
There was a problem hiding this comment.
prerendered is misspelt retext-spell retext-spell
| } | ||
| ``` | ||
|
|
||
| ### Example: Analytics script with prerendering support |
There was a problem hiding this comment.
prerendering is misspelt retext-spell retext-spell
|
|
||
| ### Example: Analytics script with prerendering support | ||
|
|
||
| Here's a complete example of adding an analytics script to checkout pages that properly handles prerendering: |
There was a problem hiding this comment.
prerendering is misspelt retext-spell retext-spell
| } | ||
| ``` | ||
|
|
||
| This approach ensures that analytics events only fire when users actually visit the page, not when it's being prerendered in the background. |
There was a problem hiding this comment.
prerendered is misspelt retext-spell retext-spell
|
|
||
| This approach ensures that analytics events only fire when users actually visit the page, not when it's being prerendered in the background. | ||
|
|
||
| For more information about prerendering, see the [Speculation Rules API documentation](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API) and the [prerender pages guide](https://developer.chrome.com/docs/web-platform/prerender-pages#eagerness). |
There was a problem hiding this comment.
prerendering is misspelt retext-spell retext-spell
|
|
||
| This approach ensures that analytics events only fire when users actually visit the page, not when it's being prerendered in the background. | ||
|
|
||
| For more information about prerendering, see the [Speculation Rules API documentation](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API) and the [prerender pages guide](https://developer.chrome.com/docs/web-platform/prerender-pages#eagerness). |
There was a problem hiding this comment.
prerender is misspelt; did you mean pretender? retext-spell retext-spell
There was a problem hiding this comment.
@bookernath this looks good to me and nice examples.
For the developers not familiar with prerendering, perhaps adding a note to the beginning of the prerender sections stating that the overall approach is to initialize 3rd-party javascript (e.g. analytics scripts) only after the prerendered page becomes visible. To do this, use document.prerendering and the prerenderingchange event.
- document.prerendering is true during prerender
- prerenderingchange fires exactly when the page activates (becomes visible)
[DEVDOCS-]
What changed?
Release notes draft
Anything else?
ping {names}