Jump to content
GreenSock

MindGamer

DoubleClick clickTag advice

Recommended Posts

Now that DoubleClick is hosting GSAP, I'm going to do a creative for DoubleClick ground-up in GSAP.

 

Can anyone offer any advice on how to manually create clickTags which will allow everything to be configured via DoubleClick?

 

Looking for a good resource or code snippets. 

Link to comment
Share on other sites

It's a very simple fomat:

First put the landing page URL in somewhere:
<script> var clickTag = '{{landingPageUrl}}';</script>

Then wrap the ad in an anchor tag:

<a id = clickArea href = 'javascript:window.open(window.clickTag)' class = Fullscreen ></a>

Your ad can be maximum 300k.

Link to comment
Share on other sites

Thanks Oliver 

 

That much I had already. It looks like that's a hardcoded clickTag though. 

 

I was looking for non-hardcoded clickTags that could be set within DoubleClick though.

 

I found the answer with the Google/IAB getParams function which allows clickTags to be passed on-the-fly to the creative using DoubleClick. (Passed in the query string).

Link to comment
Share on other sites

Unless you need Rich Media (expandable, dynamic, floating, video), you are probably building for DCM rather than DCRM (Studio).

 

so it is

 

<script type="text/javascript">var clickTag = "https://www.google.com";</script>

 

And

 

onclick="javascript:window.open(window.clickTag)"

  • Like 2
Link to comment
Share on other sites

Thanks a ton @joe_midi.  That's a huge help.

 

So just to make sure I'm understanding this correctly:

 

First we load the enabler in the <head>

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

Then we initialize it at the end of the page and check for ad visibility:

<script>
if (!Enabler.isInitialized()) {
  Enabler.addEventListener(
    studio.events.StudioEvent.INIT,
    enablerInitialized);
} else {
   enablerInitialized();
}
function enablerInitialized() {
  // Enabler initialized.
  // In App ads are rendered offscreen so animation should wait for
  // the visible event. These are simulated with delays in the local
  // environment.
  if (!Enabler.isVisible()) {
    Enabler.addEventListener(
      studio.events.StudioEvent.VISIBLE,
      adVisible);
  } else {
     adVisible();
  }
}
function adVisible() {
  // Ad visible, start ad/animation.
}
</script>

And the animation starts in adVisible()

 

 

But... where I'm still super confused is the exit

Enabler.exit("Click on BG");

How does exit() get called? Does Enabler.exit() get called onclick from some element in the ad? Do I need to set that up?

 

The example in the docs shows "Click on BG" passed to exit(), but in the documentation exit() takes two parameters:  id and opt_url

 

What's the id parameter? Is that a clickable element on the page?

 

Does calling exit effectively set up a listener at the passed id?

 

 

