AngularJS & Adsense

[Leonard Teo]

Hi guys,

We have a pretty big AngularJS site at http://www.artstation.com. We only launched 4 months ago and it's now at 8 million+ page views per month, a lot of that is thanks to AngularJS and the speed of which people can browse artwork on the site.

We want to start monetizing by adding Google Adsense to the site. I have adsense working as a directive, but it always, without fail, stops showing ads after 5 pageviews (1 ad per pageview). A 'pageview' is considered as every time the route changes, swapping out ng-view and the corresponding template. I am assuming that Adsense is simply thinking that it is because there has been 5 ads on the same "page" (the entire app being a single page), and that you're only allowed 3 at any given time so it stops showing more. Note that adsense is not running on production, only on local development environment where testing is being done.

My question is... has anyone here actually gotten Adsense and AngularJS to play together nicely? i.e. ads show up as "normal" as if each time a new controller is called, adsense fires up as per normal?

Let me know if you have, I'm willing to pay for consulting to get this working.

Thanks,

Leonard Teo

CEO, Ballistiq Digital, inc.

http://www.ballistiq.com

[Angel Martínez]

Really nice site

you can try

https://gist.github.com/angelmartz/51c202b80c087404a50a

and one question,

What thecnology use for back-end?

[Leonard Teo]

We gave up trying to support AdSense. We just sell our own ads now and use iframes.

Backend is Rails.

Leo

--

Leonard Teo

Partner, Co-Founder, Ballistiq

http://www.ballistiq.com

ArtStation - Showcase, Discover, Connect

http://www.artstation.com

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/eyVo4XU04uk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Angel Martínez]

You can try Adsense

Google Adsense

Well, here is the first big problem. Adsense and Ajax based websites don't really play well. Adsense allows you to place up to three standard ad units in a page. But in a Single Page App only the first page load is a full load. Subsequently when the routes change new partials are loaded into the ng-view or ui-view. For adsense these routes/states are not different pages. As a result you can not put ads inside your partials. You can only put these ads outside ng-view or ui-view (may be in the sidebar or header).

Now the problem is that if you put the ads in the sidebar, header etc they never get refreshed. Because the new partials are loaded into a specific div and your ads are not present there. Here we need some kind of technique to refresh the ads because users who spend a lot of time in your website will keep seeing the same ads. So, the solution is using DoubleClick for Publishers. You can serve your adsense ads through DFP and refresh them in a certain interval.

If you already have an adsense account just use the same for DFP. Once you have logged into DFP, create a new ad unit. Be sure to check Maximize revenue of unsold and remnant inventory with AdSense checkbox. Fill the necessary fields, save the ad unit and click the button Generate Tags for getting the GPT tags. This is pretty simple and straightforward.

Once you use the GPT tags and see ads in your website you can put the following code in the run() function of your AngularJS module to refresh the ads:

$interval(function(){
         if($window.googletag && $window.googletag.pubads){
            $window.googletag.pubads().refresh();
          }
 },60000);

window.googletag.pubads().refresh() refreshes all the ad units in the page. We combine it with $interval() to trigger the refresh in every 60s. You can also refresh the ads when a new partial is loaded. This can be done by subscribing to events like $routeChangeSuccess or $stateChangeSuccess.

[Angel Martínez]

Hi

I have other question, I saw url "/artwork/destiny-the-black-garden" is a ngRoute with html5Mode = true, but "/about" is not on ngRoute

How do you get, some routes to Angular, and others to Backend?  

[Leonard Teo]

To get something to backend, add target="_self"

E.g.

Angular page:

<a href="/angular-route">Angular Route</a>

Non-Angular page

<a href="/non-angular-route" target="_self">Non Angular Route</a>

--

Leonard Teo

Partner, Co-Founder, Ballistiq

http://www.ballistiq.com

ArtStation - Showcase, Discover, Connect

http://www.artstation.com

[Liam]

Hey Angel Martínez,

I have been looking everywhere for a method to achieve Adsense updates on route change in an Angular app that I intend to soon monetise, unfortunately there is very little information around. Of all the methods I have read yours seems the most appropriate. Just wondering if you still use this method and confirming that it won't lead to my Adsense account being banned?

[Leonard Teo]

We got Adsense working with Angular with help from Google. Here is the method that was told to us to use:

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

But we still did not end up using AdSense because we found that over 50% of our traffic used adblockers and the revenue generated was peanuts.

Sent from my iPhone

Visit this group at https://groups.google.com/group/angular.

[Liam Mulvaney]

Hey Leonard, 

Thanks for the quick reply! Great to see a solution, I will give it a go this week hopefully the traffic to my site is not so heavily equipped with Adblocker, will have to wait and find out.

Love the artstation site btw, really nice and clean with a unique look and feel!

Best of luck with your development and projects.

Liam