I'm trying to include my Adsense code from a file called sda.html located in the home folder of the server.
I'm using this code to include it:
<div w3-include-html="../../sda.html" class="section_title text-center"></div>
from this source: https://www.w3schools.com/howto/howto_html_include.asp
but idk I feel there's something wrong.
btw my site is only HTML and js, so if there is any other better option I'll be glad to hear it.
I also checked this one down:
<!--#include virtual="/menu.shtml" -->
but I didn't use it, since I have no clue how my next server will operated. so I skip it.
and this one here:
<object data="../../sda.html"></object>
I prefer this one, but I have no control of the look of it, I couldn't center or anything
the smaller the code the better it is.
Does sda.html contains only adsense code or whole part of the page?
The includeHTML function from w3school is not very good. I suspect the issue you are having is that that function uses innerHTML to set content and innerHTML doesn't execute <script> tags with content: check "Security considerations" on MDN page.
To workaround this you can do the following: remove <script> tags from sda.html and then, once you imported HTML run window.adsbygoogle.push({}) for each new ad unit. Example:
Add adsbygoogle.js tag in of your page:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Insert ad into a div with id div-with-ad.
const divWithAd = document.querySelector('#div-with-ad');
divWithAd.innerHTML = `
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-0123456789101112"
data-ad-slot="9876543210"></ins>
`;
adsbygoog.push({});
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.
Let me preface by saying this is all in relation to a Wordpress page. My knowledge of JS is lacking at best and the concept of installing/loading/enqueueing a function on one area of the site and then calling that function in another area of the site is a something that makes sense to me in my head but is very new to me in practice and might need a little explaining.
I have two separate javascript files that I would like to load on a single page, but toggle visibility/display of either based on radio button input. The JS is provided by a 3rd party and is offsite. Their provided code is this:
<script src="https://toolkit.rescuegroups.org/j/3/FzemP6HU/toolkit.js"></script>
and
<script src="https://toolkit.rescuegroups.org/j/3/4ANRW3x8/toolkit.js"></script>
Each file presents a separate set of filtered results from their database. How can I incorporate both onto a page but only have one or the other showing based on a radio button form input? I would like the page to start off with nothing visible (hopefully giving time for both JS to load in the background while the user selects an option) and then show one or the other depending on what they selected.
You can see a single one of these in action at http://pricelesspetrescue.org/adoptable-dogs/. I'm trying to incorporate the use of an additional file on that same page based on input from the user and only showing one or the other rather than both.
I have tried to manage the following
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript'>
function displayForm(c) {
if (c.value == "2") {
jQuery('#claremontdogContainer').toggle('show');
jQuery('#chdogContainer').hide();
}
if (c.value == "1") {
jQuery('#chdogContainer').toggle('show');
jQuery('#claremontdogContainer').hide();
}
};
</script>
<label>Please select a location to view:</label>
<form>
<input value="1" type="radio" name="formselector" onClick="displayForm(this)"></input>Chino Hills
<input value="2" type="radio" name="formselector" onClick="displayForm(this)"></input>Claremont
</form>
<div style="display:none" id="chdogContainer">
<script src="https://toolkit.rescuegroups.org/j/3/FzemP6HU/toolkit.js"></script>
<script type="text/javascript">
</script>
</div>
<!-- If I uncomment this second block the whole thing breaks
<div style="display:none" id="claremontdogContainer">
<script src="https://toolkit.rescuegroups.org/j/3/4ANRW3x8/toolkit.js"></script>
<script type="text/javascript">
</script>
</div>
-->
This gets pretty close to what I need. The problem I have is the second script load seems to conflict with the functions they provide in the script. It will display the initial result but does not carry any of the functionality that it should have. http://pricelesspetrescue.org/test-page/ Nothing is clickable inside those results and should be.
Been searching through various similar posts and the wordpress codex and...and...I just haven't been able to come up with anything that seems close enough to what I'm looking for to make the answer click in my head.
Edit: It seems that if I only load one of the scripts in either what I have above or the suggested answer below, all functionality is present when loaded. It's the loading of the second toolkit script that is breaking the page. I'm guessing one would need to be loaded then unloaded before loading the second for it to work. Any ideas?
The toolkit.js file you linked adds some common scripts to the DOM (via document.write function, which is not a good solution - see here: http://www.jameswiseman.com/blog/2011/03/31/jslint-messages-document-write-can-be-a-form-of-eval/), then populates an array (toolkitObjects) with a series of variables that are custom per file and finally loads some other scripts.
It also seems that each file loads a div with a specific class containing all the pets, and each div is identifiable by a specific class ( "rgtk-SOMEID" ) and therefore can be shown/hidden via javascript.
Here is an example of what you can obtain using the div class:
http://jsbin.com/loneyijuye/edit?html,output
I am in the process of AJAX-ing a WordPress theme with a persistent music player. Wordpress uses dynamic classes on the <body> tag. The basic structure is as follows:
<html>
<head>
</head>
<body class="unique-class-1 unique-class-2 unique-class-3">
<div id="site-container">
<nav class="nav-primary">
Other Page 01
Other Page 02
</nav>
<div class="site-inner">
<p>Site Content Here</p>
</div>
</div>
<div id="music-player"></div>
</body>
</html>
I am currently successfully loading the content of /other-page-01/, /other-page-02/, etc, using load('/other-page-01/ #site-container'). However, I need to extract all <body> classes from the AJAX loaded page and replace the current page's <body> classes with them dynamically.
Note: Replacing the entire <body> element is not an option due to the persistent <div id="music-player">. I've tried jQuery.get(), but couldn't get it to work.
How do I extract the <body> classes from the AJAX requested page and replace the current page's <body> classes with them?
I am not very familiar with jQuery or Javascript, so the exact code would be extremely helpful. Any help is greatly appreciated.
Thanks,
Aaron
My typical solution would have been to tell you to throw the AJAX code in to a jQuery object and then read it out like normal:
$(ajaxResult).attr('class');
Interestingly though, it appears you can't do this with a <body> element.
I'd say the easiest solution (if you have control over the resulting HTML) is to just use some good ol' regex:
var matches = ajaxResult.match(/<body.*class=["']([^"']*)["'].*>/),
classes = matches && matches[1];
I say "if you have control over the resulting HTML", because this relies on the HTML being reasonably well formed.
The other method would involve parsing it as a DOMDocument and then extracting what you need, but this would take a lot more and is usually overkill in simple cases like this.
Convert the body within your returned html to a div with a specific ID, then target that id to get the classes of the body (which is now a div.)
modifiedAjaxResult = ajaxResult.replace(/<body/i,'<div id="re_body"')
.replace(/<\/body/i,'</div');
$(modifiedAjaxResult).filter("#re_body").attr("class");
Of course, if the body has an id, this will conflict with it, so an arbitrary data attribute might be less likely to break.
modifiedAjaxResult = ajaxResult.replace(/<body/i,'<div data-re-id="re_body"')
.replace(/<\/body/i,'</div');
$(modifiedAjaxResult).filter("[data-re-id=re_body]").attr("class");
http://jsfiddle.net/N68St/
Of course, to use this method, you'll have to switch to using $.get instead.
$.get("/other-page-01/",function(ajaxResult){
var modifiedAjaxResult = ajaxResult.replace(/<body/i,'<div data-re-id="re_body"')
.replace(/<\/body/i,'</div');
alert($(modifiedAjaxResult).filter("[data-re-id=re_body]").attr("class"));
// the following line replicates what `.load` was doing.
$(someElement).append( $("<div>").html(ajaxResult).find("#site-container") );
});
I have a client site that has a community events page. On that page, events are generated and put out one by one like this:
<div class="event-info">
<h5>This is an event</h5>
<span class="date">December 25, 2013</span>
<p class="details"></p>
</div>
They want a link on the homepage that goes to this one Christmas event, which will eventually start to move down the page. The only way to really find that block is by the contents of the <H5>. A classic anchor link would do the trick, but I can't add them to the <div class="event-info" /> block. The homepage link has to go to this page and then jump down to the necessary <div class="event-info" />.
jQuery or vanilla javascript are all I have to work with. I have one .js file that I can add to, and of course the html/javascript of the link itself on the homepage. I can't manipulate the existing HTML of the pages (content is dynamic - I add new stuff to it), and I have no access to the backend .NET framework.
Thanks.
something like this?
jquery:
var hash = window.location.hash;
if (hash==='#xmas') {
var xmas = $('.date:contains("December 25")').parent('.event-info').offset().top;
$('html,body').animate({scrollTop: xmas}, 500);
}
You just add #xmas to end of the page url, like: http://fiddle.jshell.net/filever10/afK7M/show/light/#xmas
made a fiddle: http://jsfiddle.net/filever10/afK7M/