(Unfortunately I have no access to Studio. I'm working on creative for someone who does)

Link to comment
Share on other sites

@Somnamblst

 

Thanks for that. I'm trying to understand the reasoning behind setting the URL as a variable.

 

You posted:


<script type="text/javascript">var clickTag = "https://www.google.com";</script>
 

Isn't that a hard coded URL? How do users of DCM change / pass the clickTag from DCM?

 

Or maybe I'm completely misunderstanding this: When you assign clickTag='http://www.whaterverurl.com'; does that get overwritten with DCM? 

 

If so.. what's the point of setting it?  If not, is there a way to set it up so that campaign managers can set the URL via DCM?

Link to comment
Share on other sites

As far as I know DCM is able to change this on the fly, probably using some RegEx check or it just re-assigns the global variable

 

All you really need to do is give the banner 

var clickTag = 'https://www.google.com';

And the DCM system does the rest.

  • Like 1
Link to comment
Share on other sites

You mean you specify your own clickthrough URL? Or you actually give  https://www.google.com as the URL and DCM updates that?

 

I still find it a little odd that if they're doing a regex change or setting a global variable that we would need to specify any clickTag at all...  

 

Wouldn't we just be able to leave out the clickTag entirely if that were the case?

Link to comment
Share on other sites

Well, I guess it's just throwback mentality to the SWF clickTag era, but I would also imagine that you'll need to be able to set a variable if you wanted just a specific part of the banner to click through or had multiple clickTags.

 

It's also good for you to actually test that your clicks work. 

 

Yes I actually include: 

<script>var clickTag = "https://www.google.com";</script>

as part of my DCM template, and then call it with:

var clickArea = document.getElementById('click-area'); // Or what ever you want to cover

clickArea.addEvenListener('click', function(){
  window.open(window.clickTag);
});

as for DoubleClick Studio with the Enabler:

var clickArea = document.getElementById('click-area'); // Or what ever you want to cover

clickArea.addEvenListener('click', function(){
  Enabler.exit('Background Exit');
});

The String 

'Background Exit'

is then a reference in the Edit Events tab on the DoubleClick Studio platform where you can change the destination URL.

 

background_exit.png

  • Like 1
Link to comment
Share on other sites

Thanks @joe_midi  That's super helpful.

 

I guess that means though that there's no one-size fits-all HTML5 clickTag script that you use -- meaning you'd have to know whether it was flighting via DCM or DC Studio?

Link to comment
Share on other sites

As far as I know DCM is able to change this on the fly, probably using some RegEx check or it just re-assigns the global variable

 

All you really need to do is give the banner 

var clickTag = 'https://www.google.com';

And the DCM system does the rest.

 

Looks like they use Angular behind the scenes. Those double curly brackets are used to interpolate values.

https://docs.angularjs.org/guide/interpolation

Link to comment
Share on other sites

Unless you need Rich Media (expandable, dynamic, floating, video), you are probably building for DCM rather than DCRM (Studio).

 

so it is

 

<script type="text/javascript">var clickTag = "https://www.google.com";</script>

 

And

 

onclick="javascript:window.open(window.clickTag)"

Yeah, this is all that's needed.  

 

It's what they recommend in their support docs, and the clickthrough URL is updated during trafficking which is standard for any ad server.  https://support.google.com/richmedia/answer/6279525?hl=en

 

 

Here's an example of a click tag inserted in an HTML document:

<html>

<head>

<meta name=”ad.size” content=”width=300,height=250”>

<script type="text/javascript">

var clickTag = "http://www.google.com"; </script>

</head>

[The rest of your creative code goes here.] </html>

Make sure your creative uses the click tag variable as the clickthrough URL:

<a href="javascript:window.open(window.clickTag)">

<img src="images/dclk.png" border=0>

</a>

Display creatives support multiple click tags. Here's an example of multiple click tags inserted in an HTML document:

<html>

<head>

<meta name=”ad.size” content=”width=300,height=250”>

<script type="text/javascript">

  var clickTag = "https://www.google.com";

  var clickTag1 = "https://www.doubleclickbygoogle.com";

  var clickTag2 = "https://www.google.com/doubleclick/studio";

</script>

</head>

[The rest of your creative code goes here.] </html>

Make sure your creative uses the appropriate click tag variable as the clickthrough URL:

<a href="javascript:window.open(window.clickTag)">

<img src="images/dclk.png" border=0>

</a>

<a href="javascript:window.open(window.clickTag1)">

<img src="images/dclk.png" border=0>

</a>

<a href="javascript:window.open(window.clickTag2)">

<img src="images/dclk.png" border=0>

</a> 

 
  • Like 1
Link to comment
Share on other sites

Thanks @joe_midi  That's super helpful.

 

I guess that means though that there's no one-size fits-all HTML5 clickTag script that you use -- meaning you'd have to know whether it was flighting via DCM or DC Studio?

You do need to know how your ads will be served to set them up properly, but if they're not rich media, there's no reason to use studio.

  • Like 1
Link to comment
Share on other sites

As far as I know DCM is able to change this on the fly, probably using some RegEx check or it just re-assigns the global variable

 

All you really need to do is give the banner 

var clickTag = 'https://www.google.com';

And the DCM system does the rest.

 

I was curious how they do it, so I viewed the source code of one of my live DCM ads when I saw it in the wild.  When the ads get trafficked, this automatically gets injected into the head of the banners:

<script type="text/javascript">
    
      (function() {
        var relegateNavigation = '';
        var handleClickTagMessage = function(e) {
          try {
            var eventData = JSON.parse(e.data);
          } catch (err) {
            return;
          }
          if (eventData.isInitClickTag) {
            if (eventData.clickTags) {
              for (var i = 0; i < eventData.clickTags.length; i++) {
                var clkTag = eventData.clickTags[i];
                window[clkTag.name] = clkTag.url;
              }
            } else if (eventData.clickTag) {
              window.clickTag = eventData.clickTag;
            }
            relegateNavigation = eventData.relegateNavigation;
          }
        };

        if (open.call) {
          window.open = function(open) {
            return function(url, name, features) {
              if (relegateNavigation === 'parent') {
                var message = {'clickTag': url, 'isPostClickTag': true};
                parent.postMessage(JSON.stringify(message), '*');
              } else {
                var args = [url, name];
                if (features) {
                  args.push(features);
                }
                open.apply(window, args);
              }
            };
          }(window.open);
        }

        if (window.addEventListener) {
          window.addEventListener(
              'message', handleClickTagMessage, false);
        } else {
          window.attachEvent('onmessage', handleClickTagMessage);
        }
      })();
    
  </script>
  • Like 2
Link to comment
Share on other sites

My initial assumption when the change to HTML5 was forced on everyone, was that the HTML5 ads would need to be Rich Media, because in the SWF days multiple files (such as xml) had to be Rich. Luckily I work for a big enough entity we were assigned a Google employee to help us through the transition, that explained the new rules as to when you had to do DCRM Studio rather than DCM. My first banners failed DCM because they were built for studio, and Studo uses exit and DCM uses clickTag.

 

I imagine there are a lot of small entities that may not have had that Rich vs Not explanation who could be enriching Google by  building standard ads with no Rich features, and trafficking them through Studio.

 

Something else that changed, is that Enhanced Banner metrics were added for free to all DCM accounts, so the rich metrics also got ported down to the less costly DCM.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×