AdSense with Web Apps

[anfroxx]

TLDR;
- I have a free modern web app (sites built with React.js, Vue.js, Angular.js frameworks, etc.) with 3.5M+ page views a month, Google Organic traffic with flawless qualities (bounce rate, return visitors, time on page, pages per session).

- Web app monetization with ads is the same as one would monetize a mobile app, but web apps are not compatible with either AdMob or AdSense, that's where things get interesting

- I have been struggling to make AdSense show ads on it. The website is approved, ad placeholders are inside the app but I have a “Ad serving has been limited: Invalid traffic concerns” flag sitting there for 3 months already

- I am not trying to game the system, I want to have a legit AdSense(?) integration to monetize my web app. But couldn't find any guidelines for this setup anywhere

--------------------------------------------------------------------------

The responses on the topic found online are quite controversial, various AdSense forums threads are closed with the conclusion that AdSense just won't work with web apps.

While there are official Google posts https://www.google.com/intl/en_uk/adsense/start/resources/3-types-of-sites/ [google.com] claiming that AdSense supports web tools (not web apps per se, but same concept) that only adds to frustration.

The issue is not making it work technically/get the site approved - that's doable although a bit tricky, but making Google "digest" your app and hop all the loops to actually start showing ads within it.

Coming from a startup world it's common for us to structure the SEO around content on landing pages/blog and placing an actual app under /app subfolder or app. subdomain. Not worrying much about what Google thinks about the app itself since usually it's under registration, /noindex and is being monetized by subscriptions/direct sales.

But my current situation is completely different. No login required to use the app and I actually need G to dig into the app, crawl it and show ads.

And this brings many concerns:

1) Googlebot crawler is not really the same as AdSense crawler

2) Apps usually have almost no content for AdSense to crawl and show ads AND Apps are dynamic (loading screens, scrolls, dynamic content, interactions, etc)

3) Ad placement policy. Most stuff that is allowed for mobile ads (AdMob) are prohibited in AdSense e.g. ads on transactional pages (loading, processing, transactional pages), ads above the fold or ads in floating/sticky boxes.

3.1) While AdSense Auto-ads shows them no probs (Anchor, Vignette ads) I am not sure how Auto-placements even work with web apps and how to tackle this placement problem as a whole

My plan to solve it:

1) Prevent Googlebot from indexing /app pages while allowing AdSense bot crawl/”index” them. To prevent /app pages from showing in SERP, any possible duplicate/thin content issues and other stuff

2) Develop Advanced Server Side Rendering: all app pages should be accessible directly and follow webmaster guidelines, which implies advanced user flows/journeys e.g.:

2.1) Structure all app pages/views like normal web page e.g.: Navigation -> Title/subheader -> {Demo} content replaced with Dynamic content -> Static content (text/images) This is not normal for web apps but looks like the only way to win

2.2) AdSense can access and crawl every app page/section with ads as static one with "demo" content that will be replaced by dynamic preserving the same structure when real user interacts with the app

2.3) Users coming from a website landing page can work with app normally

3) No ideas

The Main Question
Is this plan legit, would it work, did I miss anything, any caveats? Looking forward for any help and hope this thread would be helpful for everyone facing the same issue

P.S. Additional options would be just ditching AdSense and going exclusively with AdManager or custom Ad Networks staying with a normal low-content web app, but I haven’t worked with them a lot before and envision a lot of friction there, especially with the latter.

[edited by: martinibuster at 3:53 pm (utc) on Jan 27, 2021]

[IanTurner]

Do you change the browser URL from within your React App? That appears to be the key to getting the app content crawled.

[NickMNS]

Where to start?

While there are official Google posts [google.com...] [google.com] claiming that AdSense supports web tools (not web apps per se, but same concept) that only adds to frustration.

Lol, I totally get your frustration, the example they show in the post as an online tool with "AdSense" doesn't even have any ads.


The most important thing to consider in my opinion is that each "page" of the app must have it's own unique url. Now what constitutes a page in the case of a web-app is subjective. But basically I see it as any shareable content. That is you may provide a page with some information and then provides means for the user to customize the content. If the user is unlikely to want to share or return to that customized view then it doesn't need its own URL. On the other hand if the user wants to send a link to a friend to show them this great content, then it should have it's own URL. But this can produce an infinite URL, many leading to what may be duplicate content, so one may need to use some form canonicalization.

