samples/intercom.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <title>Intercom sample | Angulartics</title>
  <link rel="stylesheet" href="//bootswatch.com/cosmo/bootstrap.min.css">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
  <script src="../src/angulartics.js"></script>
  <script src="../src/angulartics-intercom.js"></script>
  <script>
    window.intercomSettings = {
      widget: {
        activator: "[href$='intercom.io']"
      },
      user_id: "1",
      app_id: ""
    };

  (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://static.intercomcdn.com/intercom.v1.js';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
  </script>

</head>
<body ng-app="sample">

<div class="navbar navbar-default">
  <div class="navbar-header">
    <a class="navbar-brand" href="#/">My App</a>
  </div>
  <div>
    <ul class="nav navbar-nav">
      <li><a href="#/a">Page A</a></li>
      <li><a href="#/b">Page B</a></li>
      <li><a href="#/c">Page C</a></li>
    </ul>
  </div>
</div>

<div class="container">
  <div ng-view></div>
  <hr>

  <button analytics-on="click" analytics-event="Button 1" analytics-category="Commands" class="btn btn-default">Button 1</button>

  <!-- same as analytics-on="click", because 'click' is the default -->
  <button analytics-on analytics-event="Button 2" analytics-category="Commands" class="btn btn-primary">Button 2</button>

  <!-- same as analytics-event="Button 3", because is inferred from innerText -->
  <button analytics-on analytics-category="Commands" class="btn btn-success">Button 3</button>

  <!-- note that analytics-category is never inferred, and is required by GA... if you leave it out, no event will be tracked -->
  <button analytics-on analytics-category="Commands"  analytics-label="Button4 label" analytics-value="1" class="btn btn-info">Button 4</button>
  <hr>

  <p class="alert alert-success">
    Open the network inspector in your browser, click any of the nav options or buttons above and you'll see the analytics
    request being executed. Then check <a class="alert-link" href="https://app.intercom.io">your Intercom dashboard</a>.
  </p>
</div>

<script>
  angular.module('sample', ['angulartics', 'angulartics.google.analytics'])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', { templateUrl: '/samples/partials/root.tpl.html', controller: 'SampleCtrl' })
      .when('/a', { templateUrl: '/samples/partials/a.tpl.html', controller: 'SampleCtrl' })
      .when('/b', { templateUrl: '/samples/partials/b.tpl.html', controller: 'SampleCtrl' })
      .when('/c', { templateUrl: '/samples/partials/c.tpl.html', controller: 'SampleCtrl' })
      .otherwise({ redirectTo: '/' });
  })
  .controller('SampleCtrl', function () {});
</script>
</body>
</html>