SPA integration

To fully integrate with Digital, the SPA needs to notify that a change has occurred by calling the on-site SDK API. If this feature is not available on your property, contact your servicing team to get your account updated.

After the Digital embed code is loaded on a website, a JavaScript object named KAMPYLE_ONSITE_SDK exists, which provides several APIs. Use the KAMPYLE_ONSITE_SDK.updatePageView() function to force the Digital code to execute. The SPA should notify Digital each time that a change has occurred.

This example shows how to call the KAMPYLE_ONSITE_SDK.updatePageView() function:
<script type="text/javascript">
              if (window.KAMPYLE_ONSITE_SDK && typeof window.KAMPYLE_ONSITE_SDK.updatePageView === 'function'){
                              window.KAMPYLE_ONSITE_SDK.updatePageView();
              }
</script>
The code first checks if the KAMPYLE_ONSITE_SDK API and its updatePageView() function exist. If they exist, then it executes the updatePageView() function. This ensures that there are no errors related to the code. JavaScript execution is always synchronous and single-threaded so it needs to stay non-blocking.

Deploying the code

The most common place on a page for the KAMPYLE_ONSITE_SDK.updatePageView() function is immediately after the Digital embed code has been called.

The code required for integrating Digital and an SPA can optionally be deployed using a tag manager. This avoids the need to change to avoid making direct changes to the site.

For example:

  • Google Tag Manager - Google tag manager optimizes the code on their side. Ensure your web development team review the code so that it stays the same as demonstrated in the example code in this section.
  • Adobe Tag Manager - Add the example code at DOMM level, while the call to updatePageview() should be executed upon each pageLoad event

Results of updating the page

When the updatePageView() function is called, it starts a new targeting session and these changes are made:

  1. Sets these local storage items to their default state

    • inviteLoaded: null
    • inviteShown: false

  2. Clears all forms, data and targeting from memory, this includes:

    • resets the time on page
    • increment kampyleSessionPageCounter
  3. Fetches all form configurations
  4. Detects and set language code for each form
  5. Ensure invitation is hidden if already displayed
  6. Detect mobile device and remove events that may hide the invitation when the virtual keyboard is open
  7. Execute all targeting rules
Given the above, it is important to understand when is best to call the KAMPYLE_ONSITE_SDK.updatePageView() function. For example, calling updatePageView() upon each link that is clicked on the page could cause an intercept to repeatedly retrigger on the page after clicking the link. This could result in over surveying, because the overuse of the updatePageView() function is overriding the default cool down period. Consult your web development team to best understand when the SPA should call the KAMPYLE_ONSITE_SDK.updatePageView() function.