1) Prevent Googlebot from indexing /app pages while allowing AdSense bot crawl/”index” them. To prevent /app pages from showing in SERP, any possible duplicate/thin content issues and other stuff

I would be reluctant to actively prevent Googlebot from crawling. While it is true that Googlebot and AdSense's mediapartners bot are not the same, they do share a cache, so Googlebot crawling can help with discovery for AdSense. That said, I wouldn't produce a site-map with all the millions of combination and permutations of possible URL's either. I actually tried that at one point, and it didn't help, I don't think it really hurt either, it was simply ignored.
The thing I would do is have a set of links pointing to example pages. Pages that are representative of the content, this will allows Google to crawl and know what the site is about. Then leave it up to the user to share links. Google will discover those links and crawl them. Those are the pages that will get the traffic and should have the ads.

2) Develop Advanced Server Side Rendering:

To be safe, I would but Google has greatly improved its ability to crawl and render javascript webpages. I'm not sure that this as important as it once was. But Google may be able to see your content, I'm not sure other's will be Bing, duckduckgo etc, and I'm not sure about the mediapartners bot, so to be safe I would server side render.

Structure all app pages/views like normal web page

I'm not sure whether structure will make a difference, I think that is more a UI decision, but the content you want crawled needs a URL.

RE: points 2.2 and 2.3 are addressed with my points above.

3) No ideas

The biggest issue I have had that you have not raised is the displaying of ads on a page that never changes. On standard website, a user navigates content by changing pages, when a new page loads, so does a new ad or set of ads, whereas in web-app there is only one page load, changes to the content are handled by adding and removing it from the loaded page. This cause is big problem for AdSense. Basically you will get one ad impression per visit. It is also against AdSense's policies to dynamically reload ads. This is to the prevent people from writing scripts to continuously reload ads every few seconds, and then leaving the page open on some computer. The work around is to use AdManager and link your AdSense account to your AdManager account. Then you can use AdManager code to load new ads. It remains restrictive, but assuming there is sufficient new content on the page and there is user interaction you can load new ads.

As for auto-ads, specifically vignettes, these require page loads so are unlikely to work in a web-app.

I think that covers most of the points raised. At any rate it should be could starting point for discussion.

[anfroxx]

@IanTurner sure, the pages within the app have their own URL's but as in our previous implementation - visiting these pages directly redirected users to the app starting page e.g. app "/start" page. Not sure if this was a good idea either

@NickMNS, thanks a lot for your detailed reply. I giggle every time when I think about this web tool page without actual AdSense ads.. Anyway, what you say partly validates my plan and I like the idea of thinking about pages being shareable.

You also say these shareable app pages can/have to receive traffic, but rel="canonical" on them should point to somewhere else rather than these same pages e.g. to app "/start" page or maybe our normal website homepage? This way they won't be on SERP's but otherwise will work like any other normal web page, am I right? This is quite interesting actually.

Regarding the ad refresh/being shown once, there is a "hack" for Angular.js (maintained by Google) validated by someone from G (not sure) to be legit. Basically, you have to init your ad placeholder with a random "data-ad-region" parameter. Methinks it justs let's G know that this is a new page and "dynamically" refresh the ad. This also solves the issue of having more than 3 ads on the same page. Although I couldn't find any other pieces confirming this, we did the same for a test. The author says he was able to get Adsense running with it on other forums.

Check this code snippet below

rand= Math.random();
html = "<ins class='adsbygoogle' style='display:inline-block;width:300px;height:250px' data-ad-client='ca-pub-XXXXXXXXXXXXXX' data-ad-slot='6259591966' data-ad-region='page-" + rand+ "'></ins>";

Source:
https://github.com/leonardteo/google-ads-test-angularjs

Thanks for the support, so far it all makes sense - I will try AdManager first to see if we even get anything from there and update this thread /w the results. Then we might go with the new app structure with canonicals, but I have to revise this topic in-depth.

[edited by: not2easy at 7:53 pm (utc) on Jan 27, 2021]
[edit reason] please see charter [/edit]

[IanTurner]

I would say that if you could 301 the old pages to the appropriate URL in the app that would be of great benefit. Assuming that you can go directly to a particular url within the app, which I would say is critical to users as well.

[anfroxx]

