In this example, a route change mbox will fire when you click View2 in the top right corner. The response will deliver a Target offer which will replace the content below.

• Details

  Adobe Target Angular ngRoute Extension

  Prerequisites:

  1. at.js library
  2. AngularJS library
  3. Angular ngRoute library

  NgRoute Extension Integration:

  1. Copy at-angular-ng-route-0.1.0+common.min.js file to your server
  2. Add the above file to the end of at.js in the Target Tool configuration of DTM. Or, include it in your HTML after angular.js and at.js
  3. Initialize with adobe.target.ext.angular.initRoutes method by passing your Angular module as an argument. In DTM you might need to include this as a Sequential Javascript snippet in a Page Load Rule triggered at the Bottom of the Page.
     

         adobe.target.ext.angular.initRoutes(sampleApp);
                                 

     or example with all available options:

     
         adobe.target.ext.angular.initRoutes(sampleApp, // Angular module, object reference or string, required 
             {
                 mbox: 'spa-demo-mbox',                 // Target mbox name, optional
                 selector: '#view2 .offer',             // CSS selector to inject Target content to, optional
                 params: {param1:'val1',param2:'val2'}, // Target mbox parameters, optional
                 //timeout: 500,                        // Target call timeout
                 allowedRoutesFilter: ['/view2'],       // Blank for all routes or restrict to specific routes: ['/','/about','/item/:id']
                 disallowedRoutesFilter: ['/view1'],    // Exclude specific routes: ['/login','/privacy']
                 debug: true                            // Print console statements
             });
                                 

  How It Works:

  The extension distribution consists of:

  1. Angular Common Adobe Target at.js extension
     - target.angular.common Angular module wraps at.js API as well as exposes several helper providers
     - The at.js API methods include adobe.target.getOffer and adobe.target.applyOffer, which are exposed as offerService.getOfferPromise and offerService.applyOfferPromise promise wrappers
  2. Angular ngRoute Adobe Target extension
     - Uses target.angular.common's routeService and offerService to apply Target calls to specified routes.
     - Uses Angular $viewContentLoaded event to apply Target response.

  All at.js Target calls are asynchronous. The idea behind this extension implementation is to take advantage of promises, which resolve on Angular application route changes by delivering Target response. This happens before DOM is updated with new content. To inject the new Target response into DOM, we use $viewContentLoaded event. This allows us to avoid page flicker, since the new HTML and new Target response are added to DOM almost at the same time.