Styla Hooks

Styla provides a hook system to bind event listeners to specific actions and allows to execute a custom callback. This way you can trigger actions in your application based on what happens in Styla content.

The below are the hooks currently available in Styla content. Click the names on the list to read more about them.

General Hooks

These get triggered on every module.

  1. view_page
  2. analytics

Hooks per module:

These get only triggered on specific modules.


List of Hooks:

General Hooks

List of hooks, that get triggered for all modules.

view_page:

This hook is triggered every time the page is loaded.

        
window.styla.hooks.push(
    [
        'view_page',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: undefined,
        // -> in this case, module is undefined,
        // }
        console.log('data', data);
        // data:
        // {
        // path: string,
        // -> area path e.g. /homepage
        // breadcrumbs: [],
        // async: true,
        // -> this is for internal use,
        // this hook is fired asynchronously
        // suppressPageviews: undefined,
        // -> this is for internal use,
        // do not rely on it or use it for your integration
        // }
        }
    ]
);
        
    

analytics:

This hook is triggered from all modules, every time any hook that is related to analytics gets triggered.

        
window.styla.hooks.push(
    [
        'analytics',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: undefined | Module,
        // -> depending on where the hook got triggered, module is either defined or undefined
        // check the end of this page for the Module type
        // }
        console.log('data', data);
        // data:
        // depending on the hook type, you will get a different analytics data object
        // it's better to use the desired hook directly,
        // data object will vary from one hook to another.
        }
    ]
);
        
    

BANNER MODULE

List of hooks, that get triggered only for the Banner module.

banner_click:

This hook is triggered from the banner module, when the full banner is clickable and the banner has at least one CTA button with a link.


        
window.styla.hooks.push(
    [
        'banner_click',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: Module,
        // -> the banner module, check the end of the page for Module type
        // }
        console.log('data', data);
        // data:
        // {
        //      url: string,
        //          -> current area path
        //      targetUrl: string,
        //          -> link target
        // }
        }
    ]
);
        
    

banner_inline_link_click:

This hook is triggered from the Banner module, when a user clicks on an inline link in banner text content.

        
window.styla.hooks.push(
    [
        'banner_inline_link_click',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: Module,
        // -> the banner module, check the end of the page for Module type
        // }
        console.log('data', data);
        // data:
        // {
        //      targetUrl: string,
        //          -> link target
        // }
        }
    ]
);
        
    

banner_cta_click:

This hook is triggered from the banner module, when a user clicks on a CTA button and link is defined.

        
window.styla.hooks.push(
    [
        'banner_cta_click',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: Module,
        // -> the banner module, check the end of the page for Module type
        // }
        console.log('data', data);
        // data:
        // {
        //      url: string,
        //          -> path of current area
        //      targetUrl: string,
        //          -> link target
        // }
        }
    ]
);
        
    

NAVIGATION MODULE

List of hooks, that get triggered only for the Navigation module.

EDITORIAL SHOPPING MODULE

List of hooks, that get triggered only for the Editorial Shopping module (Hotspot module).

hotspot_image_cta_click:

This hook is triggered from the hotspot module ( Editorial shopping module) when a user clicks on a product after the pin was open.


        
window.styla.hooks.push(
    [
        'hotspot_image_cta_click',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: Module,
        // -> the banner module, check the end of the page for Module type
        // }
        console.log('data', data);
        // data:
        // {
        //      url: string,
        //          -> current area path
        //      targetUrl: string,
        //          -> link target
        // }
        }
    ]
);
        
    

hotspot_image_pin_click:

This hook is triggered from the hotspot module, when a user clicks on a pin.


        
window.styla.hooks.push(
    [
        'hotspot_image_pin_click',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: Module,
        // -> the banner module, check the end of the page for Module type
        // }
        console.log('data', data);
        // data:
        // {
        //      url: string,
        //          -> current area path
        //      targetUrl: string,
        //          -> link target
        // }
        }
    ]
);
        
    

YOUR STORIES MODULE

List of hooks, that get triggered only for the Your Stories module (Feed module).

story_click:

This hook is triggered in the feed, upon clicking on a feed item in the feed module or in the feed itself.

        
window.styla.hooks.push(
    [
        'story_clicked',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: Module,
        // -> the banner module, check the end of the page for Module type
        // }
        console.log('data', data);
        // data:
        // {
		// 		story: string,
		// 			-> feed item link
		// 		breadcrumbs: [],
		// 		target: string,
		//			-> "story" | "headline" | string ( where the item got clicked )
		// 		breadcrumbs: [],
		// 		type: "story_clicked",
        // }
        }
    ]
);
        
    

story_link_clicked:

This hook is triggered only from the feed (Headline, Pragraph, Footer and MenuBar) when the users clicks on a story link within the feed.

        
window.styla.hooks.push(
    [
        'story_link_clicked',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: Module,
        // -> the banner module, check the end of the page for Module type
        // }
        console.log('data', data);
        // data:
        // {
        //      url: string,
        //          -> current area path
        //      isFeed: boolean,
        //          -> whether the users clicked on the story link from the feed or the story page
        //      externalURL: string,
        //          -> link clicked
        //      breadcrumbs: [],
        // }
        }
    ]
);
        
    

goto_feed:

Triggered when the user clicked on the logo to go home in the Home component. Only applicable for the feed.


        
window.styla.hooks.push(
    [
        'goto_feed',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: Module,
        // -> the banner module, check the end of the page for Module type
        // }
        console.log('data', data);
        // data:
        // {
        //      url: string,
        //          -> current area path
        //      targetUrl: string,
        //          -> link target
        //      isFeed: boolean,
        // }
        }
    ]
);
        
    

story_related_click:

Currently not being used!


        
window.styla.hooks.push(
    [
        'story_related_click',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: Module,
        // -> the banner module, check the end of the page for Module type
        // }
        console.log('data', data);
        // data:
        // {
        //      breadcrumbs: [],
        //      targetUrl: string,
        //          -> link target
        // }
        }
    ]
);
        
    

HTML MODULE

List of hooks, that get triggered only for the HTML module.

html_inline_link_click:

This hook is triggered from the HTML module, when a user clicks on a inline link in the HTML content.


        
window.styla.hooks.push(
    [
        'html_inline_link_click',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: Module,
        // -> the banner module, check the end of the page for Module type
        // }
        console.log('data', data);
        // data:
        // {
        //      url: string,
        //          -> current area path
        //      targetUrl: string,
        //          -> link target
        // }
        }
    ]
);
        
    

IMAGE MODULE

List of hooks, that get triggered only for the Image module.

image_linked_click:

triggered when a user clicks on the image in the Image module and link is defined

        
window.styla.hooks.push(
    [
        'image_linked_click',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: Module,
        // -> the banner module, check the end of the page for Module type
        // }
        console.log('data', data);
        // data:
        // {
        //      url: string,
        //          -> current area path
        //      targetUrl: string,
        //          -> link target
        // }
        }
    ]
);
        
    

INSTAGRAM MODULE

List of hooks, that get triggered only for the Instagram module.

instagram_image_click:

This hook is triggered from the instagram module, when a user clicks on an image, a instagram feed element.


        
window.styla.hooks.push(
    [
        'instagram_image_click',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: Module,
        // -> the banner module, check the end of the page for Module type
        // }
        console.log('data', data);
        // data:
        // {
        //      url: string,
        //          -> current area path
        //      targetUrl: string,
        //          -> link target
        //      shortcode: string,
        //          -> instagram item shortcode
        //      image: string,
        //          -> instagram item image link
        // }
        }
    ]
);
        
    

PRODUCT MODULE

List of hooks, that get triggered only for the Product module. (carousel, grid and spread layout)

product_click:

This hook get triggered only from the feed, when the users clicks on a product within the feed.

        
window.styla.hooks.push(
    [
        'banner_click',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: Module,
        // -> the banner module, check the end of the page for Module type
        // }
        console.log('data', data);
        // data:
        // {
        //      url: string,
        //          -> current area path
        //      targetUrl: string,
        //          -> link target
        // }
        }
    ]
);
        
    

TEXT MODULE

List of hooks, that get triggered only for the Text module.

