I need to create doubleclick banner, and i am using Google Web Designer. I want to call clickTag by simple href="javascript:window.open(window.clickTag)", and everything works fine, but when i validate it on
https://h5validator.appspot.com/dcm/asset i get error:
Missing click tag check
How can I remove this error, what am I missing?
Thanks
I think this will help you out to find solution to your problem, please follow the below steps :
Step 1: extract the files from zip. and Open .html file using any code editor, most useful for trafficker is notepad++.
Step 2: There will be two important section in html file <head></head> and <body></body>
<head> section will have <script type=”text/javascript”> which handle most the functionality will be present.
Now Paste below code Before </head> section and Inside <script type=”text/javascript”>Some Code From Creative </script>
var clickTag = "http://www.google.com";
Make sure that other tags/function are close and you are not pasting the above code inside other tag/function.
Code:
<head>
<script type=”text/javascript”>
var clickTag = “http://www.google.com”;
Somecode of(function()
{
somefunctionality code ...
}
</script>
</head>
Step 3: Paste the below code after <body> start, Arrangement of the code can impact what portion of the creative will be clickable, so make sure that you cover every assets of creative code withing the code below
<body>
<a href="javascript:window.open(window.clickTag)">
.......Creative assets code...
.......Some functionality code.....
</a>
</body>
click tag google web designer
Step 4: Make sure that clickTag defined in body and clickTag defined in head section should be same. Now save the file.
Step 5: Go to the folder where all the assets presents, Select all then create the zip, make sure you create zip and not rar because zip is only supported format in DFP. For other servers it might be different.
Because if don’t zip all files correctly you might get “No Primary HTML file detected” this error
No Primary HTML file detected
Creative is built from Adobe Animate CC
Step resolve the creative issue
Step 1: Extract the zip file and open the html file present in the folder
Step 2: Open the .html in file sublime/Notepad++ editor, Paste below Code in <head> section just before You can replace the http://www.google.com with the clicktracker or landing page URL provided by client.
Code:
var clickTag = "http://www.google.com";
Adobe_animate_CC_clickTag_Issue_head_section
Step 3: Now once above code is implemented its time to implement the clickTag in body section, Since the clickTag is case sensitive make sure that clickTag implemented in Head section should match with clickTag in body section, Now implement below code just After tag.
Adobe_animate_CC_clickTag_Issue_body_section
Step 4: Make sure that the placement of tag is important, you must cover the whole canvas portion so that whole creative will be clickable.
I had the same problem and I tried to follow the instructions under https://support.google.com/dcm/answer/3145300?visit_id=636892883779240296-1524067146&rd=1#dev > Click tags > Sample click tag insertion.
However, I could not make it work, whatever I tried. The result was always: it worked fine, but the validator threw an error.
So I went back to the second option described under "Use Google Web Designer for exit events". Following all the steps there exactly.
The result was a creative that checked in the validator but was not clickable.
So after including the gwd tap area, I also manually added an additional anchor just inside the body, so it looked something like this:
<body>
<a href="javascript:window.open(window.clickTag)">
<gwd-google-ad id="gwd-ad" polite-load="">
(...)
<gwd-pagedeck class="gwd-page-container" id="pagedeck">
<gwd-page id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox" data-gwd-width="300px" data-gwd-height="600px">
(...)
<gwd-taparea id="gwd-taparea_1" class="gwd-taparea-vsnj"></gwd-taparea>
</div>
</gwd-page>
</gwd-pagedeck>
<gwd-exit metric="CTA-xyz" url="http://abc.de"></gwd-exit>
</gwd-google-ad>
<script type="text/javascript" id="gwd-init-code">
(...)
</script>
</a>
</body>
Now I had a creative that validated but was also clickable.
HTML5 creatives created using Google Web Designer (GWD) should have the clickTag added as a call to action (https://support.google.com/webdesigner/answer/3263494?hl=en) added within Google Web Designer BEFORE exporting to a .zip file.
Since you only have the exported .zip file, you will need to either go back to GWD and add in the call to action OR follow the hardcode workaround I made:
I will refer to your jsfiddle (http://jsfiddle.net/ae363saf):
Paste in the with the rest of style tags (line 8).
<style data-exports-type="gwd-taparea" data-gwd-node="true">gwd-taparea{display:block;cursor:pointer;background-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}</style>
Depending on your creative size, you'll need to modify the values in this code. The creative example is 300x250, so in the following code, set:
height:300px,
width:250px,
transform-origin:125px 150px 0px,
-webkit-transform-origin:125px 150px 0px, and
-moz-transform-origin:125px 150px 0px (half width, half height, 0).
Paste the edited code immediately before </style> at the end of line 13.
.gwd-taparea-11s4{position:absolute;top:0px;height:300px;left:0px;width:250px;transform-origin:125px 150px 0px;-webkit-transform-origin:125px 150px 0px;-moz-transform-origin:125px 150px 0px}
Paste immediately before </head> (line 86).
<script data-source="gwdtaparea_min.js" data-version="4" data-exports-type="gwd-taparea">(function(){'use strict';var c;var d=function(a,b,e){if(e){var f=document.createEvent("CustomEvent");f.initCustomEvent(a,!0,!0,e)}else f=document.createEvent("Event"),f.initEvent(a,!0,!0);b.dispatchEvent(f);return f};var g=[],h=function(a){a=g.indexOf(a);0<=a&&g.splice(a,1)};document.addEventListener("click",function(a){for(var b=0;b<g.length;b++)if(25>Math.abs(a.clientX-g[b].m)&&25>Math.abs(a.clientY-g[b].o)||25>Math.abs(a.screenX-g[b].A)&&25>Math.abs(a.screenY-g[b].B))g.splice(b,1),a.stopPropagation(),a.preventDefault()},!0);var k=function(){};goog.inherits(k,HTMLElement);c=k.prototype;c.createdCallback=function(){this.l=this.j=0;this.f=this.b=this.g=this.c=null;this.a=!0;this.h=this.s.bind(this)};
c.attachedCallback=function(){this.b||(this.c=this.i.bind(this),this.g=this.w.bind(this),this.b=this.v.bind(this),this.f=this.u.bind(this));this.addEventListener("click",this.c,!1);this.addEventListener("touchstart",this.g,!1);this.addEventListener("action",this.h,!1)};c.detachedCallback=function(){this.removeEventListener("click",this.c,!1);this.removeEventListener("touchstart",this.g,!1);this.removeEventListener("action",this.h,!1)};c.i=function(){this.a&&d("action",this);this.a=!0};
c.w=function(a){this.addEventListener("touchmove",this.b,!1);this.addEventListener("touchend",this.f,!1);a=a.touches[0];this.j=a.clientX;this.l=a.clientY};c.u=function(a){this.i();this.removeEventListener("touchmove",this.b,!1);this.removeEventListener("touchend",this.f,!1);a=a.changedTouches[0];a={m:a.clientX,o:a.clientY,A:a.screenX,B:a.screenY};g.push(a);setTimeout(h.bind(null,a),2500)};c.v=function(a){a=a.touches[0];this.a=this.a&&10>=Math.abs(this.j-a.clientX)&&10>=Math.abs(this.l-a.clientY)};
c.s=function(){var a=this.getAttribute("exit-id"),b=this.getAttribute("product-index"),e=this.getAttribute("exit-override-url");e&&!d("tapareaexit",this,{"exit-id":a,url:e,"product-index":b}).detail.handled&&window.open(e)};c.attributeChangedCallback=function(){};document.registerElement("gwd-taparea",{prototype:k.prototype});}).call(this);
</script>
<script type="text/javascript" gwd-events="support">var gwd=gwd||{};gwd.actions=gwd.actions||{};gwd.actions.events=gwd.actions.events||{};gwd.actions.events.getElementById=function(id){var element=document.getElementById(id);if(!element){var pageDeck=document.querySelector("[is=gwd-pagedeck]");if(pageDeck){if(typeof pageDeck.getElementById==="function"){element=pageDeck.getElementById(id)}}}if(!element){switch(id){case"document.body":element=document.body;break;case"document":element=document;break;case"window":element=window;break;default:break}}return element};gwd.actions.events.addHandler=function(eventTarget,eventName,eventHandler,useCapture){var targetElement=gwd.actions.events.getElementById(eventTarget);if(targetElement){targetElement.addEventListener(eventName,eventHandler,useCapture)}};gwd.actions.events.removeHandler=function(eventTarget,eventName,eventHandler,useCapture){var targetElement=gwd.actions.events.getElementById(eventTarget);if(targetElement){targetElement.removeEventListener(eventName,eventHandler,useCapture)}};gwd.actions.events.setInlineStyle=function(id,styles){var element=gwd.actions.events.getElementById(id);if(!element||!styles){return}var transitionProperty=element.style.transition!==undefined?"transition":"-webkit-transition";var prevTransition=element.style[transitionProperty];var splitStyles=styles.split(/\s*;\s*/);var nameValue;splitStyles.forEach(function(splitStyle){if(splitStyle){var regex=new RegExp("[:](?![/]{2})");nameValue=splitStyle.split(regex);nameValue[1]=nameValue[1]?nameValue[1].trim():null;if(!(nameValue[0]&&nameValue[1])){return}element.style.setProperty(nameValue[0],nameValue[1])}});function restoreTransition(event){var el=event.target;el.style.transition=prevTransition;el.removeEventListener(event.type,restoreTransition,false)}element.addEventListener("transitionend",restoreTransition,false);element.addEventListener("webkitTransitionEnd",restoreTransition,false)};gwd.actions.gwdDoubleclick=gwd.actions.gwdDoubleclick||{};gwd.actions.gwdDoubleclick.exit=function(receiver,exitId,url,opt_collapseOnExit,opt_pauseMedia){gwd.actions.events.getElementById(receiver).exit(exitId,url,opt_collapseOnExit,opt_pauseMedia)}</script>
<script type="text/javascript" gwd-events="handlers">gwd.auto_Gwd_taparea_1Action=function(event){gwd.actions.gwdDoubleclick.exit("gwd-ad","clickTag","http://www.visitloscabos.travel/",true,true)}</script>
<script type="text/javascript" gwd-events="registration">gwd.actions.events.registerEventHandlers=function(event){gwd.actions.events.addHandler("gwd-taparea_1","action",gwd.auto_Gwd_taparea_1Action,false)};gwd.actions.events.deregisterEventHandlers=function(event){gwd.actions.events.removeHandler("gwd-taparea_1","action",gwd.auto_Gwd_taparea_1Action,false)};document.addEventListener("DOMContentLoaded",gwd.actions.events.registerEventHandlers);document.addEventListener("unload",gwd.actions.events.deregisterEventHandlers)</script>
Within the <gwd-metric-configuration> tag (line 90).
<gwd-metric-event source="gwd-taparea_1" event="tapareaexit" metric="" exit="Exit"></gwd-metric-event>
Before </div> of <div class="gwd-page-content gwd-page-size"> (line 95).
<gwd-taparea id="gwd-taparea_1" class="gwd-taparea-11s4"></gwd-taparea>
Replace the URL below with whatever URL you want to click through to (your clickTag) or a default one, because some ad servers will have an option to modify this URL in their interface. Paste immediately before </gwd-doubleclick> (line 98).
<gwd-exit metric="clickTag" url="https://www.google.com/"></gwd-exit>
Replace the URL with the URL you want to click through to. Paste within StudioExports function between the brackets (end of line 138).
Enabler.exit("clickTag", "https://www.google.com/");
Replace the URL with the URL you want to click through to. Paste within <script type="text/gwd-admetadata"> "exits":[] array between the brackets (line 138).
{"exitId":"clickTag","url":"https://www.google.com/"}
Paste to the end of the <script type="text/gwd-admetadata"> tag in the "components":["gwd-doubleclick","gwd-page","gwd-pagedeck"] array after the last component, "gwd-pagedeck" (line 138).
,"gwd-taparea"
Save the file, .zip the folder again, and the creative should now pass in Google's HTML5 Validator.
I know I might be late, but I sat with the same problem and I found an easier way to fix the "Missing click tag check" error on https://h5validator.appspot.com/dcm/asset and there is no need to add custom code.
The steps are as follows:
Create a Tap Area
Add an event to the Tap Area and setup the event as follows:
Tap Area - Touch/Click
Action - Google ad - Exit ad
Receiver - gwd-ad
Configuration - fill out the details (see: https://support.google.com/webdesigner/answer/3263494?hl=en&ref_topic=3261495 for configuration details )
Once you are done, save your build and publish it to ZIP. You can upload the ZIP at https://h5validator.appspot.com/dcm/asset and you should get the all clear.
I've got Olapic's API in front of me, and it looks something like this:
<script src="https://olapic_source.net"
data-olapic="olapic_specific_widget"
data-instance="213598612346580671235"
data-apikey="081274081760283650812734612"
data-tags="product_ID"
async="async">
</script>
I'm all for keeping JS out of HTML files wherever possible. I'm just wondering if there is any reason to put this in its own file, versus putting it right on the page.
The only requirement is that the script is located inside of a div class called "olapic_specific_widget"
So essentially
<div class="olapic_specific_widget">
<script src="path/to/external/file.js" type="text/javascript">
</script>
</div>
Which is tidier than
<div class="olapic_specific_widget">
<script src="https://olapic_source.net"
data-olapic="olapic_specific_widget"
data-instance="213598612346580671235"
data-apikey="081274081760283650812734612"
data-tags="product_ID"
async="async">
</script>
</div>
And so again, is there a point to this, or should I just leave all that stuff in there? If there is a point to it, I know you're supposed to take the script tag out of the external file. So, does my external file then look like this?
src="https://olapic_source.net"
data-olapic="olapic_specific_widget"
data-instance="213598612346580671235"
data-apikey="081274081760283650812734612"
data-tags="product_ID"
async="async"
Thanks for your time!
The script loaded from the src URL probably examines the page and looks for a <script> tag inside of a <div class="olapic_specific_widget">.
You cannot move any of the data- attributes out of the <script> tag, because the script loaded from src expects the <script> DOM element to contain those data- attributes. These settings are HTML attributes, not JavaScript.
In short, this <script> tag acts in two different roles at one:
a mechanism to import a remote script (because it has a src attribute)
a collection of widget settings, specified by data- attributes.
The remote script (that is imported by the <script> in role #1) reads the data that is set in the <script>'s attributes (in role #2).
You may consider this way to use the <script> element as a kind of remote function call. The several data attributes are the parameters of the call, and the script itself, as specified with the src URL, can perform a variety of actions depending on these parameters. This adds more flexibility in the design of JavaScript libraries for use in web pages.
I want to embed my gists (gist.github) in my blogger blog. But as explained in this question dynamic views directly don't support javascript.
From the moski's(as mentioned in the answer) blog its possible to embed a gist.
What if I want to only embed only one file of my gist?
For example:
<script src="https://gist.github.com/3975635.js?file=regcomp.c"></script>
Looking at moski's blog, his description and gist snippets (gistLoader.js and gistBlogger.js), I can suppose that to reach your goal you have to edit that code a little bit.
Currently, when you add
<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>
at the bottom of your posts, what this script does is looking for this other code you added into your blog
<div class="gistLoad" data-id="GistID" id="gist-GistID">Loading ....</div>
retrieves the data-id attribute, and injects the required code to load the script with src set to
'https://gist.github.com/' + id + '.js'
Now, if I correctly figured out what the code does, editing the second moski's HTML code in this way:
<div class="gistLoad" data-id="GistID" data-file="GistFile" id="gist-GistID">Loading ....</div>
and the function in moski's gistBlogger.js in order to retrieve (when defined) the new data-file attribute, you can generate a new src to inject, like that:
'https://gist.github.com/' + id + '.js?file=' + file
It should works.
Currently I'm working on a Project with Handlebars (JS Template Engine) and I'm using eclipse for development.
The problem is, that eclipse doesn't offer syntax highlighting for my Handlebars-Templates. My Templates are enclosed in tags. Syntax highlighting in works as expected.
Screenshot:
Is it possible, that Eclipse also highlights this code (at the best with HTML Syntax Coloring)?
If you are using PHP, you can fool Eclipse by adding empty php tag:
<scrip<?php ?>t type="tmpl_handlebars" id="tmpl_places">
<article>
<h1>
...
</h1>
</article>
</script>
You would have to find a plug-in which supports that template engine. The HTML Editor provided by Eclipse uses the value of the type/language attributes to find the classes that provide syntax coloring, content assist, etc. The possibility is there, but out of the box, it only provides for JavaScript.
If you are ready do write a little bit of javascript, you can do this. I don't know the framwork(s) that you are using, so I will suppose that you have jQuery, but you can use the idea without using jQuery if you don't want to.
First, write all your tags that serve as template in divs with the "tmpl_handlebars" css class instead of scripts:
<div class="tmpl_handlebars" id="tmpl_places">
<article>
<h1>Hello, World!</h1>
<p>This is a template...</p>
</article>
</div>
Then, when your page has loaded, dynamically replace the div tags with the script tags, and transfer the id and the content of the div tags to the script.
With jQuery you just have to add this small script in your html head.
$(function() {
$(".tmpl_handlebars").each(function() {
var $this = $(this);
var children = $this.children().detach();
var id = $this.attr("id");
$this.replaceWith(
$('<script type="tmpl_handlebars"/>')
.attr("id", id)
.append(children);
);
});
});
This may work out of the box, but as I'm not a specialist of mustache and handlebars, I don't know exactly when they process the DOM to find the templates, so if you want to be perfectly safe, you should do this third step: Remove the script tags that include these libraries from the static html of your head, and instead, add them dynamically with javascript after the processing of the divs, so your dom is ready when the scripts arrive.
Before the last }); in the code the divs processing, add the following lines to add your scripts:
$("head").append('<script type="text/javascript"'
+ 'src="**LOCATION_OF_DYNAMICALLY_LOADED_FILE**"></script>'");
//etc...
Similar to #Neparkiraj's answer.
If you are using Django, you can add an empty tag to (I believe) "trick" Eclipse into just thinking the line is just "bad" html. Subsequent lines will then be highlighted with html syntax:
<scrip{{NONEXISTANTVAR}}t type="tmpl_handlebars" id="tmpl_places">
<article>
...
</article>
</script>
As the tag is empty, <script type="tmpl_handlebars" id="tmpl_places"> will be perfectly rendered in the final document. Note that, using Django also likely means this code sits in a {% verbatim %} block, so you can combine this code to get:
<scrip{% verbatim %}t type="tmpl_handlebars" id="tmpl_places">
<article>
...
</article>
</script>
{% endverbatim %}
All of this is kind of ugly, but leads to both correct HTML highlighting in eclipse and correct rendering in the document.
I have been searching about this subject now for quite a few days. And could not find a working or conclusive answer.
What I want to do, is to simply display the (styled) summary of the latest blog entry (from the blog page on my own site) in a div container on the front page of my site (which is not my blog). All active links of that mirrored blog entry ideally lead to the appropriate section of my blog page. That is however not a must, as long as the entire entry can link to the blog page.
Each blog entry summary on the blog summary page has a unique ID, sorted by numbers (e.g. unique-ID-51 (latest) unique-ID-50 (the one before) etc.)
I was thinking of doing so with the document.getElementById JS command.
I would have to point the JS function to a relative location (../blog_folder/blog_summary.html) with maybe the .window.location.assign
command, than grab the (styled) contents of the latest element and display that on my front page.
But I have no idea how that code would look in reality. Can you point me in the right direction?
Thank you !!!!!!!
M.
You could add jQuery to your page and use a simple construction:
$('.result-container').load('path/to/your/file.html #id_of_element_to_fetch');
An example chunk of code:
...
<body>
<div class="result-container">There will be your content from some file.</div>
<p>
<a class="result-loader" href="#"></a>
<script type="text/javascript">
$(".result-loader").click(function() {
//Replace path/to/your/file.html and #id_of_element_to_fetch with appropriate values
$('.result-container').load('path/to/your/file.html #id_of_element_to_fetch');
return false;
});
</script>
</p>
</body>
...
And that string somewhere inside the <head> tag:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
An example chunk of code with an autostart feature:
...
<body>
<div class="result-container">There will be your content from some file.</div>
<p>
<a class="result-loader" href="#"></a>
<script type="text/javascript">
$(document).ready(function() { //Launches the code below right after the initialization event
//Replace path/to/your/file.html and #id_of_element_to_fetch with appropriate values
$('.result-container').load('path/to/your/file.html #id_of_element_to_fetch');
return false;
});
</script>
</p>
</body>
...
I assume you are using a hidden iframe?
This for example will thet the height of the style.. there are other things in the style
this.container.getElementsByTagName("YOUuniqueID")[0].style.(STYLE)
But you have to put an unique ID in the iframe
Try and use the built in debuggers in IE or Chrome to find what you want...
You can take a look at this for maybe some more info(its for cross domain) but there could be something taht helps you. You might even consider using jquery to access that data.
Yet Another cross-domain iframe resize Q&A