Client Side Events

Question

I'm new at JS (and Stack Exchange) but would love to learn more about the lifecycle of my forms, specifically the multipage activity.

I've checked out this page https://www.cognitoforms.com/support/62/data-integration/clientside-events and have been able to get somewhere with the following code:

<div class="cognito">
<script src="https://services.cognitoforms.com/s/l7xGCnCNMEOaAr1owUlDng"></script>

<script>Cognito.load("forms", { id: "17" },
          { success: function() { ExoJQuery(function() {
                  ExoJQuery(document)
                 .on('afterNavigate.cognito', function(e, data) {
                ga('send', 'event', 'F1 next', 'Navigate', 'F1 next',{transport: 'beacon'});
              });
      }); } });
  </script>

</div>

My two questions are:

1. How can I learn more about which page is being clicked instead of all of the pages in general?

2. Can I both track beforeSubmit.cognito and beforeNavigate.cognito?

Answer 1

1: How can I learn more about which page is being clicked instead of all of the pages in general?

You can get more information about the destination page and the source page by using the destinationPage and sourcePage properties off of the data payload. So if I wanted to print the destination page number to the console, I could call use this:

<div class="cognito"><script src="https://services.cognitoforms.com/s/l7xGCnCNMEOaAr1owUlDng"></script><script>Cognito.load("forms", { id: "17" },
          { success: function() { ExoJQuery(function() {
                  ExoJQuery(document)
                 .on('beforeNavigate.cognito', function(e, data) {
                  console.log(data.destinationPage.number);
              });
      }); } });   </script></div>

In the client-side events documentation that you linked, it shows three properties off the pages: the page number, title, and name.

2: Can I both track beforeSubmit.cognito and beforeNavigate.cognito?

Yes. Just add a new ExoJQuery(document).on function after the first one.

<div class="cognito"><script src="https://services.cognitoforms.com/s/l7xGCnCNMEOaAr1owUlDng"></script><script>Cognito.load("forms", { id: "17" },
          { 
              success: function() 
              { 
                  ExoJQuery(function() 
                  {
                        ExoJQuery(document).on('beforeNavigate.cognito', function(e, data) 
                        {
                             console.log(data.destinationPage.number);
                        });
                        ExoJQuery(document).on('afterNavigate.cognito', function(e, data) 
                        {
                             console.log(data.sourcePage.number);
                        });
                   });
               } 
           });
  </script></div>

The formatting is irrelevant, I just think this is easier to read :)

[Note: I'm a software developer at Cognito Forms]