Open davisbradleyj opened 1 year ago
Hi @davisbradleyj that order makes sense to me.
To confirm my overall understanding though, the dataLayer push strategy would look like.
User visits the payment page
page_load_started
user_detected
if user is signed in
page_load_complete
form_view
User starts to enter data into any field in the payment form
form_started
nb: this would only fire once on the first field change
User submits the payment form, server side processes to ensure valid, and redirects to thank you page
page_load_started
user_detected
if user is signed in
page_load_complete
form_complete
purchase
I'm not sure about the phases of the project sorry. This is existing functionality, but we could leave as is and just update later.
Page code would be something like this very simplified pseudo code
<html>
<head>
<script src="gtm"></script>
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ page_data: null });
dataLayer.push({
"event": "page_load_started",
...
});
</script>
</head>
<body>
<form>
...
</form>
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
"event": "page_view",
"detailed_event": "Page Load Completed"
});
</script>
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ page_data: null });
dataLayer.push({
"event": "detect_user",
...
});
</script>
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ page_data: null });
dataLayer.push({
"event": "detect_user",
...
});
</script>
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ event_data: null });
dataLayer.push({
"event": "form_view",
"detailed_event": "Form Viewed",
...
});
</script>
<script>
let formChanges = 0;
let form = document.querySelector('form');
form.addEventListener('change', function() {
if(formChanges == 0) {
window.dataLayer = window.dataLayer || [];
dataLayer.push({ event_data: null });
dataLayer.push({
"event": "form_start",
"detailed_event": "Form Started",
...
});
}
formChanges++;
});
</script>
</body>
</html>
Hi @dirkkelly
Ultimately, anything that IEX would want captured as part of a "page_view" event should be in the data layer before that Page Load Completed event fires. If this would include user information, then "detect_user" should fall between "page_load_started" and "page_view".
Anything else can sit be structured into the codebase after the page_view event fires.
Please let me know if this is helpful
That's great thanks for clarifying. I'll update my notes accordingly.
I was under the impression that a "purchase" event was intended to be a future phase item. We can definitely add this to Github if it is intended to be part of this phase.
Yes, the "purchase" event should fire along side a "form_complete" event if it makes sense.
"form_Started" would likely fire when a user enters field information for the first time. The form may appear on a page for a "form_view" but if the user does not fill out any field, it would not have been a "form_started" event. "form_started" does not necessarily have to be on the submission of a form.