I think this is my first ever post specifically for Adobe Target. I’m so excited!
Target, in a nutshell, is used to replace or insert content into a page. It comes with it’s own delivery infrastructure, logic, Javascript, and the so-called “Visual Experience Designer”, which allows a marketer to load the page, click an element on it, and replace it with something delivered by Target.
That works for A/B tests, Experience Targeting (targeting. Things like “if they are using Safari, show them a hero banner of someone with an iPhone”), and Recommendations.
The VEC is not the only way to use Target, and it has limitations, but it is cool, easy to use, and quick. Today’s tip is for those of you using the VEC. And it is likely most useful if you are working with Recommendations.
Conundrum
When you use Target to put stuff into a page, you can either replace something that is part of the “original” HTML, or you can add stuff, before or after existing elements.
People often use placeholders, empty <div> tags, which Recommendations will fill.
It is best practice to make sure these placeholders are as big as the content that will end up in them. You don’t want the page to completely change when Target injects content. A lot of people therefore use some placeholder image, but some don’t.
And if you don’t, meaning you really do have an empty <div>, then how do you select that in the VEC? You can’t actually see it!
![[screenshot]](https://webanalyticsfordevelopers.files.wordpress.com/2019/09/190917-testpage-in-vec.png?w=656&h=374)
Javascript to the rescue
This is a quick tip, so let’s keep it simple.
Here’s the test page.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Empty DIVs and Recommendations</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2F%2Fassets.adobedtm.com%2F3028746f70eb%2F18cb9d37bab2%2Flaunch-6338f6395fda.min.js%22%20async%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<body>
<header>
<h1>Testpage</h1>
</header>
<div id="block-above">
Some text above the empty placeholders
</div>
<div id="target-placeholder-1"></div>
<div id="target-placeholder-2"></div>
<div id="block-below">
Some text below the empty placeholders
</div>
<footer>
The end of this page
</footer>
</body>
</html>
The two empty <div> tags have ids, both starting with “target-placeholder”.
When the VEC has loaded the page, you can’t see them, as shown in the screenshot above. Ok.
Hover over one of the elements you can see, and right-click. Then click the “Inspect” menu item.
![[screenshot]](https://webanalyticsfordevelopers.files.wordpress.com/2019/09/190917-inspect.png?w=656&h=374)
![[screenshot]](https://webanalyticsfordevelopers.files.wordpress.com/2019/09/190917-console-pink.png?w=656&h=240)
document.querySelectorAll('div[id*="target-placeholder"]').forEach(function(el) { if (!el.innerHTML) { el.innerHTML = "empty " + el.id; } } );
Paste it into the Console in your browser and hit enter
![[screenshot]](https://webanalyticsfordevelopers.files.wordpress.com/2019/09/190917-console-after-code.png?w=656&h=374)
You can now go ahead and replace those placeholders with Recommendations.
Notes
If you have placeholders without ids, you can just go and replace all empty <div> tags, like so:
document.querySelectorAll('div').forEach(function(el) { if (!el.innerHTML) { el.innerHTML = "empty " + el.id; } } );
Of course, some of them might just show “test “, and it might make sense to show classes, or have a counter, or whatever else might help you.
Feel free to fiddle with the Javascript.
And make yourself a bookmark!
Web Analytics for Developers 