This article is about the Content Modification extension and how to configure it. Use the Content Modification extension to change the content of an HTML element. This is used to show A/B content based on a condition.
See the full list of available extensions.
In this article:
The Content Modification extension adds new content, or changes the existing content of an HTML element. For example, if you needed to update your website by adding an advertisement banner, use the Content Modification extension to add the new banner at a specified location on your site.
This extension works by identifying a target element in the page, selecting the position of the new element, the new HTML element to insert, and the content will be modified based on any conditions set (if any).
The new content is inserted based on its relative position to the target element. There are several options:
In the Content text area, copy and paste the standard HTML code of the new content. Do not use single quotes. It is recommended to povide an ID, otherwside the new content is inserted without an ID. For example:
<div id="myNewId">My New Content</div>
Set the Condition to control when the extension executes. For example, to control the display of an advertisement banner when the visitor is on the shopping cart page and also belongs to a specific test group.
Use this approach to compare the performance of an A/B test by duplicating the extension with slightly different content and conditions for each test group. Then use Google Analytics to analyze the impact of the A/B test on each test group.
Learn more about A/B Testing using the Content Modification extension (requires a Tealium Education account).
Before you begin, familiarize yourself with how extensions work
Once the extension is added, the following configuration options are available:
The footer scope functionality is deprecated. Older extensions scoped to footer still function properly, but the footer scope is no longer available as a selection. Scoping the Content Modifcation Extension to footer required inserting another script within the footer tags or at the bottom of the body tag on your page. The following is an example of the script in a page's code:
The following is an in-depth look at node position. The example is based on a web page that contains the following target element in the source:
<div id="myDomId">Target Node</div>
Since the target element has an
id attribute, this example will use the "DOM ID" option for Element Type.
d = document.getElementById('myDomId');
n = document.createElement('div');
n.innerHTML = 'My New Content';
This table shows the effect of each node position option in relation to the target element:
|Node Postion||Result After Insertion||Code Applied|
<div>My New Content</div> <div id="myDomId">Target Node</div>
<div id="myDomId">Target Node</div> <div>My New Content</div>
|Beginning of Node||
<div id="myDomId"> <div>My New Content</div> Target Node </div>
|End of Node||
<div id="myDomId"> Target Node <div>My New Content</div> </div>
|Replace Node Content||
<div id="myDomId">My New Content</div>
Q. Can you use a jQuery selector or does it have to be an ID of an element?
id attribute to your target element. This allows you to use that DOM ID in the Content Modification extension.
Learn more about the properties behind the Content Modification Extension: