Web Template Display Utilities

DisplayUtils is a set of utility functions built with SPA handling in mind that provides page behavior APIs, including page exit intention, page inactivity, page scroll, visible elements, and loaded elements watcher.

All methods

• Bind with an ID so that later one can unbind listeners/observers with the same ID whenever they want.

  • rebinding with same ID unbinds the previous binding and sets the new unbind method to the ID.

  • if using bind() alone, it generates IDs based on function name and selector

  • if there are no bind() methods used, it generates a random ID

    • SalesforceInteractions namespace

    • Evergage namespace

• unbind with an ID to cancel listeners/observers

  • SalesforceInteractions namespace

  • Evergage namespace

• getBindings gets all IDs with their unbinding methods

  • SalesforceInteractions namespace

  • Evergage namespace

• clearBindings goes through each known binding and unbinds them all

  • SalesforceInteractions namespace

  • Evergage namespace

• Triggers resolve functions when the provided percentage of a target node is in the viewport

  • Defaults to firing when at least 1 pixel of the target is visible.

  • Only trigger one time

  • No IE support because it requires Intersection Observer API.

  • entry is the data when element is visible

  • Error "[pageElementVisible] Invalid arguments":

    • selector is not a string

    • typeof percentage is not “number”

    • Percentage less than zero

    • Percentage greater than one

    • SalesforceInteractions namespace

    • Evergage namespace

• Triggers resolve function when the cursor leaves the bounds of the body from the top of the page with/without a delay. If more mouse movement is detected in the body within the delay period after leaving the window, the exit intent detection delay is cleared, but the event listener is not removed.

  • Default to a 0 millisecond delay (which also means no delay).

  • Listening for the mousemove event.

  • Only trigger one time.

  • event is the mousemove event when mouse leaves the page

  • Error "[pageExit] Invalid arguments":

    • typeof delay is not a number

    • delay is less than 0

    • SalesforceInteractions namespace

    • Evergage namespace

• Triggers a resolve function when no user activity within the document after ms milliseconds.

  • Any mousemove, click, scroll, keyup, and keydown events in the document resets the inactivity timer.

  • Using .then only trigger one time

  • Using .subscribe continues to trigger on inactivity.

    • To discontinue, please call event.disconnect

  • event is the last event that triggers inactive.

    • Event types: mousemove, click, scroll, keyup, keydown

  • Error "[pageInactive] Invalid arguments":

    • typeof ms is not a number

    • ms is less than or equal to 0

    • SalesforceInteractions namespace

    • Evergage namespace

• Triggers resolve function when user scroll pass provided page percentage.

  • percentage is expected to be in decimal form.

  • Only trigger one time.

  • Be careful for dynamic height pages.

  • There is no detection on page scrolling direction so it triggers either from top to bottom or bottom to top.

  • event is the scroll event when scrolling passed percentage.

  • Error "[pageScroll] Invalid arguments":

    • typeof percentage is not a number

    • percentage is less than 0

    • percentage is greater than 1

    • SalesforceInteractions namespace

    • Evergage namespace

• Triggers when element is loaded on page.

  • Choose observerSelector wisely to avoid performance issues.

  • Use Mutation Observer to watch added nodes.

  • Only trigger one time.

  • element is the target element that loaded.

  • Error "[pageElementLoaded] Invalid arguments":

    • targetSelector must be a non-empty string
    • observerSelector must be a non-empty string
    • If no observerSelector is specified, the pageElementLoaded function binds a listener to the body or html element and waits for the targetSelector to be added as a descendant.
    • Ensure that the observerSelector configured in the pageElementLoaded function is available on the page when running a campaign.

    • SalesforceInteractions namespace

    • Evergage namespace