Insert the CX tag
Disclaimer
This tag is available to joint Oracle Maxymiser and Oracle Infinity customers. Maxymiser-only customers will be able to migrate to it at a later stage.
A quick and easy set up
The following guideline for the tag setup works in most cases.
Add the CX tag generated for your website directly into the global HTML template. Place it before any visible content without the “async” or “defer” tag attributes.
If the above doesn’t work for you, or you need more insight, see the article below.
Introduction
Oracle Maxymiser is a marketer-friendly solution for content testing, personalizing and recommending. It is a part of Oracle’s Customer Experience (CX) product suite.
A website gets integrated with the solution by adding a static Oracle CX tag. A Maxymiser bootstrapper inside the tag requests relevant optimization content, that is dynamically generated. This composition optimizes the speed of delivery, as no unnecessary content floats around.
Complexity of inserting the tag
How you insert the tag affects final visitor perception, so it is important to understand the order in which page content is rendered.
Client-side experience testing implies replacing the default page nodes. If the tag is not set up properly, it may cause original areas to flicker when replaced (aka "Flash of Original Content").
That’s the reason why Maxymiser should run before those nodes appear to a visitor.
CX tag supports two modes (synchronous/asynchronous) for how it is added onto a page, and for the Maxymiser campaign call. Here’s how it breaks down in terms of time-to-render metric:
Synchronously (sync) added tag:
- Sync campaign request: fast
- Async campaign request: slower
Asynchronous (async) tag:
- Sync campaign request: N/A - blocked by browsers
- Async campaign request: slowest
If you go for all-synchronous, the campaign data will arrive in a render-blocking way. This option prioritizes Maxymiser response, so it gets executed right where the tag sits. A synchronous campaign request requires the tag to be sync as well. If a <script> has "async" or "defer" attributes, or is added with document.appendChild() method, it is async instead.
Maxymiser’s campaign data request is async out-of-the-box to improve compatibility. Make sure you override it in the tag’s settings if you want it to make synchronous campaign calls.
Asynchronous mode prioritizes the original page content over the Maxymiser campaign data, so the page gets rendered first. Therefore, the areas involved in testing or personalization should remain hidden with CSS to avoid flicker. This functionality works out-of-the-box if the tag runs before any visible content. It hides the page’s body until the dynamic response arrives.
In sum: the rules for inserting the tag.
Put the tag directly into the <head> section of your global HTML template. Make sure you avoid the “async” or “defer” attributes, which would delay the tag call.
If you must use a tag container, make sure the CX tag is synchronous. It implies adding it via a synchronous tag container, and by document.write() method.
If the above is not possible, and the tag can only be asynchronous, a pre-hiding technique needs to be custom-coded. It is advised to hide the page body with JavaScript until the CX tag gets evaluated.
Choosing between async and sync call for campaign content delivery
Oracle Maxymiser can read and change the original page content. Dynamic campaign data consists of alternative HTML, CSS and JavaScript. It arrives in JSON format from an external host to replace the areas that you choose to test or personalize.
Asynchronous (async) request is initiated at the end of the browser’s requests queue. This is how document.appendChild() or AJAX calls work, not giving much control over when these fire.
With the async campaign call, the tag auto-hides <body> until a campaign response arrives.
- Maxymiser module hides a generic tested area
- The module requests campaign content
- Page loads
- Maxymiser campaigns arrive
- Maxymiser un-hides the hidden area
- Tested and personalized content gets replaced as soon as the areas appears
The auto-hiding fires as soon as the CX tag initializes. If the tag is delayed (by “async”, “defer” or when added with document.appendChild()), you may need to implement an additional <body> hiding technique.
Synchronous (sync) request is render-blocking, i.e. initiated with document.write(). It works only if the CX tag is sync as well – either inline within the HTML or appended via document.write() by itself. It doesn’t need any visibility tweaks in place, as it gets the response immediately.
Sync response fires before any visible content of a page.
- The module requests campaign content
- Maxymiser campaigns arrive
- Tested and personalized content gets replaced as soon as the areas appear
Below is an averaged latency comparison of the modes in view. The numbers vary greatly depending on page structure and connection, so only the relative numbers are given. The table shows when Maxymiser campaign content arrives (i.e., the extra time the default content stays hidden for).
| CX tag | Campaign content | Relative time to arrival |
|---|---|---|
| Inline (sync) | document.write() (sync) | 1x |
| document.appendChild() (async) | 2x | |
| document.appendChild() (async) | document.write() (sync) | N/A |
| document.appendChild() (async) | 3.4x |
Every measurement has been performed 1000 times in the Google Chrome browser.
Despite the appearance that all-sync implementation is an obvious choice, there are some limitations. After Google Chrome started to intervene render-blocking connections, it’s considered a bad practice due to a detrimental effect on page performance done by 3rd-party scripts, like analytics, delaying the first paint. This means Google Chrome intervenes these connections on 2G networks and may block the request. If it happens with Maxymiser, the original page will show immediately.
As a result, the tag comes with the async request out-of-the-box.
Google Lighthouse gives an equal rank for most pages regardless if it’s on sync or async campaign content request. Offering both options allows you to decide which implementation works best for your visitors.
Verifying the integration
Some website engines may not be compatible with specific features of the CX tag, as a website is not usually built to consider other solutions running on top.
To make sure the tag is functioning, ask someone who has access to the Maxymiser UI to launch the QA tool on your website. After that, try building a test in Campaign Designer visually and viewing it on a page.
Latency impact
Client-side solutions will always have a performance impact on a page. The final effect depends on a combination of the website, visitor and Maxymiser campaign. So, a campaign developer should seek for an optimized campaign structure, maintaining a minimal footprint.
If the above is not feasible, Maxymiser server-side implementation may serve as an alternative workflow. It implies building the test content directly on your back end within the website’s own lifecycle.