Merge pull request #2082 from hashicorp/br-events

Fathom Event Tracking

Author: Dhaulagiri

website/app/components/doc/link-with-icon/index.hbs

@@ -4,13 +4,26 @@
 }}
 
 {{#if @route}}
-  <LinkTo class={{this.classNames}} @route={{@route}} @models={{this.models}} ...attributes>
+  <LinkTo
+    class={{this.classNames}}
+    @route={{@route}}
+    @models={{this.models}}
+    ...attributes
+    {{on "click" (fn this.eventTracking.trackEvent @eventName)}}
+  >
     {{@label}}
     <FlightIcon class="doc-link-with-icon__icon" @name={{@icon}} />
   </LinkTo>
 {{/if}}
 {{#if @href}}
-  <a class={{this.classNames}} href={{@href}} target="_blank" rel="noopener noreferrer" ...attributes>
+  <a
+    class={{this.classNames}}
+    href={{@href}}
+    target="_blank"
+    rel="noopener noreferrer"
+    {{on "click" (fn this.eventTracking.trackEvent @eventName)}}
+    ...attributes
+  >
     {{@label}}
     <FlightIcon class="doc-link-with-icon__icon" @name={{@icon}} />
   </a>

website/app/components/doc/link-with-icon/index.js

@@ -4,8 +4,11 @@
  */
 
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
 
 export default class DocLinkWithIconComponent extends Component {
+  @service eventTracking;
+
   get models() {
     // we need to use this trick to overcome the problem of `<LinkTo>` going beserk if we pass
     // a `@model` argument which is undefined (while an empty `@models` array is OK)

website/app/services/event-tracking.js

@@ -0,0 +1,16 @@
+import Service from '@ember/service';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class EventService extends Service {
+  @service fastboot;
+
+  @action
+  trackEvent(eventName) {
+    // Only attempt to do something if we are in the right environment
+    if (!this.fastboot.isFastBoot && window.fathom && eventName) {
+      // https://usefathom.com/docs/features/events
+      window.fathom.trackEvent(eventName);
+    }
+  }
+}

website/app/templates/index.hbs

@@ -16,18 +16,21 @@
           @label="Release Notes"
           @icon="arrow-right"
           @isAnimated={{true}}
+          @eventName="Hero - Release Notes"
         />
         <Doc::LinkWithIcon
           @href="https://go.hashi.co/hds-rollout"
           @label="Helios Roadmap"
           @icon="external-link"
           @isAnimated={{true}}
+          @eventName="Hero - Roadmap"
         />
         <Doc::LinkWithIcon
           @href="https://go.hashi.co/hds-feedback"
           @label="Share Feedback"
           @icon="external-link"
           @isAnimated={{true}}
+          @eventName="Hero - Feedback"
         />
       </div>
     </div>
@@ -44,6 +47,7 @@
             @fillParent={{true}}
             @isAnimated={{true}}
             aria-label={{concat "Explore " card.title ": " card.description}}
+            @eventName={{concat "Card - " card.title}}
           />
         </li>
       {{/each}}