What is Apester's Header Tag?
What will you be getting from using the header tag?
- Define new html tag <interaction>
- More stable and scaleable and faster experience.
- Dynamic embed features and embedresize.
- The ability to run a playlist of units. Apester will automatically place units in your articles based on your user preference and on the relevance of a unit to an article.
- Monetization ventures available only with SDK.
How to use the header tag?
- You have to simply follow the instructions here
How Does it Work?
Add several listeners to "document loaded" event, to postMessage events, and to specific Apester event (so external code could re-trigger the header tag).
Document loaded event triggers replacement of every <interaction> tag with the relevant <iframe> tag. This replacement triggers async iframe calls, which is as if you put the <iframe> tag itself.
Once the iframe is loaded, it send postMessage, which is caught by the header tag listener. This triggers two actions: resizing of the iframe height based on the interaction size, and gathering of metadata information from the page and using postMessage to send it back to the iframe.
For your safety:
We are not doing DOM manipulation in the HEAD of the HTML, the only manipulation that is done is to the <interaction> tag.
All our code is triggered by event, that means it is asynchrony non blocking code.
Most of all, we are aware that our header tag being part of our customers code we can not let any error block the loading of the page. For that reason we’ve decided to wrap the entire code with “try catch” block, that means any error that would happen in our code would be caught and won’t cause any damage to the customer website (except for the possible non display of the interaction).