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.
Sorry for the incredibly lame question, but as a brand new programmer all the answers I've found while searching all day are for other problems not specific to me so I decided I'd post about it.
I have taken it upon myself to convert a sample "Random Quote Generator" program I found into a small web based app that can produce random links at the touch of a button, but as I soon found out just replacing the example quotes with the links of my choice only produced normal un-clickable text.
I have tried many things relating to messing with the div's and the id tags but nothing works for me.
My code for the html is as follows:
<html>
<head>
<title>Simpsons Episode Generator</title>
</head>
<body>
<h1>Simpsons Episode Generator</h1><br>
<img src="https://vignette2.wikia.nocookie.net/simpsons/images/9/97/Mr_Burns_-_the_box.jpg/revision/latest?cb=20121215235014" alt="Mr Burns box">
<div id="linkDisplay">
<!-- Link will pop up here -->
</div>
<!-- Button to call the javascript and prduce a link -->
<button onclick="newLink()">New Episode</button>
<!-- javascript declared -->
<script src="javascript.js"></script>
</body>
</html>
So as you can see, it just calls the javascript to run the randomiser then prints the result.
The javascript is as follows:
//Links To Episodes
var links = [
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-1/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-2/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-3/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-4/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-5/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-6/'
];
//Select 1 Link at random and push it to the HTML
function newLink() {
var randomLink = Math.floor(Math.random() * (links.length));
document.getElementById('linkDisplay').innerHTML = links[randomLink];
}
All i want is to just make the click the HTML is receiving after the button is pressed to be clickable.
Thanks for reading and sorry for asking such a simple sounding question but i really have been looking all day how to do it by myself...
If you want to navigate to that URL, you don't need to "click the link", you can just change the location of the window:
window.location.href = links[randomLink];
If you want to make a link to that location, so people can click it, make that <div> an <a>
<a id="linkDisplay" href='#' />
(the # means it will just go to the top of the page) and then update the href as needed:
document.getElementById('linkDisplay').href = links[randomLink];
You need to inject an anchor tag into the HTML to allow users to be able to click on a random link
//Links To Episodes
var links = ['http://kisscartoon.so/episodes/the-simpsons-season-1-episode-1/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-2/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-3/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-4/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-5/',
'http://kisscartoon.so/episodes/the-simpsons-season-1-episode-6/',]
//Select 1 Link at random and push it to the HTML
function newLink() {
var randomLink = links[Math.floor(Math.random() * (links.length))];
document.getElementById('linkDisplay').innerHTML = ''+randomLink+'';
}
<div id="linkDisplay">
<!-- Link will pop up here -->
</div>
<!-- Button to call the javascript and prduce a link -->
<button onclick="newLink()">New Episode</button>
I modify a code like that, for click a checkbox.
Such as,
Is there a any problem about button name or id. I could see just name and class. Is this a problem for work?
<html>
<head>
</head>
<body>
<button>Giris</button>
</body>
<script type="text/javascript">
var chkA5 = "button" class=formCheckBox type=checkbox value=ON name=chkA5
window.onload = function() {
document.getElementById("chkA5").checked = true
});
}
</script>
</html>
I copied all chechbox button properties on web site (F12 + Slect Element + click to check box) and pasted in my script. But I really confused, when I write a code in script, describing works for new things which I add or create. On this web site which I want to click a chechbox on has already buttons and text/check box. How can I create a connect with each other my scrips and web site.
In brief; I couldn't connect my scripts to web site's button and because of that I couldn't do any operation. Am I right?
How can I solve this problem? On picture which I shared, there are some code marked in a red square. This code works for desciribe some element in my scribs?
When we use document.get.ElementById().checked =true, on web site's element properties's has not a id? It has name and class.
Problem 1: getElementById should be getElementByName
Based on your screenshot, the input item you are trying to reference is:
<input name="chkA5" class="formCheckBox" type="checkbox" value="ON"></input>
and you are trying to getElementById()
document.getElementById("chkA5").checked = true
However, there is no id declared, so you will have to get the item by the name, using getElementByName():
document.getElementsByName("chkA5")[0].checked = true;
Problem 2: Your javascript has errors
This line will cause your script block fail:
var chkA5 = "button" class=formCheckBox type=checkbox value=ON name=chkA5
If you require a complete code sample, here is an example:
<html>
<head>
</head>
<body>
<input name="chkA5" class="formCheckBox" type="checkbox" value="ON"></input>
</body>
<script>
(function() {
document.getElementsByName("chkA5")[0].checked = true;
})();
</script>
</html>
Note: Make sure that the script block is at the end of your html, like in your example code provided.
I feel a bit silly asking this question, since most of the questions people ask on here are way beyond my level as a programmer, but at least I know I'm in good hands as far as asking goes. I used to know how to make simple vbscript and javascript programs, but I'm a bit rusty. I'm trying to refresh myself, and despite repeated google/other searches, can't recall how to make it so that when a button is clicked, a msgbox appears. Also, I'd like to know how to modify the .value attribute of a textbox. I'm attempting this in vbscript for now, but I'll try javascript if anyone knows a way to do it in that instead. My ultimate goal is a text based type game where you can click buttons labeled, "north,south,west,east", and make it like an rpg. The textbox would display the current room description.
Here's the code I have so far, which isn't displaying the msgbox.
<html>
<title>Explor-o-Rama!</title>
<body>
<form name = frmMain>
<textarea name = "txtDisp" rows = "10" cols = "50"></textarea><br>
<input type = "button" name = cmdTest value = "test">
</form>
<script language = "vbscript">
sub cmdTest_OnClick
msgbox "test"
end sub
<script>
</body>
</html>
You have:
msgbox "test"
The correct command is:
MsgBox("test")
OR
X=MsgBox("test")
This SHOULD DO IT.
also, <html><body><script language=vbscript>msgbox "" </script></body></html> not works.
but this code works OK:
<html><body><script>alert('Test');</script></body></html>
<html>
<body>
<script>
function test()
{
alert('Test');
}
</script>
<input type = 'button'; onclick='test()'>
</body>
</html>
Probably, it's a IE internal bug.
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