@IanTurner oh, completely forgot about this, thanks! Hard to keep all those things in my head

[ClosedForLunch]

- I have been struggling to make AdSense show ads on it. The website is approved, ad placeholders are inside the app but I have a “Ad serving has been limited: Invalid traffic concerns” flag sitting there for 3 months already

Invalid traffic is part of the problem too.

[anfroxx]

ClosedForLunch, yeah, might be.. the traffic is coming from all over the world. There are occasional spikes from random countries, while the majority of it is legit - bots also might be present. How do I deal with it? Link AdSense + Google Analytics? Enable Cloudflare bot protection or add some more sophisticated firewall stuff server-side, what worked for you?

[not2easy]

Hi anfroxx and welcome to WebmasterWorld [webmasterworld.com]

Many sites use a CDN like Cloudflare because it offers an easy way to lower unwanted bot traffic. Others prefer to selectively block unwanted traffic using configuration in server firewalls or via their .htaccess settings. Which is best for you is a decision that depends on how much time you want to put into it.

I do it the old way because I started before CDNs were around and once you have a system it is simple. If I were starting today, I might prefer the CDN tools. There are threads here with tips on setting it up correctly. Lots more info using our search.

[anfroxx]

@not2easy thanks! I am using Cloudflare myself actually.

Couldn't edit my post but wanted to share more info about this mystical data-ad-region parameter on AdSense placeholders for web apps, since there's currently only a couple of Google results for it lol.

More descriptive Github page on how this works & caveats:
- https://github.com/nuxt-community/google-adsense-module
Google group discussion for it:
- https://groups.google.com/forum/#!topic/angular/eyVo4XU04uk

Don't mind that these are all different tech stacks, the solution is easily adapted for any

Hope to helps, took me so much time to find it!

[edited by: not2easy at 4:37 am (utc) on Jan 28, 2021]

[NickMNS]

@anfroxx

data-ad-region parameter on AdSense

I don't know it looks spurious, there is limited information about this parameter and the nuxt page has copyright from 2017, states a 3 ad per page limit, which is no longer case, and there are some dead links to blog posts. There have been commits in the last few month, so it isn't totally dead, but I'm not sure. Have you reached out the maintainer of the git repo?

It is really the lack of documentation on Google's part regarding this parameter that is the most concerning. Google can be faulted for a lot of stuff, but documenting there products is not one of them IMO. I would stick with AdManager.

Also with 3.5M pageviews a month you may want to consider using AdX and header bidding, for which you would need AdManager anyways.

Just a side note, my Ad Manager implementation runs on a site using plain vanilla Javascript, I haven't tried with React or Angular. I'm working on React project now but have no plans to include ads at this point.

but rel="canonical" on them should point to somewhere else rather than these same pages e.g. to app "/start" page or maybe our normal website homepage?

If you use a rel="canonical" tag it must point to a page that is similar to the page on which it appears. Example you have an app that allows user to design their on sneakers, you could have a Nike Air Max page, then for each color option you would likely have url param, laces another url param etc. each url param would create a new URL but there is nothing really differentiating these pages other than some colors, so in this case for each page with the param you would point to the basic page without any colors. Like that the user can create a pair Nike Air Max's in candy pink with bright yellow laces and send a link of the page a to friend, but when Google crawls the link it will know that this is just another version of the basic page.

Note that this is fundamentally different then the suggestion from @IanTurner

I would say that if you could 301 the old pages to the appropriate URL in the app that would be of great benefit.

301'ing the page would redirect everyone to the base page. So the user would call is the friend and say "Did you see my cool shoes" and the friend would answer, "they were lame, just black and white". This, because the link would redirect all users to the base page.

I doubt seriously that the ads not showing is being cause by bot clicks. Most bots are dumb, they load a page find the script and fire an a click event. Most bots wont get anywhere with a web-app that requires user interaction to load the content. The more likely cause of the invalid clicks is that the ads are popping up over clickable content, possibly delayed due to the async function calls. The page renders the content without ads, and as the user clicks (or taps) some button or link boom! the ad appears on top of the button, or something like that.

[not2easy]

@anfroxx - I apologize for the additional edits, but as suggested, please take a look at the Charter, it is specific about linking out to these tool sites. Your link to Google only took me to Google Groups, I've made it visible so that others can find it.