How to configure larger scale changes

  • Updated
For advanced use cases that extend beyond changing text/images, or removing items on the page, use CSS to apply a class to containers.

 

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>
 
 
How to implement in Mutiny

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



 

Expand the HTML Attributes menu and add the class name in the Class field.

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.