I have been reading the web and trying out things for days looking for a way to show the Google Adsense ads through jQuery mobile transitions without breaking the ToS. I am a bit stuck so I turn to the wisest community.
The Adsense tag is made of three scripts (i) a general one, (ii) a list of slots and (iii) the display itself. The first two go in the <head>, the latter in the <body>.
I can display the ads on my first page just fine. The problem comes with page transition.
Since jQuery Mobile does not reload the <head>, an option is to prepare the googletag while loading the <head> the first time. This sets the limit to a maximum of three ads per page, which, across a whole site is not a lot. Plus it means that you will have to move ad <div> around, which is not so great either. Finally, it means that you may load ads and not display them until the user goes to the page where it belongs, if ever. Which is not so ToS compatible either.
Is there a way to load a fresh new ad on each transition? If yes, where do I put the Google scripts to make sure they load properly?
I found a way to get it to work in Google DFP with Adsense plugged into DFP. DFP is more flexible so it was easier.
Here is what I used:
In the <head>: I put the google scripts and defined all the adslots for the whole website (you will get it with the "generate tags").
On each page: you put the <body> part of the script like you would do anywhere else.
With this, you will be able to get a new ad served each time you load a new page. However, if you browse between pages, you will never get them to refresh.
To make for this, you can use googletag.pubads().refresh(). However, you want to only refresh the slots that are in the page that you are loading, otherwise you break some terms and conditions. Plus, you cannot refresh slots that have not been displayed yet, so it will fail if you defined slots for the whole website but all the pages have not been loaded yet, which is quite likely.
But you can pass the slots that are in the current page to the refresh() function. Here is how I did it:
function refreshAds() {
// Get all the slots
var allSlots = googletag.pubads().getSlots();
var slotsToRefresh = Array();
// Select the slots that are on the current page based on their dom Id
for (var i=0; i<allslots.length; ++i)
if (isSlotIdOnTheCurrentPage(allSlots[i].getSlotId().getDomId()))
slotsToRefresh.push(allSlots[i]); // I let you implement the logic behind naming ids slots and divs
if (slotsToRefresh.length > 0)
googletag.pubads().refresh(slotsToRefresh);
}
$(document).on("pagechange", function() {refreshAds();})
There you go, each time you go back to a page, the slots are refreshed, each time you go to a new page, a new slot is created (provided that it was defined in the <head>).
I hope it will help! There might be a way to get it to work seamlessly in Adsense but I did not try.
Maybe using jQuery's getScript() method would help in this situation. I propose that you try to include this inside a pageinit function. Let me give you a brief example.
$(document).delegate('[data-role=page]','pageinit',function(){ // this would get executed on page init of every JQM page
$.getScript('path/to/yourlib.js',function(){ // using getScript should help you be able to load scripts since the head doesn't get loaded again
Demo(); //This would be code that your lib uses
});
});
Related
This appears to be pretty basic but I can't figure it out.
Using a jqm multipage template, I'm trying to allow users to jump from a link one page (id='page1') directly to an image in another page (id='page2').
FIDDLE
It appears I am constrained, by html hyperlinking rules and jqm, to this:
<a href='#page2'>go to image on p2</a>
... which of course jumps the user to the top of page2.
But that's not what I want. I want the user to jump directly to the IMAGE, which is close to the bottom of page2, tagged like so:
<img id='image-id'>
But tagging the link with the image's id (not the page's id), i.e. tagging it like this
<a href='#image-id'>go to image on p2</a>
doesn't work.
I get the feeling I'm missing something very obvious, but can't figure it out.
Any suggestions? Or is this not possible?
I've got a different problem but found this question in my travels... thought I would add an extract from the jquery mobile page:
http://demos.jquerymobile.com/1.4.5/navigation-linking-pages/
Note: You cannot link to a multipage document with Ajax navigation active because the framework will only load the first page it finds, not the full set of internal pages. In these cases, you must link without Ajax (see next section) for a full page refresh to prevent potential hash collisions. There is currently a subpage plugin that makes it possible to load in multi-page documents.
I am building an app using Backbone.js and jQuery Mobile. On some pages in my app I have external href links and I'm running into an issue.
When a user clicks and external href link, get taken to the external site and then hits the back button. My app does not load from the proper page where the user originally left the app from.
In fact my entire DOM is reset so it looks like my site gets a complete refresh and doesn't keep any of its former state.
I have been trying to search for a solution but this issue is kind of hard to word out. I hope it makes sense.
Does anyone have any suggestions?
UPDATE
Stupid error on my part.. I had a bad id set on the page and it didn't load the data I had saved in the session for it when a user returns to the page.. Changed the id and all is well. Thanks!
Link
Make you external links open up new tabs.
If you have used one html with multiple pages solution then there's an explanation for this.
rel="external" will cause a full page refresh so last page location will not be remebered. When you return to the last location it will trigger new refresh and the first page will be shown again.
This can be prevented with a multiple html page solution.
I'm trying to write a Firefox extension that speeds up browsing page sequences by preloading sequence items, preprocessing them, and showing on request.
Is there any way to load and process DOM of arbitrary web page (on the same site as currently opened) in background from privileged extension code?
Ideally, the document's javascript should work as it would in a normal browser window. I suspect a hidden window would be required for this. The context on that javascript should not be privileged then.
Loading should allow user to continue normal browsing in all visible browser windows.
I don't like the idea of injecting iframes to currently opened document and making them optionally visible (the principle used by Webcomic reader userscript)
From the add-on SDK, the page-worker module might be close to what you need:
The page-worker module provides a way to create a permanent, invisible
page and access its DOM.
That said, I have no idea whether it's possible to load that invisible page into a (current or new) tab / window. You might be able to replace a current tab's document.body by the page-worker's one. Possibly. If it's legal.
You could use a lightweight browser extension to collect all links on a page onload and use link tags to prefetch the content for each, the browser will load those pages in the background: https://developer.mozilla.org/en/Link_prefetching_FAQ
OR
If you need to preload a page and have access to its DOM from extension land, you could use the Page Worker API from the Add-on SDK: https://addons.mozilla.org/en-US/developers/docs/sdk/1.0/packages/addon-kit/docs/page-worker.html
I believe so. assuming your javascript is already running
var doc = gBrowser.selectedBrowser.contentDocument;
will get your the document of the loaded tab, you can then process it and do with it what you want. Doing it in the background and keeping the app responsive is a different story :)
This is no doubt a more generic issue regarding web pages, but it is easily demonstrated with Google content.
When entering some search criteria on Google's home page the results are not triggering the webViewDidFinishLoad method. The same problem occurs when the coloured Google logo is replaced with some artwork linked to a feature page.
I suspect the page is not being fully loaded due to some javascript or ajax code, so is there a way of detecting this?
This is because Google are using AJAX to do this, the webViewDidFinishLoad delegate method is called when effectively a new resource is loaded into the webview - the equivalent to a page load in your browser, since Google are AJAXing this stuff, it isn't causing that method to get triggered.
There isn't any way to detect when parts of a page are loaded (javascripts, style sheets or ajax responses).
One thing you could be able to do is execute a line of javascript onto the web view that tells you the height of the page, by waiting until the height of the page changes you could know when a result has occurred, you will have to devise some other - more smart check of course when a search query is modified, but my idea would work for the initial google logo screen to the first results page.
Executing that JS every few seconds should be enough.
Hope that helps
I'm working on a mobile view of our site. I'm trying to implement JQuery mobile but I'm seeing two issues that might prevent me from continuing and hoping some of you have insights.
Many pages are brought up by searches. But when the page is brought up from a search box I can't get it to load as rel='external', thus the page loads via Ajax. Great, except the pages that load are almost always larger pages broken up into data-role='page'. So when the page loads it's unable to navigate within that page, though it does hide the secondary sections. According to the documentation I need to put the rel="external" on the form, but that is not working for me. Is it possible to get the page to load without Ajax via a form submit?
Second question in same topic. In the crawl, walk, run fashion first step is a basic mobile friendly site. But I'm hoping this can also be the foundation for a PhoneGap based version of the site. From what I understand the basic model for PhoneGap will break if pages are not always loaded in Ajax as it will trigger a browser load. Since JQM requires any page with embeded data-role=page sections to be loaded via rel=external, which turns off Ajax loading, does this mean using JQM will preclude using Phone Gap to create the native client later?
Thanks in advance for any replies.
This script below should be put between your jquery min and your jquery mobile min. Otherwise it will not take effect. Adding an extension to the $.mobile with these ajax functionalities turned off may help your issue. All 3 are not needed, but they are all test worthy for your issue.
<script>
$(document).bind('mobileinit',function(){
$.extend( $.mobile , {
ajaxFormsEnabled: false,
ajaxLinksEnabled: false,
ajaxEnabled: false
});
});
</script>
Phonegap is for building phone applications, not mobile websites. It is composed Javascript which talks to specific libraries to interface with the mobile device itself.