The below are the hooks currently available in Styla content. Click the names on the list to read more about them.
These get triggered on every module.
These get only triggered on specific modules.
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
// }
}
]
);
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.
}
]
);
This hook (moduleRender) is triggered for each module rendered on a page. It delivers a DOM node and the context for the module. The hook can be used to access a module and modify the DOM as desired.
const parseParams = (params) => {
if (!params) {
return;
}
const paramsObj = {};
params.forEach((param) => {
const name = param[0];
const value = param[1];
Object.assign(
paramsObj,
{
[name]: value,
}
);
});
return paramsObj;
};
window.styla.hooks.push(
[
'moduleRender',
(context, node) => {
const parameters = parseParams(context.params);
// parameters:
// {
// isSlide: boolean,
// ->this returns whether the module is being
// rendered within a slider,
// all modules in normal columns will return false,
// slider modules will return true
// }
//
// 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,
// -> internal module
// }
// node
// ->This will return the HTML element of the module
// https://developer.mozilla.org/en-US/docs/Web/API/Element
// e.g.: node.getBoundingClientRect().top:100
},
'render'
]
);
List of hooks, that get triggered only for the Banner module.
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.
List of hooks, that get triggered only for the Navigation 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
// }
}
]
);
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,
// }
}
]
);
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
// }
}
]
);
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
// }
}
]
);
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
// }
}
]
);
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
// }
}
]
);
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",
// }
}
]
);
List of hooks, that get triggered only for the Video module.
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,
// }
}
]
);
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,
// }
}
]
);
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
// }
}
]
);
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: