Adapt Click Events

AdaptClickEvent

AdaptClickEvent is one of the default classes, and adds logic to the DOMElements to track clicks for Adapt Retail.

Usage

// Import the plugin
import {AdaptEvent, AdaptClickEvent} from '@adapt-retail/adapt-event';

// Add the plugin
AdaptEvent.addPlugin( new AdaptClickEvent );

adaptClick

document.querySelector( '.logo' )
    .adaptClick( function( event) {
        ...
    } );

// Triggers the following event
// {
//     name: 'click',
//     description: '<div class="logo"></div>',
//     event: MouseEvent
// }

You can also set the name and the description of the event as the second and third parameter.

document.querySelector( '.logo' )
    .adaptClick( function( event) {
        ...
    }, 'click-on', 'logo' );

// Triggers the following event
// {
//     name: 'click-on',
//     description: 'logo',
//     event: MouseEvent
// }

adaptClickAndNavigate

We have also provided a method for navigating to an url from the dom element.

document.querySelector( '.logo' )
    .adaptClick( 'https://adaptretail.com' );

// Triggers the following event
// {
//     name: 'navigate-to',
//     description: 'https://adaptretail.com',
//     event: MouseEvent
// }

You can also set the name and the description of the event as the second and third parameter.

document.querySelector( '.logo' )
    .adaptClick( 'https://adaptretail.com', 'to-url', 'from-logo' );

// Triggers the following event
// {
//     name: 'to-url',
//     description: 'from-logo',
//     event: MouseEvent
// }

To make it easier for you to navigate we also included the navigate function to the AdaptEvent.

AdaptEvent.navigate( 'https://adaptretail.com' );

// Triggers the following event
// {
//     name: 'navigate-to',
//     description: 'https://adaptretail.com',
//     event: null
// }

Manipulate the url

It is also possible to manipulate the behaviour of the plugin on other plugins. We loop through each plugin added in AdaptEvent and runs the functions.

class Plugin {

    /**
     * The url will be manipulated by all plugins
     * And the url you return may be manipulated by the next plugins.
     *
     * @return string
     */
    formatAdaptClickUrl( url ) {
        return url + '-test';
    }

    /**
     * Formats the target we should use when opening the url
     * The last plugin calling this method has presidence
     *
     * @return string
     */
    setAdaptNavigateTarget() {
        return "_blank";
    }

}

Plugin for adding google analytics to your urls

You can include our default plugin to add adapt google analytics to your url automaticly when navigating to urls.

import {AdaptGoogleAnalythics} from '@adapt-retail/adapt-event';

AdaptEvent.addPlugin( new AdaptGoogleAnalythics );