We are building an AngularJS web app and we are trying to integrate DFP ads. By the way, we already have a PHP web app with DFP ads running so I am familiar with how DFP integration works, but of course it is different on an AngularJS app, due to its front end loading nature. So, I know there are three components we need to get working:
In the <head>:
The DFP tag for either sync or async, as shown here, https://support.google.com/dfp_sb/answer/1651549. I know Google recommends async, but recently on our PHP app we had to switch to sync, since async doesn't support rich media, and we were also facing some reporting discrepancies with async. So, with an AngularJS app, can we still use sync, or only async?
The DFP tag in which we define the ad slots, and also call the enableServices, singleRequest or syncRendering, etc. By the way, we want to have dynamically populated ad slots per page (app state), so we have to figure that out.
, and in the <body>:
The tags for displaying the ads for the ad divs. On an AngularJS app would it work with .display() or would we need to call the .refresh() method?
Any help is much appreciated, thanks in advance.
Cheers,
Iraklis
Try this ngDfp
ngDfp is a simple library for Angular JS that allows you to add DoubleClick for Publishers tags to your Angular site.
To show an ad, use
<div data-ng-dfp-ad="div-gpt-ad-1234567890123-0"></div>
Related
I'm currently building a web app using Laravel 5.1 and would like to start creating a native application so that my users can use their phones. I have decided that using the Ionic Framework is likely the best approach for the app and just have a few questions on marrying the two together.
I've got routes in Laravel that looks like this example:
app.dev/geckos - This is a GET request.
Which takes the currently authenticated user, uses their ID and fetches all geckos that match their user ID. It does return a blade view however.
I assume that when working with something like Ionic, the GET request would need to return JSON instead on order to loop through properly?
Is there a way that I can alter my controller to serve JSON based on if the route was something like this instead:
app.dev/api/v1/geckos
Both routes would use the GeckoController#index method, ideally I just don't want to repeat the code.
I'm fairly new to Laravel and very new to Ionic. So if I'm over complicating this theory please let me know.
Any information is appreciated on this,
Andy
Another solution which I used is to have 1. application in Laravel, which is a RESTful JSON API. Then you would have 2. Web app (in AngularJS) and 3. Mobile app in Ionic (which is based on AngularJS).
So you will create two separate applications, mobile and web, which both communicate with the same JSON API. The web would be a single-page AngularJS application, so that way you can reuse all the Angular services which communicate with the API, maybe even some controllers between your mobile Ionic and Web application.
You will save some time when creating two separate responses for mobile/web application, since you would create only one: JSON response. AngularJS will take care of rendering in both applications, that way you won't have to create separate templates for web applications in Blade, instead make all the rendering using Angular in both applications. There will be some nuances in rendering of the same content in Web and Mobile app, but it would only require creating separate js directives/css styles/html templates for both applications, using Blade you wouldn't be able to reuse any view related code between applications. Also you will be able to use the same Authentication method for both applications.
To sum up, this solution should be cleaner then your solution because you will be able to reuse backend entirely between the applications, reuse a lot of fronted stuff (like input validation code, services, filters,..), reuse Authentication and introduce looser coupling and have much clearer structure then the ugly response type switch in controllers.
EDIT:
So this can be a rough example of the structure of such project:
1. API - REST in Laravel, returning JSON
-Controllers
-Session // actions CREATE, DELETE
-User // actions CREATE, VIEW, UPDATE, DELETE..
-Gecko
2. JS application - Angular App, for both mobile and web app
-common //controllers, services, filters - most of the frontend logic which reusable between both applications
-controllers.js
-services.js
-filters.js
-mobile //this part can be hosted on some server or part of the mobile application
-app.js //separate configs for mobile app
-controllers.js //controllers only for mobile app
-directives.js
-web
-app.js //separate configs for web app (links to HTML template URLS,...)
-controllers.js //controllers only for web app
-directives.js
-services.js //or even services only for web app
3. WEB APP
-HTML Templates - bunch of static .HTML files
-Home
-Login
-Register
-Gecko
-Gecko Views...
-Some index file with layout template, which includes everything from js/common and js/web, entry point to your web application
4. MOBILE APP
-www
-index.html // must include everything from js/common and js/mobile
-templates
-Gecko
-Gecko Views...
But the structure may vary significantly, depending on what part of mobile application you want to have hosted on web server and which should be available offline, or how you want to host it, how detailed the structure might be..
Doing this would be messy because your single controller action will be returning two totally different responses.
However if you go down this route, you could add an additional header to the request from the mobile app, and then check for this to switch the response.
I've been studying the difference between single page apps and multi page apps, and I think I have good view how they differ. Single page app starts by loading a single html page, and then it does never again fully refresh the page or override the original, unless the application is otherwise refreshed (browser refresh etc.) For example, the angularJS seed project: angular-seed has an index.html file. This file is the single page, that the server would send to front-end, and after that, all the other (possible) pages will be send asynchronously under the hood by using AJAX. So if you create app just with the angularjs seed, it is always going to be just a SPA application, am I right?
How in practice would you then create a multipage application with angularjs? Wouldn't you need multiple angularJS applications then? Would you have to have a separate routing for each of those angularJS applications? And why would one want to make multipage application for angularJS? Because one could always use the first index.html just as a shell, without real content, and then have separate container-pages for different pages. Could it be said that angularJS multipage app would be an application, that would just contain many SPA angularJS applications? In SPA, can you use the browsers' back-button, in order to go back to last view?
Yes, you've got the idea of SPA and MPA right.
Angular.js enables you to create SPAs but does not force you. In an MPA, I would not speak of multiple Angular applications since you would have just spread Angular.js modules over multiple HTML pages. The page flow or routing logic would then be in Angular.js controllers, in plain hyperlinks or in the backend on the server.
There might be reasons to not put a whole application under Angular.js. Maybe the authentication part of a web application might be Held separately for some reasons...
In SPAs you definitely can use the browser's back button. You just have to implement that somehow. Twitter solves this Problem by coding the state of its web application into the URL - if you're using Twitter, you might have noticed the symbols (#!) in the address bar.
I am displaying internationalized strings within a Polymer element as follows:
<div>
<span class="content">{{myContent}}</span>
</div>
... and have the following dart code:
#observable String myContent;
//...
void onUpdateLocale(_locale) {
myContent = getMyContent();
}
//...
getMyContent() => Intl.message('All my content ...', name:'myContent',
desc: 'This is my content',
args: [],
examples: {'None' : 0});
However; when Google crawls the app, it only pulls "{{myContent}}" and not its interpolated value, the actual internationalized content. Is there a way to work around this and make an internationalized Polymer.dart app that is also SEO-friendly?
Its not really clear. Although recently Google announced that they are evaluating Javascript to index the page, I've not seen any deep evaluation of how this compares to the server rendered pages approach.
And then there is the issue of non Google search engines like Bing.
Polymer as it stands today doesn't really do server side rendering and as far as I can tell the team doesn't have plans to offer than in the near future.
If your project/business depends on SEO I would not risk using polymer.
You have two options to address this issue:
Use phantom.js to render the page on server side whenever a crawler is requesting the page.
Use a third party service like ajaxsnapshots.
Forget polymer and use react.js component framework. React has a way to render the virtual DOM on the server side. This will work seamlessly if you are using node.js frameworks. It should be possible with JVM frameworks as well as Java 6+ ships with a Javascript engine (vastly improved in Java 8. Google "nashhorn").
Google have a spec that lets you serve snapshots of your page's HTML after all necessary Javascript (or Dart) has run to search engines: https://developers.google.com/webmasters/ajax-crawling/
The basic idea is to render the pages on the server side and then follow a set of URL conventions that lets you serve search engines the pre-generated HTML in a way that they wont confuse with cloaking.
Google, Bing, Yandex and some social bots support this spec.
You can implement this spec yourself or use a service that does it for you (I work for one of these: https://ajaxsnapshots.com) The solution is typically plugged in at web server level so you don't need to make any changes to your app.
So, I don't know much about Polymer, aside from the documentation on databinding I just viewed. It seems fairly similar to AngularJS by Google, in that it is using JavaScript in a declarative way to render data into an HTML document. That being the case, the browser is still fundamentally seeing the underlying calls to {{something}} as just a raw string. The JS libraries are then what change that data into text on the screen.
That being the case, you might consider handling SEO like Angular developers do. Here is the definitive resource on the subject: http://www.yearofmoo.com/2012/11/angularjs-and-seo.html
Non-SPA AJAX Partials for SEO
Sadly, 101% of the Angular SEO examples assume the use of a singe-page-application (SPA). My app is not a SPA. Currently, my stack is:
Node/Express - for routing and rendering Jade templates. The URLs are real, and don't use HTML pushstate, hash-bang or anything similar. for this reason, url-escaped-fragment won't work for me (I don't think)
Angular for communicating with my RESTful API(s)
My problem is that my page itself only includes pieces that are loaded via AJAX—the rest of page is rendered server side. Node/Express is not responsible for any of this logic, Angular pulls in the data that will be in my first h1.
Google Bot and similar see: <h1>{{this_unrendered_string}}</h1> which is no good.
Has anyone come up with any clever solutions for working around this scenario?
FWIW I found a service called SEO.js that will host a rendered version of any page I pass to it. If I could just tell GoogleBot and similar "Hey, don't use this page, use this page instead" But I'm not entirely sure how SEO feels about a different host serving content. Maybe some trickery could work here..
Google have documented an approach to "Making AJAX Applications Crawlable" here. https://developers.google.com/webmasters/ajax-crawling/
Implementing this isn't completely simple (basically you have to run a headless browser and return the HTML snapshots in response to specially formatted requests by Google).
It's not a simple as just returning a snapshot when you detect GoogleBot, but doing it this way probably eliminates any risk of being penalized.
There are a few companies that offer this a service - I'm getting on well with this one: https://ajaxsnapshots.com - they say that Bing and Yandex (Russian search engine) support it too.
AjaxSnapshots have an API you can use to tell them when your page is ready to snapshot - you could call that after all of your client side rendering is done.
I'm continuing my research on solutions for our organization for our mobile app strategy. There's two somewhat conflicting requirements:
it should be a web app in that all updates for users are immediate as we update the app on the server
the app should leverage native UI widgets and native device features as much as possible
With PhoneGap, the process appears to be that you'd normally keep the UI on the device, as part of the compiled app, and you'd hit your server via AJAX to deal with the data updates and submissions. That then gives you access to the native device's UI widgets and features using the PhoneGap API into their hooks.
However, in doing that, we lose bullet point one.
My question is if one can, using PhoneGap, create a 'web view' within the app that would allow us to keep the UI on our server (the app then pretty much becomes a custom browser). And, if so, could our UI still access the device's native functionality via PhoneGap's API or is that only accessible if we compiled our UI code?
A similar question came up on the PhoneGap Google Group recently.
One thing that came up was that you are unlikely to pass app store certification if you are loading UI and core functionality from a remote server as this invalidates much of the purpose of certification.
If you're going to do this, you should set up web services that return the content you want to display to users. Then you can use jQuery Mobile and PhoneGap to take the content returned from the server and display it on the application with the appropriate native UI widgets and features that you want.
So use jQuery Mobile to hit your server for data using something like:
var fileUrl = "http://www.mywebserver.com/servedevice?data=current&selection=fresh";
$.ajax({
url: fileUrl,
dataType: "html",
success: function( html ) {
// If the call succeeds, do something with the return value here
}
});
There are many other ways you can handle it including JSONP methods. See the documentation for details:
http://api.jquery.com/jQuery.ajax/
Another approach would be to point your HTML file at a server for the JavaScript, just like a CDN file load. Then, your app's JavaScript would be loaded at runtime instead of bundled into the app. However, when it actually runs, it is running within the PhoneGap WebView so it has access to all of the PhoneGap APIs.
This is the jQuery Mobile example:
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>