Merge 5207b6e into 6402079

cards/card_component.js

@@ -26,6 +26,12 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component {
         })
       );
     }
+
+    const rtfElement = this._container.querySelector('.js-yxt-rtfValue');
+    if (rtfElement) {
+      const fieldName = rtfElement.dataset.fieldName;
+      rtfElement.addEventListener('click', e => this._handleRtfClickAnalytics(e, fieldName));
+    }
   }
 
   setState(data) {
@@ -84,6 +90,38 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component {
     );
   }
 
+  /**
+   * A click handler for links in a Rich Text attriubte. When such a link is
+   * clicked, an {@link AnalyticsEvent} needs to be fired.
+   *
+   * @param {MouseEvent} event The click event.
+   * @param {string} fieldName The name of the Rich Text field used in the
+   *                           attriubte.
+   */
+   _handleRtfClickAnalytics (event, fieldName) {
+    const ctaType = event.target.dataset.ctaType;
+    if (!ctaType) {
+      return;
+    }
+
+    const analyticsOptions = {
+      directAnswer: false,
+      verticalKey: this.verticalKey,
+      searcher: this._config.isUniversal ? 'UNIVERSAL' : 'VERTICAL',
+      entityId: this.result.id,
+      url: event.target.href
+    };
+    if (!fieldName) {
+      console.warn('Field name not provided for RTF click analytics');
+    } else {
+      analyticsOptions.fieldName = fieldName;
+    }
+
+    const analyticsEvent = new ANSWERS.AnalyticsEvent(ctaType);
+    analyticsEvent.addOptions(analyticsOptions);
+    this.analyticsReporter.report(analyticsEvent);
+  }
+
   static get type() {
     return `{{componentName}}`;
   }

directanswercards/card_component.js

@@ -67,6 +67,9 @@ BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component {
         });
       }
     }
+
+    const rtfElement = this._container.querySelector('.js-yxt-rtfValue');
+    rtfElement && rtfElement.addEventListener('click', e => this._handleRtfClickAnalytics(e));
   }
 
   /**
@@ -145,6 +148,32 @@ BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component {
     );
   }
 
+  /**
+   * A click handler for links in a Rich Text Direct Answer. When such a link
+   * is clicked, an {@link AnalyticsEvent} needs to be fired.
+   *
+   * @param {MouseEvent} event The click event.
+   */
+  _handleRtfClickAnalytics (event) {
+    if (!event.target.dataset.ctaType) {
+      return;
+    }
+    const ctaType = event.target.dataset.ctaType;
+
+    const analyticsOptions = {
+      verticalKey: this.verticalConfigId,
+      directAnswer: true,
+      fieldName: this.answer.fieldApiName,
+      searcher: 'UNIVERSAL',
+      entityId: this.associatedEntityId,
+      url: event.target.href
+    };
+
+    const analyticsEvent = new ANSWERS.AnalyticsEvent(ctaType);
+    analyticsEvent.addOptions(analyticsOptions);
+    this.analyticsReporter.report(analyticsEvent);
+  }
+
   /**
    * Returns the type of component
    */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "answers-hitchhiker-theme",
-  "version": "1.22.0",
+  "version": "1.22.1",
   "description": "A starter answers theme for hitchhikers",
   "scripts": {
     "test": "cross-env NODE_ICU_DATA=node_modules/full-icu jest --verbose",

static/package.json

@@ -1,6 +1,6 @@
 {
   "name": "answers-hitchhiker-theme",
-  "version": "1.22.0",
+  "version": "1.22.1",
   "description": "Toolchain for use with the HH Theme",
   "main": "Gruntfile.js",
   "scripts": {