Gated Events 🧪

Some Events might have pre-requisites before they can fire.

  • User is logged in to MemberStack

  • User is in a specific User Group

  • User has accepted a Gating modal or something similar

Use Cases

  • Over 21 gating before a site can be accessed

  • Birthdate gating before a site can be accessed

  • Collect user data before a modal is shown

Technical Notes

Custom gates

Custom gates perform a special test every time

State gates

Require a specific action be perfomed or test be passed once. Once the gate is opened, the open state is stored generally in localStorage.

Once opened, it does not need to be re-opened

Opening a gate can be done by an EventGateHandler in a number of ways;

  • Check to see if the user is

When the gate is open, the event fires normally.

When the gate is closed;

  • A modal is presented

    • The user satisfies the gating requirements, e.g. submit a form, click a button

  • The URL is followed, including target

  • The gate is opened

Gate State Management

Check Gate

Determine if the gate is opened;

  • Default is to check localStorage

  • But can also be sessionStorage

  • Or cookies

  • Can be any custom thing as well, e.g.

Open Gate

Opens the gate;

  • localStorage, sessionStorage, or cookies

Close Gate

Closes the gate;

Implementation Notes

Defined as a block

<script sa5-event="name">
{
   gate-type: modal
   modal-gate-type: view
   gate-state: localstorage 
}
</script> 

  • EventGateHandlerBase

    • EventGateModalHandler

      • EventGateModalViewHandler

      • EventGateModalButtonHandler

      • EventGateModalFormHandler

    • EventGateMemberstackHandler

  • EventGateStateHandlerBase

    • EventGateStateLocalStorageHandler

    • EventGateStateSessionStorageHandler

    • EventGateStateCookieHandler

EventGateLocalStorageHandlerBase

EventGateLocalStorageHandlerBase

Concept

wfu-event-gate = function

Must return true

Pass in Event, so it can be fired

Gate Types

Defined as a block

<script sa5-event="name">
{
   gate-type: modal
   modal-gate-type: view
   
}
</script> 

  1. An event fires

  2. Modal type gate is gate-checked

  3. If fails pass;

    1. Display modal

  4. Success pass;

    1. Fire event

Modal Gate Type
Test
Success
Fail

view

button

form

Eval Gate

1.

Last updated

Was this helpful?