Future Plans πŸ§ͺπŸ“

The underlying link approach has proven very useful. We want to expand the capabilities to handle other use cases;

  • Trigger interactions ( via a button trigger )

  • Trigger chatbots

  • Trigger Gista with a query

  • Trigger custom JS, JS-based modals, etc.

And also possibly;

  • Trigger GTM datalayer and events

Considering

wfu-ix-trigger-type ( optional ) = click | timer

wfu-ix-trigger-ms = 10000

Syntax Expansion

Likely we'll support named or "slotted" formats;

  • ## - Generic trigger prefix

    • e.g. ##glossaryterm

  • #1# - Typed trigger prefix

    • e.g. #1#abc

Essentially;

  • Identify a trigger-capable area ( can be page-wide )

  • Find links that begin with #

  • and contain

    • May be able to regex match #..#.. in selector.

const elements = [...document.querySelectorAll('a[href^="#"][href*="#"]:not([href="#"])')].filter(el => {
    const match = el.getAttribute('href').match(/^#(\w*)#(\w+)$/);
    return match !== null;
});

Extract the name, trigger the name.

On page load, build a list of trigger targets, e.g. IX buttons

Typed trigger wiring process;

  • Match to known targets, by name

Registered Type Handlers

  • ix

  • gista ( register and define these as typed trigger handlers in the config code )

Generic trigger

  • Create attribute first

    • wfu-trigger-type

    • wfu-trigger-id

  • wfu-trigger-target-type

  • wfu-trigger-target-id

Other Trigger Types

Currently we have click trigger types

Considering scrolling triggers, and timer-based triggers.

Inactivity-timer based triggers

Technical Notes

What is a Trigger?

Currently SA5 supports the click trigger type only. In this context a trigger is an element such as a link, button, or DIV that is clicked.

In SA5 terms, a trigger may have these properties;

  • Handler. Identifies how the trigger will be handled. Determined as follows;

    • If the trigger element has the attribute wfu-trigger-handler - identifies the handler for the trigger.

    • If unspecified, and the trigger is in a group, that handler is used instead.

    • If there is no group-specified handler, then the trigger is "unhandled," and defaults to a click handler.

  • ID. Uniquely identifies the trigger, or more specifically the triggering action you want performed. In the case of a click trigger, this identifies the click target.

    • wfu-trigger-id - the unique ID of the trigger

  • Group (optional). If the trigger is in a named group, that group name is applied to the trigger. It acts as a namespace.

    • wfu-trigger-group

  • Content. A trigger element may also contain content;

    • Plain-text content ( innerText )

    • HTML content ( innerHTML )

What are Trigger Handlers?

Trigger handlers identify how a particular trigger is handled. For example-

  • Click a matching target link.

  • Prompt an AI chatbot

  • Center a pin in Google maps

  • Start a WhatsApp message

  • Invoke custom code

The trigger's handler is determined as follows;

  • If the trigger itself has a wfu-trigger-handler, that handler is used

  • If not, we check for a trigger group, and a wfu-trigger-group-handler.

  • If not, the trigger is considered unhandled. It defaults to using the click handler, and can be captured in custom code.

What is a Trigger Group?

A trigger group is defined as the nearest ancestor ( containing ) element of a trigger which has the custom attribute of wfu-trigger-group.

A group serves two purposes.

  • It can be named, as in wfu-trigger-group = (name), in which case that name becomes a namespace for the triggers. Some handlers will use this as a scoping mechanism, so that only targets also matching that group will be triggered

  • Default trigger handlers. A group can additionally define a wfu-trigger-group-handler which acts as the handler for any unhandled triggers within.

What are Trigger Targets?

Some trigger handlers such as the click handler can utilize a target element that you specify.

These are identified by wfu-trigger-target = ID. OPTIONALLY They can be namespaced, by wfu-trigger-target-group, which must match.

Setting It Up

Configure the Trigger Library ( optional )

Register handlers, such as Gista.

<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['triggerConfig', 
  (config) => {
    config.handlers.add ('gista'); 
    return config;
  }]); 
</script> 

Custom Code in the the Trigger Callback ( optional )

Custom-code to handle specific trigger events.

<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['triggerEvent', 
  (event) => {
    console.log("TRIGGER FIRED", event); 
  }]); 
</script> 

Setup

A click trigger can be placed on any element that can be clicked. It is governed by;

  • wfu-trigger-type - the type of trigger, which functions as a namespace

  • wfu-trigger-handler - identifies the handler for the trigger. If unspecified, and the trigger is in a group, that handler is used instead. If there is no group-specified handler, then the trigger is "unhandled," and will only fire events in code.

  • wfu-trigger-id - the unique ID of the trigger

  • It can also contain content

All click triggers MAY be in a trigger group. This would be the nearest containing element which has the attributes;

  • wfu-trigger-group - an optional name

  • wfu-trigger-group-type - an optional default type, which will be applied to untyped (generic) triggers

A trigger target can also be placed on any element that can be clicked. Typically this would be a button that is associated with an interaction. It is goverened by;

  • wfu-trigger-target-type - type type of target, which functions as a namespace and must match the trigger

  • wfu-trigger-target-id - unique ID of the target

Activation

When a trigger is activated, an event is raised in custom code, with-

  • Trigger container name

  • Trigger type

  • Trigger ID

If trigger target elements are found which match that trigger, they will also be clicked.

If a handler has been associated with the trigger type, it will be invoked, e.g. Gista.

How it Works

Pre-processing;

  • Identifies relevant areas to process links in. These are referred to as trigger-containers.

    • Identified with a wfu-trigger-area custom attribute. It can optionally be given a unique name

    • Optionally, set the default type with wfu-trigger-default-type =

  • Resolves links in those areas, including the parent node

Last updated