15 Multiple Events to One Method

Description

In this example we will show you how to create a "multi-to-one". Multiple events to one method.

Note: We are using events built in to this API. No JavaScript is required.

You can initiate an interaction by combining the results of events that took place on different elements and different pages!

1 In this example we are binding all events to a method without parameters or placement options.

It is necessary to have an element containing the necessary parameters and placement options.

In this case an etag must be directed to the shared method [data-fs-etag="method:multi-to-one"] and our method will automatically fire an interaction once all other events are completed

[data-fs-etag="method:multi-to-one"]

2 The first step, this page must be revisited 3 times first.

Revisit (Revisit Event)

2 Wait time is set to 20 seconds and will start instantly.


3 A click event is also required.


4 Click on the button to create a change in the card below.

<div 
    class="card card-secondary p-5" 
    data-fs-sequence="example-on-change">

    <p><strong class="h2">1</strong> In this example we are binding all events to a method without parameters or placement options.</p>
    <p> It is necessary to have an element containing the necessary parameters and placement options.</p>
    <p>In this case an etag must be directed to the shared method <code>[data-fs-etag="method:multi-to-one"]</code> and our method will automatically fire an interaction once all other events are completed</p>

    <div 
        class="card bg-light" 
        data-fs-etag="method:multi-to-one" 
        data-fs-params='{ 
            "trigger": {
                "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17"
            },
            "rel": {
                "interaction": {
                        "subject":"Example interaction",
                        "description": "This interaction was triggered by the method:multi-to-one method."
                }       
            }
            }' 
        data-fs-el="@module-2410d449e70cdb75a0fccd29e7880c17" data-fs-opt='{ 
            "placement": "bottom", 
            "theme": "white", 
            "size": "md"
        }'>
        <div class="card-body">
            <code>[data-fs-etag="method:multi-to-one"]</code>
        </div>
    </div>

    <p>
        <strong class="h2">2</strong> The first step, this page must be revisited 3 times first.
    </p>
    <div 
        data-fs-etag="onrevisit:trigger-example-interaction" 
        data-fs-revisit="trigger-example-interaction"
        data-fs-count="3" 
        data-fs-stop="true" 
        data-fs-addto='{"method": "multi-to-one"}'>
    </div>
    <a class="btn btn-primary" href="https://formsynergy.com/interactions/multi-to-one/">Revisit (Revisit Event)</a>

    <hr />
    <p>
        <strong class="h2">2</strong> Wait time is set to 20 seconds and will start instantly.
    </p>
    <div 
        data-fs-etag="onwait:trigger-example-interaction" 
        data-fs-wait="trigger-example-interaction" 
        data-fs-count="20"
        data-fs-addto='{"method": "multi-to-one"}'>
    </div>

    <hr />
    <p><strong class="h2">3</strong> A click event is also required.</p>
    <button 
        type="button" 
        class="btn btn-primary" 
        data-fs-etag="onclick:trigger-example-interaction"
        data-fs-click="trigger-example-interaction" 
        data-fs-addto='{"method": "multi-to-one"}'>
            Click on button (Click Event)
    </button>

    <hr />
    <p><strong class="h2">4</strong> Click on the button to create a change in the card below.</p>
    <div 
        class="card" 
        data-fs-etag="onchange:trigger-example-interaction" 
        data-fs-change="trigger-example-interaction"
        data-fs-addto='{"method": "multi-to-one"}'>
            <div class="card-body p-5"></div>
            <div class="card-footer">
                <button type="button" id="add-class-button" class="btn btn-primary">Change button (Change Event)</button>
            </div>
    </div>

</div>