text_inline_link_click:

This hook is triggered from the text module when an inline link gets clicked.


        
window.styla.hooks.push(
    [
        'text_inline_link_click',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: Module,
        // -> the banner module, check the end of the page for Module type
        // }
        console.log('data', data);
        // data:
        // {
        //      url: string,
        //          -> current area path
        //      targetUrl: string,
        //          -> link target
        // }
        }
    ]
);
        
    

text_cta_click:

This hook is triggered in the feed, upon clicking on a feed item in the feed module or in the feed itself.

        
window.styla.hooks.push(
    [
        'text_cta_click',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: Module,
        // -> the banner module, check the end of the page for Module type
        // }
        console.log('data', data);
        // data:
        // {
        // 		story: string,
		// 			-> feed item link
		// 		breadcrumbs: [],
		// 		target: string,
		//			-> "story" | "headline" | string ( where the item got clicked )
		// 		breadcrumbs: [],
		// 		type: "story_clicked",
        // }
        }
    ]
);
        
    

VIDEO MODULE

List of hooks, that get triggered only for the Video module.

video_played:

This hook is triggered in the Video module, when a user clicks on the play button to play the video.

        
window.styla.hooks.push(
    [
        'video_played',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: Module,
        // -> the banner module, check the end of the page for Module type
        // }
        console.log('data', data);
        // data:
        // {
        //      url: string, //current page url
        //      videoUrl, string,
        // }
        }
    ]
);
        
    

video_paused:

This hook is triggered in the video module, when a user pauses the video.

        
window.styla.hooks.push(
    [
        'video_paused',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: Module,
        // -> the banner module, check the end of the page for Module type
        // }
        console.log('data', data);
        // data:
        // {
        //      url: string, //current page url
        //      videoUrl, string,
        // }
        }
    ]
);
        
    

TEXT ON VIDEO MODULE

List of hooks, that get triggered only for the Text on +Video module.

text_on_video_inline_link_click:

This hook is triggered from the Text on video module, when a user clicks on an inline link from the text content of the module.


        
window.styla.hooks.push(
    [
        'text_on_video_inline_link_click',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: Module,
        // -> the banner module, check the end of the page for Module type
        // }
        console.log('data', data);
        // data:
        // {
        //      url: string,
        //          -> current area path
        //      targetUrl: string,
        //          -> link target
        // }
        }
    ]
);
        
    

text_on_video_cta_click:

This hook is triggered from the text on video Module, when a user clicks on a CTA and the link is define.


        
window.styla.hooks.push(
    [
        'text_on_video_cta_click',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: Module,
        // -> the banner module, check the end of the page for Module type
        // }
        console.log('data', data);
        // data:
        // {
        //      url: string,
        //          -> current area path
        //      targetUrl: string,
        //          -> link target
        // }
        }
    ]
);
        
    

product_image_click:

This hook is triggered every time a product image in the product module (carousel, spread and grid layout) gets clicked. A product url needs to be defined in order to have this hook triggered.

        
window.styla.hooks.push(
    [
        'product_image_click',
        (context, data) => {
        console.log('context:', context);
        // context:
        // {
        // areaId: string,
        // params: [],
        // -> in this case, since there are no params passed,
        // this will be an empty array
        // store: Redux store,
        // -> this is for internal use, 
        // do not rely on it or use it for your integration
        // module: undefined,
        // -> in this case, module is undefined,
        // }
        console.log('data', data);
        // data:
		// {
		// 		url: string,
		// 			-> area path e.g. /homepage
		// 		breadcrumbs: [],
		// 		targetUrl: string,
		//			-> product link
		// 		productSKU: string,
		//			-> for products with sku, undefined for others
		// }
        }
    ]
);
        
    

Tracking Example

For a tracking implementation there are two important events to consider: analytics and pageview. The analytics event will trigger all events except the pageview. For the pageview event it's important to know if your page already includes a analytics implementation (the first pageview event needs to be skipped) and if you have a single page application (if not the pageview event dont need to be implemented).

The following example can be used and we prepared commented out multiple implementations e.g. basic analytics and google tag manager implementations: