Handling Participant Application Payment #12

davisbradleyj · 2022-11-30T18:36:31Z

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.

dirkkelly · 2022-12-01T02:03:16Z

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>

davisbradleyj · 2022-12-01T15:13:53Z

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

Brad

dirkkelly · 2022-12-01T22:48:17Z

That's great thanks for clarifying. I'll update my notes accordingly.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Handling Participant Application Payment #12

Handling Participant Application Payment #12

davisbradleyj commented Nov 30, 2022

dirkkelly commented Dec 1, 2022 •

edited

Loading

davisbradleyj commented Dec 1, 2022

dirkkelly commented Dec 1, 2022

Handling Participant Application Payment #12

Handling Participant Application Payment #12

Comments

davisbradleyj commented Nov 30, 2022

dirkkelly commented Dec 1, 2022 • edited Loading

davisbradleyj commented Dec 1, 2022

dirkkelly commented Dec 1, 2022

dirkkelly commented Dec 1, 2022 •

edited

Loading