Skip to main content

Ensuring Collection Completes

The Browser SDK is now on the login page, and will start running in the background as soon as the page is loaded. This lets it run while the user enters their login details.

Its important that once the user enters the login details, the form submission is augmented. There are two reasons for this:

  • It is necessary to capture the sessionID generated by the Browser SDK. This sessionID is used in the API calls to ISV to correlate the two.
  • To ensure that the Browser SDK can complete execution before the user leaves the page.

The Browser SDK provides a single function, getSessionId(), which returns a promise. The resolution of this promise will include the session ID. This method should be invoked, and the returned promise should be chained into the form submission, so that:

  1. Validation occurs
  2. Browser SDK resolves
  3. Form submits

Therefore, in your login page, you can augment the submission of the form with the following change:

window.addEventListener('load', function (e) {
  var form = document.getElementsByName('login')[0];
  form.addEventListener('submit', function (event) {
    event.preventDefault();
    getSessionId().then(sessionID => {
      const sessionIDField = document.createElement('input');
      sessionIDField.type = 'hidden';
      sessionIDField.name = 'sessionId';
      sessionIDField.value = sessionID;
      form.appendChild(sessionIDField);
      document.body.appendChild(form);
      form.submit();
    });
  });
});

Your login page should now look like:

<html>

<head>
  <script src='static/adaptive-v1.min.js'></script>
  <script>
    // The snippet host and snippet ID were provided when you onboarded your application.
    startAdaptiveV1('<snippet host>', '<snippet ID>');
    window.addEventListener('load', function (e) {
      var form = document.getElementsByName('login')[0];
      form.addEventListener('submit', function (event) {
        event.preventDefault();
        getSessionId().then(sessionID => {
          const sessionIDField = document.createElement('input');
          sessionIDField.type = 'hidden';
          sessionIDField.name = 'sessionId';
          sessionIDField.value = sessionID;
          form.appendChild(sessionIDField);
          document.body.appendChild(form);
          form.submit();
        });
      });
    });
  </script>
</head>

<body>
  <h1>Login</h1>
  <form name='login' action='/login' method='POST'>

    <label for='username'>Username:</label><br>
    <input type='email' id='username' name='username'><br>

    <label for='password'>Password:</label><br>
    <input type='password' id='password' name='password'><br>

    <input type='submit' value='Submit'>
  </form>
</body>

</html>

Alternatively the augmentation can be included as part of a promise chain, if validation and submission is already being handled in JavaScript:

function formSubmit() {
  validateFormFields().then(formData => { 
    return getSessionId().then(sessionID => {
      formData['sessionId'] = sessionID;
      return formData;
    })
  }).then(formData => postForm(formData));
}

For API documentation for the Browser SDK, view the GitHub README.


Next: Serving the Login Page

Previous: Adding a Login Page