search

further-external / Apollo-Documentation-InterExchange

An Apollo generated Event Driven Data Layer
1 stars 1 forks source link

Handling Participant Application Payment #12

Open davisbradleyj opened 1 year ago

davisbradleyj commented 1 year ago

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 commented 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>
davisbradleyj commented 1 year ago

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

dirkkelly commented 1 year ago

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