Quick tip: use empty placeholder divs with Target VEC

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]
Can’t see empty divs in the VEC

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="&lt;script&gt;" title="&lt;script&gt;" />
</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]
Open Inspect
Change the view to “Console”, and make sure that you don’t see “top” underneath. Instead, there should be a pink part, ideally containing the name of the page you are working on.

[screenshot]
Go to Console
Now copy the following script

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]
Console after pasting the code
You should now see the two placeholders. Bingo!

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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.