HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

AngularJs and Google Bot experiment

Submitted by: @import:stackexchange-codereview··
0
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:

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:

  • Do not use console.log() in production code..



  • You are not using element and attrs, you might as well declare function($scope)



Very nice code.

Context

StackExchange Code Review Q#40364, answer score: 2

Revisions (0)

No revisions yet.