Highlighted

HTML5 canvas ads for Google-Stage color problem

New Here ,
Apr 03, 2019

Copy link to clipboard

Copied

When creating HTML5 ads for Google, if I set a stage color, I'm getting the ad, and below it a box in the stage color when I preview the ad or stage it for client review. I'm using a custom HTML template to use Google's js library and add a click tag (template linked below). The clickTag line I'm adding (line 02 below) seems to be the causing this problem:

<body onload="init();" style="margin:0px;">

     <a href="javascript:window.open(window.clickTag)"><canvas id="canvas" width="160px" height="600px"></canvas></a>

     <div id="animation_container" style="background-color:rgba(255, 51, 255, 1.00); width:160px; height:600px">

          <canvas id="canvas" width="160" height="600" style="position: absolute; display: block; background-color:rgba(255, 51, 255, 1.00);"></canvas>

          <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:160px; height:600px; position: absolute; left: 0px; top: 0px; display: block;">

          </div>

     </div>

</body>

This doesn't happen with the default template.

My work-around is to just put a colored block on the bottom layer and leave the stage color the default, but this issue makes me think I'm doing something else wrong that could cause other problems.

Example with custom template:

320x50-jeep

Example with default template:

320x50-jeep

Source files, including custom HTML template for Google ads:

Animate CC HTML5 Ad Problem - Google Drive

Views

72

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

HTML5 canvas ads for Google-Stage color problem

New Here ,
Apr 03, 2019

Copy link to clipboard

Copied

When creating HTML5 ads for Google, if I set a stage color, I'm getting the ad, and below it a box in the stage color when I preview the ad or stage it for client review. I'm using a custom HTML template to use Google's js library and add a click tag (template linked below). The clickTag line I'm adding (line 02 below) seems to be the causing this problem:

<body onload="init();" style="margin:0px;">

     <a href="javascript:window.open(window.clickTag)"><canvas id="canvas" width="160px" height="600px"></canvas></a>

     <div id="animation_container" style="background-color:rgba(255, 51, 255, 1.00); width:160px; height:600px">

          <canvas id="canvas" width="160" height="600" style="position: absolute; display: block; background-color:rgba(255, 51, 255, 1.00);"></canvas>

          <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:160px; height:600px; position: absolute; left: 0px; top: 0px; display: block;">

          </div>

     </div>

</body>

This doesn't happen with the default template.

My work-around is to just put a colored block on the bottom layer and leave the stage color the default, but this issue makes me think I'm doing something else wrong that could cause other problems.

Example with custom template:

320x50-jeep

Example with default template:

320x50-jeep

Source files, including custom HTML template for Google ads:

Animate CC HTML5 Ad Problem - Google Drive

Views

73

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 03, 2019 0

Have something to add?

Join the conversation