This library allows dynamic content swapping on a page by setting defined swap groups. Swap areas are explicitly defined via data-dyno-target data attributes. This explicit declarative markup allows for clear understanding of what areas are configured to swap content dynamically.
Important
This library is in pre-release. It has not been thoroughly tested.
[!IMPORTANT]
<!-- Anti-flicker snippet (see src/antiflicker.html) -->
<script>
(function(timeout) {
var style = document.createElement('style');
style.id = 'dyno-antiflicker';
style.textContent = '[data-dyno-target]:not([data-dyno-swapped]){visibility:hidden}';
document.head.appendChild(style);
setTimeout(function() {
style.remove();
}, timeout);
})(1000);
</script>
<script>
(function(l,o,a,d,e,r){
e=o.createElement(a);e.onload=d;e.defer=1;
e.src="https://cdn.jsdelivr.net/gh/levelinteractive/[email protected]/src/DynoSwap.js";
r=o.getElementsByTagName(a)[0];r.parentNode.insertBefore(e,r);
})(window, document, 'script', function() {
new DynoSwap([
{
target: 'header:primary',
paramKeys: [
'utm_term'
],
swap: (params, currentContent) => {
if (params.utm_term.includes('hello world')) {
return `👋 ${params.utm_term}`;
}
return currentContent;
}
}
]);
});
</script>