Tried several methods but still unable to get Google Ad to render. The intention is to responsively place ads based on window width. But I'm unable to place even a single ad.
Here's the most reliable method I can think of:
/* templates.html */
<head>
<script type="text/javascript">
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>
<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script>
</head>
<body>
<div class="container">
{{> page}}
</div>
</body>
<template name="page">
<div class="page_ad"></div>
</template>
/* client.js */
Template.page.rendered = function(){
googletag.cmd.push(function() {
googletag.defineSlot('LEADERBOARD', [728, 90], 'AD-CODE-ID').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
$('.page_ad').html("<div id='AD-CODE-ID' style='width:728px; height:90px;'>");
googletag.cmd.push(function() { googletag.display('AD-CODE-ID')});
};
Thanks for your consideration.
Here is how I do it. You can read more about it in this blog post.
Template.MyAds.rendered = function() {
$.getScript("//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", function() {
var ads, adsbygoogle;
ads = '<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-72414***074839" data-ad-slot="4009***57" data-ad-format="auto"></ins>';
$('.leaderboard').html(ads);
return (adsbygoogle = window.adsbygoogle || []).push({});
});
};
Check out the iframe solution here; Meteor JS: use external script
Check out the information about that method being against TOS; http://productforums.google.com/forum/#!category-topic/adsense/adsense-basics-and-policies/JP6vrWxFMVg
Related
I'm trying to get a function to run when some element on the page is loaded
<img src="" onload="myfunction()">
<footer>
<script src="main.js"></script>
</footer>
Now, the problem is that the page is trying to load the function before the js file is loaded
Do I have a solution other then loading the js file in the header??
I'd have a tiny function that just waits until the JS file is loaded, and then call the function in the JS file. Example:
<img src="" onload="stateCheck()">
<script>
let stateCheck = setInterval(() => {
if (document.readyState === 'complete') { // could use = 'interactive' too
clearInterval(stateCheck);
myfunction()
}
}, 100);
</script>
<script src="main.js"></script>
I'm trying to display ads on my test website before I use it for my live site.
I've placed the generated code from Admanager in the head and in the body of de webpage. The ad is showing fine, but when I resize my screen, the same ad is showing up on tablet and mobile. I've set different ads by using Sizemapping, and it's giving me this error in the chrome inspector:
Exception in queued GPT command TypeError: googletag.SizeMapping is not a function
at Arguments. ((index):70)
at Gk.push (pubads_impl_modern_2019112101.js?21065216:1)
at Nk (pubads_impl_modern_2019112101.js?21065216:1)
at pubads_impl_modern_2019112101.js?21065216:1
at dq (pubads_impl_modern_2019112101.js?21065216:1)
at pubads_impl_modern_2019112101.js?21065216:1
at pubads_impl_modern_2019112101.js?21065216:1
How can I fix this?
This is the code in my head:
<script data-ad-client="ca-pub-5630600850555485" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
googletag.defineSlot('/10643240/test_aanhetbouwen', [[300, 600], [300, 250], [728, 90], [970, 250], [320, 100]], 'div-gpt-ad-4873663-1').addService(googletag.pubads());
googletag.enableServices();
});
</script>
<!-- Start GPT Tag -->
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
var gptadslots = [];
var googletag = googletag || {cmd:[]};
</script>
<script>
googletag.cmd.push(function() {
var mapping1 = googletag.SizeMapping()
.addSize([1024, 770], [[300, 600]])
.addSize([770, 400], [[300, 250]])
.addSize([1, 1], [[300, 250]])
.build();
//Adslot 1 declaration
gptadslots.push(googletag.defineSlot('/10643240/test_aanhetbouwen', [[300,250],[300,600]], 'div-gpt-ad-4873663-1')
.defineSizeMapping(mapping1)
.addService(googletag.pubads()));
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
<!-- End GPT Tag -->
And this is my code in the body:
<!-- GPT AdSlot 1 for Ad unit 'test_aanhetbouwen' ### Size: [[300,600]] -->
<div id="div-gpt-ad-4873663-1">
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-4873663-1'); });
</script>
</div>
<!-- End AdSlot 1 -->
Try to disable Adblock or any other advert-blocker.
In the index.html I use:
<template is="dom-bind" id="app">
In a normal dom-module I use:
<script>
(function() {
'use strict';
Polymer({
is: 'my-xxxx',
properties: {
/* location for properties */
}
Where do I define the properties used in the template dom-bind (f.i to have an observer attached to them?
Based on Polymer docs, you'd use JavaScript (inline or imported in index.html) to add template properties inside of an event handler for the template's dom-change event. For example, you could add a message property to the template with this script:
var t = document.getElementById('app');
t.addEventListener('dom-change', function() {
t.message = 'Hello world!';
});
See demo below:
<head>
<base href="https://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<template is="dom-bind" id="app">
{{message}}
</template>
<script>
var t = document.getElementById('app');
// The dom-change event signifies when the template has stamped its DOM.
t.addEventListener('dom-change', function() {
// auto-binding template is ready.
t.message = 'Hello world!';
});
</script>
</body>
jsbin
I've just started out using backbone. I want to apply a view to a button, but when I open my file in the browser there is nothing there.
Why isn't the button being rendered?
HTML:
<!-- Scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script type="text/javascript" src="views/BaseButtonView.js"></script>
</head>
<body>
<script type="text/template" id="button-test">
<div id="test-buttons">
<button class="cta-ajax">
<p>send message</p>
<div class="spinner-container"></div>
</button>
</div>
</script>
</body>
</html>
View:
$(document).ready(function(){
var ButtonView = Backbone.View.extend({
el: $(".cta-ajax"),
template: _.template($("#button-test").html()),
initialize: function(){
console.log("Started!");
},
render: function() {
this.$el.html(this.template());
console.log("rendered");
return this;
}
});
var TView = new ButtonView();
});
You have two issues with your code. Here is a working jsfiddle: http://jsfiddle.net/cj4zkyow/1/
Issue 1:
Aside from implementing the initialize function, you also need to call render within initialize. Otherwise you have to call render manually.
Issue 2:
Second issue is that you set the el attribute of your view to .cta-ajax, but the element does not exist. It is part of your template. The el attribute is the element that your view gets appended to. So you need to use something that exists in the DOM.
HTML:
// Need a element to append view to.
<div id="test"></div>
<script type="text/template" id="button-test">
<div id="test-buttons">
<button class="cta-ajax">
<p>send message</p>
<div class="spinner-container"></div>
</button>
</div>
</script>
Javascript:
$(document).ready(function(){
var ButtonView = Backbone.View.extend({
// If you specify, el, it should be an element in the DOM, not in your template.
el: $("#test"),
template: _.template($("#button-test").html()),
initialize: function(){
// Need to call render in initialize function to render view.
this.render();
},
render: function() {
this.$el.html(this.template());
return this;
}
});
var TView = new ButtonView();
});
One ad unit just stopped to work and after trying to generate new code it is still not working. When I use google console it is just showing warning Ad unit failed to fetch. Other 3 ads are working normally. They are inserted before I started to work on this project.
New ad code is generated like
header
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/6000854/R300x250_L', [300, 250], 'div-gpt-ad-1367703773182-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
body
<!-- R300x250_L -->
<div id='div-gpt-ad-1367703773182-0' style='width:300px; height:250px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1367703773182-0'); });
</script>
</div>
Old code is generated like
header
<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'></script>
<script type='text/javascript'>
GS_googleAddAdSenseService("ca-pub-2838961657718357");
GS_googleEnableAllServices();
</script>
<script type='text/javascript'>
GA_googleAddSlot("ca-pub-2838961657718357", "Top728x90");
GA_googleAddSlot("ca-pub-2838961657718357", "Right300x250");
GA_googleAddSlot("ca-pub-2838961657718357", "Right300x250Bottom");
</script>
<script type='text/javascript'>
GA_googleFetchAds();
</script>
body
<!-- Right300x250Bottom -->
<script type='text/javascript'>
GA_googleFillSlot("Right300x250Bottom");
</script>
Is there maybe conflict because of diferent tags or code
NOTE: I am just wordpress front end developer, I don't have access to google DFP services and I am not generating tags or code
EDIT: Based on this discussion it looks like using the old GAM tags with GPT tags may now be an issue (just recently) http://productforums.google.com/forum/#!topic/dfp/snK7znwUMBE
I think you should convert the GAM tags to to GPT tags and use just the DFP GPT tags if possible to stop this happening... its most probably a conflict between the two scripts and depending on the order they get loaded the GPT tags may not work...
ORIGINAL:
I just tried your code and two ads showed as expected. So there does not appear to be any conflicts using both scripts at the same time.
Potentially you have been refreshing the page so many times that there are no ads that will be displaying for you through DFP anymore because of rate limits? That is just a wild guess though. If I refresh the page a lot I do get the failed to fetch message every now and then in the console so I think it is probably just a rate limit and something that a normal user will not have a problem with.
This is the code that I am using, two 300x250 ads show on the page so everything is working correctly.
<html>
<head>
<title>DFP TEST</title>
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/6000854/R300x250_L', [300, 250], 'div-gpt-ad-1367703773182-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'></script>
<script type='text/javascript'>
GS_googleAddAdSenseService("ca-pub-2838961657718357");
GS_googleEnableAllServices();
</script>
<script type='text/javascript'>
GA_googleAddSlot("ca-pub-2838961657718357", "Top728x90");
GA_googleAddSlot("ca-pub-2838961657718357", "Right300x250");
GA_googleAddSlot("ca-pub-2838961657718357", "Right300x250Bottom");
</script>
<script type='text/javascript'>
GA_googleFetchAds();
</script>
</head>
<body>
<!-- R300x250_L -->
<div id='div-gpt-ad-1367703773182-0' style='width:300px; height:250px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1367703773182-0'); });
</script>
</div>
<!-- Right300x250Bottom -->
<script type='text/javascript'>
GA_googleFillSlot("Right300x250Bottom");
</script>
</body>
</html>