Uncaught ReferenceError on DoubleClick Studio ClickTag coding

Question

I have an HTML5 banner ad file that was created by exporting from Flash with the Swiffy extension. I've added the clickTag as the per the last answer in this post: DoubleClick Studio ClickTag after using Swiffy.

Here is the code that was added as per the post referenced above:

Added to the head of the document:

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

Wrapped the <div id="swiffycontainer"> with a <div id="bg-exit">:

<div id="bg-exit">
<div id="swiffycontainer"></div>
<div>

Add the following CSS style to make the required transparent button:

#bg-exit {
  background-color: rgba(255,255,255,0);
  cursor: pointer;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}

Then added the following script at the bottom of the document to add the required Exit:

<script>
function bgExitHandler(e) {
  Enabler.exit('Background Exit');
}

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

When I check the ad locally through the Google Chrome console tab, I get the following error: "Uncaught ReferenceError: Enabler is not defined" on this piece of the exit script:

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

Can anyone help? Thanks in advance.

Answer 1

Are you clicking before Enabler.js has had a chance to fully initialize? You should implement a listener to wait for Enabler to init before firing anything, possibly before assigning your click listener as well just to be sure.

Referenced from: https://support.google.com/richmedia/answer/2672553?hl=en&ref_topic=2672541&vid=1-635776161769558531-1301142788

// If true, start function. If false, listen for INIT.
window.onload = function() {
  if (Enabler.isInitialized()) {
      enablerInitHandler();
  } else {
      Enabler.addEventListener(studio.events.StudioEvent.INIT,
enablerInitHandler);
  }
}

function enablerInitHandler() {

    document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);

    // Start ad, initialize animation,
    // load in your image assets, call Enabler methods,
    // and/or include other Studio modules.
    // Also, you can start the Polite Load
}

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

The above should make it impossible to even trigger an Enabler event until after it's properly initialized. You could add some traces or browser alerts in steps of this to let you know when certain parts have completed as well, to help troubleshoot.