Note: This method requires engineering support to create code on your site.
When to consider
You want to make larger scale changes to your site (like introducing new templates, or adding net new elements), and you have engineering resources to support you.
How to implement in your site code
We recommend using a CSS class on containers within the <body>, to change the behavior in the browser. You can define a separate version of your CSS styles based on the presence of a class on your container tag to switch between your default and experiment behaviors. You will need to involve your engineering team to render both versions of your page, and use CSS to switch between the two.
As an example, let's imagine that this is what the default page code looks like:
.my-container {
background-color: black;
display: block;
}
<html>
<head><title>My Awesome Site</title></head>
<body>
<div class="my-container">
<h2>This is normal</h2>
</div>
</body>
</html>
To instrument the changes on the page, create new CSS styles on the page set to display: none;
and override your default styles when the class mutiny
is appended to the container. In your HTML, include both the default page HTML content, and the modified page content referencing the new CSS styles.
Note: Personalizations can only be applied successfully to elements with less than 40MB of HTML, and less than 250 HTML nodes. We recommend structuring larger <body> pages into containers that do not exceed these maximums before creating personalization containers.
<html>
<head>
<style>
.header,
.header-2,
.logo-bar,
.logo-bar-2 {
display: none;
}
body:not(.mutiny) .header,
.logo-bar {
display: block;
}
body.mutiny .header-2,
.logo-bar-2 {
display: block;
}
.header-container {
/* Shared styles for positioning header */
}
.logo-bar-container {
/* Shared styles for positioning logo bar */
}
</style>
</head>
<body>
<div class="header-container">
<div class="header">
<h1>
This is my normal header
</h1>
</div>
<div class="header-2">
<!-- Content to be personalized by Mutiny -->
</div>
</div>
<div class="logo-bar-container">
<div class="logo-bar">
<!-- Here is my normal logo bar -->
</div>
<div class="logo-bar-2">
<!-- Render my new custom logo bar here personalized in Mutiny -->
</div>
</div>
</body>
</html>
After the page code updates are in place, use Mutiny to add the new class (in the above example, mutiny
) to the <div> container that sits just below <body>.
Step 1 - Define the audience that should see these changes
Step 2 - Create a new on-page experience
Enter the URL for the page you want to modify and open the Mutiny editor.
Step 3 - Select the correct <div> element
When your page loads in the Mutiny experience editor, use the Find tag button to select the correct tag.

Step 4 - Add the class (ie, mutiny
) in the HTML Attributes menu
Comments
0 comments
Please sign in to leave a comment.