While most updates you want to make to your page can be made using Mutiny's built in editor functionality, there may be instance where you want to apply Javascript to an experience.
Page-level Javascript will be run as soon as an experience is rendered.
Flicker considerations
Before adding in page-level Javascript, its important to understand some implications around flicker. In a typical Mutiny experience that doesn't contain custom Javascript, Mutiny knows which elements are being personalized because you specifically selected them in the editor. With this knowledge, Mutiny is able to specifically hide those elements until the personalization is ready to render (you can read more on this process here).
When utilizing custom Javascript to update elements on the page, Mutiny won't know which elements are being personalized, so we're unable to go through this process of hiding the original element first. Because of this, you may encounter a flicker of the original content before your custom Javascript is run.
To avoid this flicker, we recommend the following:
- Whenever possible, update elements using Mutiny's built in functionality that includes selecting an element and editing it.
- Only utilize page-level custom javascript for backend processes that won't change the content on the page, such as custom analytics tracking.
- Take advantage of element-level custom Javascript. This process will be tied to a specific element, so Mutiny's "hider" functionality will function properly.
- If you must use page-level custom Javascript to update page content, consider using our anti-flicker snippet.
Adding page-level custom Javascript
Page-level custom Javascript can be added to any experience type except redirect experiences.
- Navigate to the editor for the experience you'd like to add Javascript to.
- Select the "</>" icon on the right hand side, and select the page URL under "Page".
- You can write your Javascript in the box on the right. When you're finished, click "Apply" or "Discard unsaved changes".
- If Mutiny detects an error in your Javascript, we'll display a warning at the bottom. Note that you'll still be able to launch an experience if an error exists, so we recommend thoroughly testing your code before launching.
Comments
0 comments
Please sign in to leave a comment.