Page Tracking Example

Below is an example that sends the current page when vablet requests it via the VabletRequestedPageNumber event. A page change can alternatively be forced by calling the vablet reportPageChange method. This is useful if your application requires page tracking analytics.

The page number does not have to be a number. Pass it a string if you prefer named route logging.

HTML

<form id="pageForm" onsubmit="return changePage();">
  <label for="pageNumber">Enter a page:</label>
  <input id="pageNumber" type="text" />
  <input value="Submit" type="submit" />
</form>

JavaScript

var currentPage = 1;

function sendCurrentPage() {
  VabletNativeInterface.callNativeMethod(
    "reportPageChange",
    { newPage: currentPage },
    function (response) {}
  );
}

document.addEventListener("VabletRequestedPageNumber", sendCurrentPage, false);

function changePage() {
  var pageNumber = document.forms[0]["pageInput"].value;

  if (pageNumber === "" || pageNumber == null) {
    alert("Please enter a page number.");
    return false;
  }

  currentPage = pageNumber;
  sendCurrentPage();

  return false;
}