Refresh a Div that has a Google ad inside it - javascript

I have a <div> that holds a google ad. My website is mostly AJAX and there is no need for a browser refresh. That means my ads will not refresh either, which isn't ideal, a user staring at one ad all day.
So I wanted a way to refresh a particular <div> on a page. I found many solutions but they didn't work. For example, using JQuery's html function:
$("#ads").html("google ad script here");
This managed to refresh the whole page no idea how. I can also make an AJAX request to a HTML page that contains the Google ad but I am guessing it will have the same effect as the above attempt.
I do not want to use iFrames.
Is there any other option open to me? My pea brain can not think of anymore. :)
EDIT:
It is allowed since I will be initiating the refresh only when a user clicks a link.
A prime example is Yahoo Mail - their new AJAX mailbox uses this same method, when a user clicks a link then a new ad is shown.

As both of the other answers state, refreshing your AdSense advertisements automatically isn't allowed. I understand that you only intend to refresh the ad in response to user action, but it still isn't allowed, even though it should be!
Remember, the reason why you want to update the advertisements is so that you can show new ones. Displaying an advertisement is called an "impression." When you use code to refresh the ads, you are automatically generating ad impressions.
AdSense Program Policies state (emphasis mine):
Invalid Clicks and Impressions
Clicks on Google ads must result from genuine user interest. Any method that artificially generates clicks or impressions on your Google ads is strictly prohibited. These prohibited methods include but are not limited to repeated manual clicks or impressions, using robots, automated click and impression generating tools, third-party services that generate clicks or impressions such as paid-to-click, paid-to-surf, autosurf, and click-exchange programs, or any deceptive software.
Refreshing your advertisements is a violation of the letter of the rule against generating impressions. With that said, I think any reasonable person would agree that refreshing advertisements in an AJAX app in response to user behavior (e.g. in response to a click) isn't a violation of the spirit of the rule.
For example, imagine rewriting your entire app to stop using AJAX. That's clearly a worse experience for your users (it's slower, the page flashes on every click, the page can't dynamically update in the background), but, by a technicality, it's not a violation of the AdSense Program Policies.
Clearly Google meant to prohibit automatically replacing the advertisements every five seconds (creating a "slideshow" of advertisements). Google also meant to prohibit making your site look more attractive to advertisers by appearing to have more visits than you actually have. I'm sure they didn't intend to prevent you from designing a high-performance AJAX website... but unfortunately sometimes rules have unintended consequences.
Of course, as you originally pointed out, you CAN still refresh your advertisements if you embed them in an iframe and modify its location. (Here's how to use iframes in an AJAX application to refresh AdSense.)
You rejected iframes in your initial question, perhaps because you knew that using iframes would violate Google's policies... but if you insist on breaking the rules, you might as well break them all the way! ;-)
Ultimately, I think you'll find that generating impressions this way isn't worth the risk: you'll "refresh" the ads only to find that Google is just showing you the exact same ads as before.

The new Google DFP 'tags' allow specifically 'ad refreshing for AJAX'
refresh
pubService.refresh(slots)
Refreshes the specified array of slots on the page with new ads.
Parameters:
array slots - Optional array of slots to refresh. If not supplied, all ad slots are refreshed.
Example:
var slot1 = googletag.defineUnit("/1234567/leaderboard", [728, 90], "div-1").addService(googletag.pubads());
var slot2 = googletag.defineUnit("/1234567/skyscraper", [160, 600], "div-2").addService(googletag.pubads());
// The call to refresh fetches a new ad for each slot
googletag.pubads().refresh([slot1, slot2]);
http://support.google.com/dfp_sb/bin/answer.py?hl=en&answer=2372721&expand=pubservice_details#refresh

I know I'm a year and a half late to the party, but... It's possible that the problem with the ads is that they are using document.write (Ad servers are notorious for this, but I don't know if AdSense uses it or not.)
If that's the case, I have a library that can help: writeCapture.js. Example:
$('#ads').writeCapture().html('<script src="whatever-your-adsense-code-is"> </script>');
That's using jQuery, but there is also a standalone version.
As for whether it's a TOS violation... Gmail changes ads dynamically, so it can't be that bad. As long as the content is changing too, I would think it was OK.

You can refresh the Google Ad Slots with the following code. Put this in the JS function you want to refresh the Ads. It should refresh all of the ads on the page.
if ( undefined !== googletag ) {
googletag.pubads().refresh();
}
Google Ad Manager Help - Reload ads without a page refresh

Just include the ads in the pages you are loading via ajax. There can be nothing wrong with loading the ads from a file via ajax on a per page basis.
if I load Read.inc which has some content and an ad
Click something on the page and it takes you to Make.inc which has content an an ad.
Whats wrong with that? That's organic. One load with the ad as part of the content.
It's the same as clicking a link.
I haven't actually tried this yet, but it certainly seems logical.

It is not allowed (according to AdSense terms) to try and reload ads during the page life-cycle. Also, it is hardly possible (thanks to the platform architecture).

It is not allowed. but I think you can use a iframe for that. I saw good tutorials of that.
I tried do it by ajax by I rollback my changes for the Adsense TOS

Related

Iframes security tips and scripts

I am trying to launch a website for myself which people might be using in future. Currently I am allowing users to post iframes for YouTube and Google Maps etc. Copy entire 'iframe' from Google Maps or YouTube and paste it in post box just to keep it simple.
Later I am storing it in MySQL database. I am displaying this post on some page. I am little worried since though I have asked user to paste only YouTube or Maps iframes, a devil mind might put src of malicious code.
What are all the possible ways to prevent this?
I think there are multiple risks, some that come to mind are:
Cross-site scripting. There are too many ways to achieve this if you allow the full <iframe> tag to be displayed as entered. This is probably the main risk, and the showstopper. It would be really hard to prevent XSS if you just write the full iframe tag (as entered by an attacker) into subsequent pages. If you really want to do this, you should look into HTML sanitization like Google Caja or HTMLPurifier or similar, but it is a can of worms that you better avoid if possible.
Information leak to malicious website. This very much depends on the browser (and the exact version of such browser), but some information (like for example teh window size, etc.) does leak to the website in an iframe, even if it's from a different origin.
Information / control leak from malicious website. Even worse than the previous, the embedded website would have some control over the window, for example it can redirect it (again, I think it depends on the browser though, I'm not quite sure), or can change the url hash fragment. Also if postMessage is used, the iframe can send messages to your application, which can be exploited if your application is not properly secured (not necessarily right now, but at any time in the future, like 5 years from now, after much development).
Arbitrary text injection, possibly leading to social engineering. Say an adversary includes a frame that says something like "You are the winner of this month's super-prize! Call 1-800-ATTACKER to provide your details and get your reward!"... You get the idea. The message would look like a legitimate one from your website, when it's not.
So you'd better not allow people to enter full tags as copied from Google Maps or anywhere else. There appears to be a finite set of things you want to allow (like for example Youtube videos and Google Maps links are only two), for which you should have customized controls. The user would only enter the video id/slug (the part after ?v=...), or would paste the full link, from which you would take the id, and you would make the actual tag for your page on the server side. The same for Google Maps, if the user navigates to wherever he wants in a Maps window and pastes the url, you can make your own iframe I think, because everything is in the url in Google Maps.
So in short, you should not allow people entering tags. XSS can be mitigated by sanitizers, but other risks listed above cannot.

Remove Google Ads from cached page for certain users

We run an ad supported wordpress blog and use WP Super Cache to cache the pages to pure HTML. The way it works, via mod_rewrite, totally bypasses php if a html copy of the file is available.
The problem stems from the fact that we use a "premium user" system in which the blog does not display ads for premium users.
Unfortunately this is not true for cached pages which, due to being pure HTML, cannot differentiate between premium and normal users.
The obvious way to go would be to use javascript to look the user up and hide the ad DOM elements. But modifications to Google Ads code are not allowed by the ToS.
Is there any way to stop google ads from displaying for some users? Maybe with some sort of asynchronous code that would make the ads load AFTER the user gets verified?
Would that violate the Terms of Service as well if the ad never gets triggered in the first place?

How to I put ads on 100% JavaScript web applications?

Placing ads on JavaScript web applications has turned out to be much harder than I thought. First of all, when I say "100% JavaScript web application" I mean a tiny HTML file that loads and initiates a JavaScript file which draws all the content on the page. In other words, the website is completely empty until the JavaScript has executed.
Adsense is out of the question. They immediately deny your ad application based on an automatic scan of the website where they "discover" that the page "has no content". I've sent a bunch of mails to Adsense support trying to get somebody to manually check the application instead, but they have all been responded to by the same auto-generated "no content" email.
I have also tried using Chitika, but after hours of trying to get the ad to display I've given up. It simply doesn't work when I add the ad code after the page has opened, which I have to do in a JavaScript application. I also tried placing the ad code in an iframe, which does work, but the ad loses the context of the page, which is quite important because it can't find the Google search terms.
Do you have any experience with placing ads on JavaScript applications? How do you do it?
#Dan in the comments has a point here -- if Adsense can't get any sense out of your site, then neither will the Google bot, which means your site won't show up in Google.
If you want any kind of traffic for your site, then the very least you need to do is create a splash screen from regular HTML that Google can hook into. If that is then overwritten by the JS code, that's fine, though it might be worthwhile leaving it in place for all users until they click a 'start' button or something.
The splash screen page will also give you a starting point for somewhere to place your ads.

URL tracking functionality

I want my webpage to have two parts. The top part has a textbox. When the user types a URL into the textbox, the bottom part browses to the content of that URL. When the user clicks a link within the bottom part, the bottom part navigates to the new URL, and the textbox in the top part changes to the new URL. How can I do it?
NOTE: This behavior is the same as in Google Translate (e.g. here), but without any translation.
first problem..
Same origin issue
The only way to achieve what you are asking is exactly the way google translate does what it does - which is to use a server-side powered script as a proxy request:
http://translate.google.com/translate_un?depth=1&hl=en&ie=UTF8&prev=_t&rurl=translate.google.com&sl=auto&tl=en&twu=1&u=http://de.wikipedia.org/wiki/USA&lang=de&usg=ALkJrhgoLkbUGvOPUCHoNZIkVcMQpXhxZg
The above is the URL taken from the iframe that Google translate uses to display the translated page. The main thing to note is that the domain part of the URL is the same as the parent page's URL http://translate.google.com -- if both your frame and your parent window do not share the same domain, then your parent window's JavaScript wont be able to access anything within the iframe. It will be blocked by your browser's in-built security.
Obviously the above wont be a problem if in your project you are only ever going to be navigating your own pages (on the same domain), but considering you are proffering Google Translate as an example I'm assuming not.
What would Google do?
What the above URL does is to ask the server-side to fetch the wikipedia page and return it so that the iframe can display it - but to the iframe this page appears to be hosted on translate.google.com rather than wikipedia. This means that the iframe stays within the same origin as the parent window, and means that JavaScript can be used to edit or modify the page within the iframe.
next problem....
Rewrite the proxied content
Basically what I'm saying is that this can't be achieved with just HTML and client-side JavaScript - you need to have something to help from the server-side i.e. PHP, Python, Ruby, Lisp, Node.. and so on. This script will be responsible for making sure the proxied page appears/renders correctly e.g. you will have to make sure relative links to content/images/css on the original server are not broken (you can use the base tag or physically rewrite relative links). There are also many sites that would see this as an illegal use of their site, as per their site's terms of use and so should be black listed from your service.
final problem..?
Prevent the user from breaking away from your proxy
Once you have your proxy script, you can then use an iframe (please avoid using old framesets), and a bit of JavaScript magic that onload or ondomready of the iframe rewrites all of the links, forms and buttons in the page. This is so that when clicked or submitted, they post to your proxy script rather than the original destination. This rewrite code would also have to send the original destination to your proxy script some how - like u in the Google translate URL. Once you've sorted this, it will mean your iframe will reload with the new destination content, but - all importantly - your iframe will stay on the same domain.
too many problems!
If it were me, personally, I'd rethink your strategy
Overall this is not a simple task, and it isn't 100% fullproof either because there are many things that will cause problems:
Certain sites are designed to break out of frames.
There are ways a user can navigate from a page that can not be easily rewritten i.e. any navigation powered by JavaScript.
Certain pages are designed to break when served up from the wrong host.
Sites that do this kind of 'proxying' of other websites can get into hot water with regards to copyright and usage.
The reason why Google can do it is because they have a lot of time, money and resources... oh and a great deal of what Google translate does is actually handled on the server-side - not in JavaScript.
suggestions
If you are looking for tracking users navigating through your own site:
Use Google Analytics.
Or implement a simple server-side tracking system using cookies.
If you are looking to track users coming to your site and then travelling on to the rest of the world wide web:
Give up, web technologies are designed to prevent things like this.
Or join an online marketing company, they do their best to get around the prevention of things like this.
add a javascript function to your second frame -
<frame id="dataframe" src="frame_a.htm" onload="load()">
let the text box have an id - say "test"
function load()
{
document.getElementById('test').value=document.getElementById('dataframe').src
}

Is it possible to read cookies of a visitor?

AdSense use javascript to catch the keywords of current page to display relevant ads. But I was recently noticed that it will show ads related to my browsing history too. It seems that the javascript code can read my cookie (in general I mean, e.g. list of domains visited) to display relevant ads.
Is it practically possible to read cookies of a visitor?
No, it isn't possible to do so directly due to the same origin policy. (If it were possible, then you could make a page that stole the session of anyone on any domain!)
However, many websites include code from ad providers (read Google) on their page -- so that Google knows that you have visited website X because website X allows Google code to run when someone visits it. When you later visit website Y and it asks Google to display some ads on its behalf, what happens is no mystery.
Google knows all.

Categories