ampproject / ampproject/amphtml
amp-analytics: Add support for trigger on change
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Feature request
Scenario: site has a form with an input text field (like a destination for a travel site). Site owner wants to be able to track what the users start typing, even if they later amend the text. For instance, if the users a) types "Rome", b) deletes it before submitting the form, c) and then types "London" and d) submits the form, the client would like to have fired an analytics request right after a), containing "Rome".
Since [amp-analytics doesn't allow to define triggers on change or input-debounced](https://www.ampproject.org/docs/reference/components/amp-analytics#triggers), we cannot directly use it for tracking the behavior described above. And even if it did, we still couldn't pass the value of the input, as it [only becomes available as a variable when the form is submitted](https://www.ampproject.org/docs/reference/components/amp-form#analytics-triggers).
Thus, for achieving this, a new trigger for `amp-analytics` would have to be implemented, `on change` of an `input` element.
### Workaround
There is a possible work around, using an auxiliary form, and daisy chaining the original form and the auxiliary one. Define attribute `on:input-debounced` of the destination input field a) updates the state, which is used to update the value of a hidden input of a second form and b) submits the second form. With appropriate selectors in the amp-analytics trigger, this works. [Working example](https://www.google.com/url?sa=D&q=https%3A%2F%2Fcodepen.io%2Fmcmd%2Fpen%2FLJqvRe%3Feditors%3D1000).
Contributor guide
Assessment
This issue has not been assessed yet.