Product Guide: Guidelines for adding custom code to airTRFX pages

What is Custom Code?

Custom Code in airTRFX is considered any code which is not inherent to the airTRFX pages. This means any code which is not hosted and managed by EveryMundo.

Custom Code in airTRFX could be:

What are the risks of adding custom code to an airTRFX page?

Decrease Page Speed / Reduce Performance

Adding custom code to an airTRFX page will likely result in a decrease in page speed. This can have devastating impacts on the Web Vitals of the page. Not only could this lead to lower page rankings (and decreased organic revenue potential), but it could also result in poor user experience and conversion rates.

Code Conflicts

When you add custom code to an airTRFX page, you don’t always know how it will interact with the other libraries and scripts inherent to the page. This can cause existing, standard modules to malfunction or appear broken on the page.

Maintenance

EveryMundo is not responsible for any of the Custom Code added to the airTRFX pages, or the effects of that Custom Code on the airTRFX product. While EveryMundo will make best efforts to communicate any product changes that may impact Custom Code in advance, it is the customer’s responsibility to make any required changes or fixes to their Custom Code.

How can I add custom code to airTRFX pages?

Custom Header Code

Custom Header Code allows users to add custom scripts and libraries to specific airTRFX pages. The custom scripts and libraries added to the Custom Header Code field will be added to the header of the applicable pages. 

Custom Pages

Custom Header Code can be added to individual custom pages via the “advanced settings” in the Custom Page Create/Edit form. The code added in this field will load in the header of the custom page, but not any other airTRFX pages.

Templates

Custom Header Code can be added to entire templates in the Custom Code section under “SEO” in the main navigation of airTRFX Control. The code added in this field will load in the header of all of the pages generated for that template in the given language. Caution should be used when adding Custom Code in this method as it will typically apply to hundreds (or even thousands) of pages. See risks associated with Custom Code for more information.

Custom Assets

Custom Assets allow users to create their own assets using a WYSIWYG editor. For advanced users, the assets can be edited via a code editor as well. 

Scripts and libraries can not be added to custom assets. If a script or library is required to support the code used within the custom asset, they must be added via Custom Header Code.

Destination Descriptions

Destination Descriptions allow users to add and edit their origin/destination content using a WYSIWYG editor. For advanced users, the Destination Descriptions can be edited via a code editor as well. Destination Descriptions can be edited in bulk via the XLS download (which exports the HTML version of the content).

Scripts and libraries can not be added to Destination Descriptions. If a script or library is required to support the code used within the Destination Descriptions, they must be added via Custom Header Code.

Important note: Customers leveraging airTRFX+AMP should avoid using scripts in the Destination Descriptions since any scripts present will render the airTRFX+AMP pages invalid.

Template Pages

Template Pages allow users to add Custom Code to the Body of a template page using the code editor within the WYSIWYG.

Scripts and libraries can not be added to the Body of the Template Pages.

Custom Code (Administration)

Custom Code can be added to all airTRFX pages with the help of an EveryMundo Administrator. This Custom Code option is typically used for the customer’s tracking container. There are three options for the placement of the Custom Code: 

Any code added to the Administrative section of airTRFX Control should include a comment including:

While it is possible to add heat map tracking, A/B testing scripts, or other tracking scripts to the airTRFX pages in this way, it is highly discouraged due to the risks documented above.

Prior to submitting a request to add/remove Custom Code via the EveryMundo Service Desk, please arrange a discussion of the intended change through your EveryMundo Customer Success representative. This will ensure that your request will be adequately fulfilled when submitted to the EveryMundo Service Desk.

What kind of custom code can I add to airTRFX? 

The airTRFX product supports Bootstrap version 3.4.1 with the following features:

Bootstrap CSS

Bootstrap Components

The airTRFX product does not support the following features:

It is recommended to use vanilla JS when possible in order to avoid adding the JQuery library to the airTRFX pages (slowing page speed significantly). 

JQuery is not inherent on airTRFX pages. If you plan to use JQuery on airTRFX pages, you must also add the JQuery library in the Custom Header Code as well. Consider using a lightweight alternative to JQuery: https://zeptojs.com/, or even better, leverage vanilla JS instead. There are resources that can help identify alternatives: http://youmightnotneedjquery.com/. 

Example:

<!--Optimizely Code-->

<script src="https://cdn.optimizely.com/js/6131884851.js"></script>

<!--Optimizely Code End-->

if you want the script to be loaded asynchronously, it should be changed to something like:

<!--Optimizely Code-->

<script async src="https://cdn.optimizely.com/js/6131884851.js></script>

<!--Optimizely Code End-->

Although, it might be better, depending on the case, to use “defer“ instead of “async“, in which case the code should be something like:

<!--Optimizely Code-->

<script defer src="https://cdn.optimizely.com/js/6131884851.js"></script>

<!--Optimizely Code End-->

How can I add TRFX modules (i.e. DPA) to custom assets?

For custom assets placed within campaigns, a bootstrap class (__bss) is added to each container with the purpose of being able to use bootstrap in its children, for this reason you should avoid putting a widget inside a container because it can be affected by the bootstrap classes.

To add a DPA or TRFX Module within a custom asset, please add it outside of the container:

<section>

//custom code

</section>

{{DPA.General_DPA_-_EN}}

Do not do: 

<section>

{{DPA.General_DPA_-_EN}}

</section>

How can I troubleshoot my custom scripts?

To determine if unexpected behavior is due to custom code or behavior on airTRFX pages, use the following URL parameter to eliminate custom code on the page: ?nocustomscript=all.

If the issue still persists, then the error is due to a custom script on the page. This does not apply to code within custom assets.

Who can add custom code to airTRFX?

Customers

Customers can add and edit Custom Code to airTRFX via airTRFX Control. 

EM Administrators

EM Administrators can add/remove Custom Code from the Administrative section of airTRFX Control, but only at a customer's request. Any code added to the Administrative section of airTRFX Control should include a comment including:

EM Administrators can never add/edit/or remove Custom Code from anywhere else in airTRFX Control. This means that Product Support cannot help in troubleshooting or revising a customer’s Custom Code.

FAQ

How do I add jol / jwl functions to the code?

Please contact an EM Administrator to add the following scripts in the legacy CMS: 

In custom script 1:

<script type="text/javascript">

window._jwl_handlers = [];

window._jwl = function(fn){

window._jwl_handlers.push(fn);

};

window._jol_handlers = [];

window._jol = function(fn){

window._jol_handlers.push(fn);

};

</script>

In custom script 3: 

<script type="text/javascript">

// window.onload handler

(function(){

$.each(window._jwl_handlers, function(i, fn){

fn();

});

})();

// DOMContentLoaded handler

$(function(){

$.each(window._jol_handlers, function(i, fn){

fn();

});

});

</script>

Do custom assets come with built-in accessibility?

No - since custom assets are variable and can differ depending on what the user inputs using the WYSIWYG or using HTML, EveryMundo cannot cover every case for accessibility. It is recommended that the user implements accessibility as they implement their HTML/CSS.