patternjavascriptMinor
AngularJs and Google Bot experiment
Viewed 0 times
angularjsgoogleexperimentbotand
Problem
I have learned the question of solving Angular app optimization for search engines, and was frustrated that the most recommended option is prerendering HTML.
After some time spent, I suggested to create a directive that will load the bot after rendering templates or update scope.
Directive:
In controller:
```
//get some data from server a
After some time spent, I suggested to create a directive that will load the bot after rendering templates or update scope.
Directive:
angular.module('test', []).directive('seoBot', ['$timeout', function($timeout){
return {
link: function($scope, element, attrs) {
//publish event
$scope.$on('runbot', function(){
//hint for start after render
$timeout(function () {
//find previos google's bot
var googleBot = document.getElementById('googleBot');
//if found - remove
if(googleBot) googleBot.parentNode.removeChild(googleBot);
//this is standard code from GA, but with ID "googleBot"
(function(i,s,o,g,r,a,m){
i['GoogleAnalyticsObject']=r;
i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)
},i[r].l=1*new Date();
a=s.createElement(o),
m=s.getElementsByTagName(o)[0];
a.id="googleBot";
a.async=1;
a.src=g;
m.parentNode.insertBefore(a,m);
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-46685745-1', 'rktdj.com');
ga('send', 'pageview');
//log that bot is loaded
console.log("seo-bot loaded");
//check page to be rendered completely
console.log(document.body.innerHTML);
}, 0, false);
});
}
};
}]);In controller:
```
//get some data from server a
Solution
As you found yourself, this has to work.
I only have 2 minor nitpickings:
Very nice code.
I only have 2 minor nitpickings:
- Do not use
console.log()in production code..
- You are not using
elementandattrs, you might as well declarefunction($scope)
Very nice code.
Context
StackExchange Code Review Q#40364, answer score: 2
Revisions (0)
No revisions yet.