Implement Adword Conversion with AngularJs

Using a directive:

This solution implies that you must include the directive in each and every one of your views, which is an ideal solution for when you are trying only to track some views not your complete application.

First you include the google script in your index.html

<script type="text/javascript" src="https://www.googleadservices.com/pagead/conversion_async.js" charset="utf-8">

Then you include a constant with all the configurations of your business

angular.module('app')
    .constant('googleAdsSettings', {
               google_conversion_id: 999999999, 
               google_conversion_label: 'XXXXXXXXXXXXXXXXXXX',
               google_remarketing_only: false
    });

Then you declare your directive in this way

angular.module('app')
    .directive('trackPage', function($window, googleAdsSettings) {
        return {
            restrict: 'E',
            link: function() {
                $window.google_trackConversion(googleAdsSettings);
            }
        };        
    });

This means that every time the directive is found, a function is executed that calls the google_trackConversion function that is included in the google script that will do the conversion.

Demo:

angular.module('app', [])

angular.module('app')
  .constant('googleAdsSettings', {
    google_conversion_id: 999999999,
    google_conversion_label: 'XXXXXXXXXXXXXXXXXXX',
    google_remarketing_only: false
  });

angular.module('app')
  .directive('trackPage', function($window, googleAdsSettings) {
    return {
      restrict: 'E',
      link: function() {
        $window.google_trackConversion(googleAdsSettings);
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript" src="https://www.googleadservices.com/pagead/conversion_async.js" charset="utf-8"></script>
<div ng-app="app">
  <track-page></track-page>
</div>

Using a factory:

This solution is very practical when you want to call from a controller or from an event such as the event $locationChangeSuccess that is triggered every time you navigate to a new page;). You follow the same steps as in the previous solution but instead of declaring a directive.

angular.module('app')
    .factory('trackPage', function($window, googleAdsSettings) {
        return function() {
            $window.google_trackConversion(googleAdsSettings);
        };
    })
    .run(function($rootScope, trackPage) {
        $rootScope.$on('$locationChangeSuccess', function() {
            trackPage();
        })
    });

Very similar to the previous one but the call to the function is encapsulated in a factory and executed in the $locationChangeSuccess event when the new view has already been shown

Do not use angular at all:

What? Well yes, remember that google includes a <noscript> that contains a tracking pixel for when javascript is disabled on the page so you can include this in each of your views and it will work in the same way as the directive without having to write anything of code.

You just have to remove the <noscript> tag and use the content directly to make it work (Remember that the <noscript> tag only works when javascript is disabled).

<div style="display:inline;">
    <img height="1" width="1" style="border-style:none;" alt="" 
        src="//www.googleadservices.com/pagead/conversion/999999999/?label=XXXXXXXXXXXXXXXXXXX&amp;guid=ON&amp;script=0"/>
</div>

The bad part of this solution is that you must remember to pass all the parameters in the attribute src (or maybe make another directive for this XD) so I only recommend it when you want to trace a single page without having to write anything of code or as a replacement for the directive of the first solution.