A Single Page Application (SPA) is a type of website that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from the server.
Good to know 💡
AB Tasty is running on a native Vanilla TypeScript framework. Our tag is compatible with a lot of modern JS frameworks, including React, Angular, Vue, Meteor or Ember. The tag is unique for all environments and doesn’t require any additional implementation. To improve its behavior on server-side rendering (SSR) frameworks, an additional step might be needed to delay the application of the modifications.
Addition of JavaScript code
You can add your own JavaScript code. All variations created in our Visual Editor using one of the WYSIWYG features will generate an ES2020 compatible script that will be executed on client-side.
You can also add your own JavaScript code using the Code Editor or the “Add JavaScript” option of the Visual Editor. In this case, the code won’t be transpiled into another language. For example, an ES7 script might not be working on older browsers. It’s therefore your responsibility to manage the compatibility of your own code when adding custom JavaScript.
Management of modifications
The modifications you make in your campaigns are stored into a JS object that will be read and executed on client-side.
When a modification targets an existing HTML element, the original one isn’t modified. It is cloned and this clone is modified and then displayed by AB Tasty. Each time the URL changes, the tag checks the targeting criteria to know whether the modifications still need to be applied. If they don’t, the original content is displayed. For CSS additions, we inject custom CSS in the head section of the webpage, using the “!important” tag in order to add and/or override styles.
In addition to that, our tag adds and listens to a Mutation Observer on the whole DOM. Each time a DOM modification is detected and relevant to us, the tag quickly re-applies its changes. A DOM modification is a change in an HTML element regarding its style or structure. We use the window.requestAnimationFrame() feature in the browser in order to interweave our modifications between two versions. With a high refresh rate of 60 times per second, the changes are applied before the human eye can see it, thereby avoiding any flickering effect.
Automatic reload of the framework option
The automatic reload of the framework option of the settings is enabled by default and automatically detects a URL change and reinitialize the AB Tasty framework as if the page had been reloaded. If the page’s status changes while this option is turned enabled, the changes made will be reapplied.
Server-side rendering
When the webpage is rendered on server-side and hydrated on client-side, there might be a conflict if AB Tasty’s changes are applied before the page is fully loaded. We recommend implementing a delay in our tag’s execution and only trigger it when the page is ready.
We provide a locking mechanism that consists of two parts:
- Adding the ̀window.lockABTastyTag` which will tell the tag not to apply the modifications. It needs to be set as soon as possible and before calling the AB Tasty tag.
- Triggering the `window.unlockABTasty()` method provided by the tag itself. This will resume the execution and display the campaigns. It as to be called when you consider the website to be ready.