Adding Multiple Exits to Rich Media Ads for use in DoubleClick Studio

Using JavaScript with Hype
1

Hello,

I’m working on creating an HTML5 rich media ad to upload through Google’s DoubleClick Studio. I’ve seen and read several times through the post here regarding adding a single exit to a Hype animation, but have hit several snags in attempting to implement this in a somewhat different scenario.

Say I want to create a rich media unit with two product images side by side. I want the background behind each image to change when the user hovers over, which Hype makes easy. However, when the user clicks on Product 1 I want them to be taken via an Exit to the product page for Product 1, and when they click on Product 2 I want them to be taken to the product page for Product 2. I want this all to be trackable through DoubleClick, and need DoubleClick to be able to recognize these exits in the file for the ad to be approved.

When trying to implement the code provided in the forum post linked above, I run into the following issues:

  • The code uses a pause in the timeline to wait for the enabler script to load. Because I am not utilizing animation in this ad, I’m not using the timeline at all.
  • The code allows the destination URL to be determined in DoubleClick studio, which creates issues when multiple exits are required. I’ve seen the alternative code that allows the destination URL to be hardcoded, but can’t get DCS to recognize one or several of this type of exit either.
  • DCS doesn’t see any exits created in this manner, thus not allowing the ad to be uploaded.

I guess in short, my issue has two parts. 1) DoubleClick isn’t seeing an exit I add in the way that post suggests 2) Even if I figured out how to get one exit working, adding multiple doesn’t seem to work in the same way.

Any insight you might have into this issue would be greatly appreciated. Working on a client deadline here so this is something I need to get squared away soon.

Thanks in advance for your help,
Jonathan

2

The enabler will load regardless, since it is embedded in the HTML on that page. The pause was just to ensure that any tracking required in the add could happen.

On this page: Add an exit - Studio Help, you can define the exit by using the 'Exit Name'. So if your exit name was 'Exit 1' your script would be:

function bgExitHandler(e) {
    Enabler.exit('Exit 1');
}

document.getElementById('exit1').addEventListener('click', bgExitHandler, false);

This would make the element with the element id of 'exit1' trigger the 'Exit 1' (named in Double Click). You can have multiple exits by adding multiple element IDs linked to multiple exit handlers this way.

I had luck with this before, so perhaps something has changed. One way around this is to include a <div id="exit1"></div> snippet of code in the exported .html file outside of Hype. The Double Click parser will see the div, but the div people will actually click on will be within your document.

Let me know if this works and I'll update the original guide.

3

Hey Daniel,

So after some trial and error, we figured out how to get DCS to recognize multiple exits from our ad. Here’s what we did:

We followed parts of the initial guide, including adding this code to our head HTML:

<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>

Then we added this script to our head HTML:

<script>
    function bgExitHandler1(e) {
      Enabler.exitOverride('Item 1 Exit', 'DESTINATION-URL');
    }
</script>

As our ad had 5 exits, we duplicated the code inside the script tags 5 times and changed ‘bgExitHandlerX’, ‘Item X Exit’, and the destination URL accordingly.

Then, in the items we wanted to function as our different items, we added the following code to the inner HTML of each item:

<script>
document.getElementById('bg-exit1').addEventListener('click', bgExitHandler1, false);
</script>

And again changed the '1’s in the code above to the corresponding exit.

This worked for us and showed up in DCS. Feel free to take this and add it to the original guide if you think it would be useful.

We’ve got a team here using Hype to create display creative on a regular basis - really appreciate how powerful and easy-to-use Hype is. We will only be using it more moving forward, so expect to hear from us again! Thanks.

3 Likes
4

Thanks very much for sharing this, Jonathan. I’ve made this post a Wiki so we can update it if the instructions change.

5

Hi, great advance with this topic!

What do you meen by this explication?

Then, in the items we wanted to function as our different items, we added the following code to the inner HTML of each item:

Is it a JavaScript Function you apply on the CTA?

Thanks !

6

You can add that code to the inner HTML of an item by double clicking on it, and then hitting the little edit button that appears. That should bring up a text box where you can paste that code and update the numbers accordingly based on which exit it is.

Hope that helps!

7

You could also potentially run this entire function in the <head> of your document if you’d prefer to keep these scripts out in the open:

<script>
    function bgExitHandler1(e) {
      Enabler.exitOverride('Item 1 Exit', 'DESTINATION-URL');
    }
document.getElementById('bg-exit1').addEventListener('click', bgExitHandler1, false);
document.getElementById('bg-exit2').addEventListener('click', bgExitHandler1, false);
<script>

The above code would listen for clicks on both bg-exit1 and bg-exit2 and run the JS function bgExitHandler1. You could also make a new exit script, and have clicking on the second exit run bgExitHandler2 of course.

To set an element ID on an item, select the item, and enter a ‘Unique Element ID’ in the Identity Inspector.

8

Thanks, it have been accepted by DoubleClick, but when I’m previewing, the CTA seem to be their (little hand) but the URL doesn’t work. Is their something I miss?

Thanks for your replies !

9

Did you replace the above item with the click macro or a URL?

10

Yes, I did, by a URL.