Added case and article ids to AttachResult custom events (#77)

Added case and article ids to AttachResult custom events Added click event when attaching in AttachResult SNOW-364
coveo · Jul 7, 2020 · 53fe18a · 53fe18a
1 parent 9a11f1d
commit 53fe18a
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 19 deletions.
diff --git a/pages/attached_result.html b/pages/attached_result.html
@@ -79,7 +79,7 @@
                     <div class="coveo-result-frame">
                       <div class="CoveoResultActionsMenu">
                         <div class="CoveoQuickview"></div>
-                        <div class="CoveoAttachResult" data-attach-caption="Attach" data-detach-caption="Detach"></div>
+                        <div class="CoveoAttachResult" data-attach-caption="Attach" data-detach-caption="Detach" data-case-id="f00b4r"></div>
                       </div>
                       <div class="coveo-result-cell" style="vertical-align:top;text-align:center;width:32px;">
                         <span class="CoveoIcon" data-small="true" data-with-label="false"></span>

diff --git a/src/components/AttachResult/AttachResult.ts b/src/components/AttachResult/AttachResult.ts
@@ -23,6 +23,10 @@ export interface IAttachResultOptions {
     attachCaption?: string;
     /** Specifies the tooltip displayed when the result is already attached. */
     detachCaption?: string;
+    /** The field of the query result which represents the Article ID in the index, used for Usage Analytics purposes. */
+    articleIdField?: string;
+    /** Id of the record where the search is currently displayed, if any. */
+    caseId?: string;
     /** The function that is called when the user wants to attach a result. */
     attach?: (queryResult: IQueryResult) => Promise<void>;
     /** The function called when the user wants to un-link a result. */
@@ -50,6 +54,10 @@ export class AttachResult extends Component {
         detachCaption: ComponentOptions.buildStringOption({
             defaultValue: l(`${AttachResult.ID}_Detach`)
         }),
+        articleIdField: ComponentOptions.buildStringOption({
+            defaultValue: 'permanentid'
+        }),
+        caseId: ComponentOptions.buildStringOption(),
         attach: ComponentOptions.buildCustomOption(
             name => (result: IQueryResult) =>
                 new Promise<void>((resolve, reject) => {
@@ -116,6 +124,7 @@ export class AttachResult extends Component {
             .attach(this.queryResult)
             .then(() => {
                 this.attached = true;
+                this.usageAnalytics.logClickEvent(analyticsActionCauseList.caseAttach, {}, this.queryResult, this.element);
                 this.logAnalyticsCaseEvent(analyticsActionCauseList.caseAttach);
                 Coveo.$$(this.root).trigger(AttachResultEvents.Attach, { queryResult: this.queryResult } as IAttachResultEventArgs);
             })
@@ -194,11 +203,11 @@ export class AttachResult extends Component {
         let customData: IAnalyticsCaseAttachMeta = {
             resultUriHash: this.queryResult.raw.urihash,
             author: this.queryResult.raw.author,
-            articleID: null,
-            caseID: null
+            articleID: this.queryResult.raw[this.options.articleIdField],
+            caseID: this.options.caseId
         };
 
-        this.usageAnalytics.logCustomEvent<IAnalyticsCaseDetachMeta>(cause, customData, this.root);
+        this.usageAnalytics.logCustomEvent<IAnalyticsCaseDetachMeta>(cause, customData, this.element, this.queryResult);
     }
 
     protected render(): void {

diff --git a/tests/components/AttachResult/AttachResult.spec.ts b/tests/components/AttachResult/AttachResult.spec.ts
@@ -1,11 +1,12 @@
 import { AttachResult, IAttachResultOptions } from '../../../src/components/AttachResult/AttachResult';
 import { Mock, Fake } from 'coveo-search-ui-tests';
-import { IQueryResult, Logger } from 'coveo-search-ui';
+import { IQueryResult, Logger, analyticsActionCauseList } from 'coveo-search-ui';
 import { AttachResultEvents, IAttachResultEventArgs } from '../../../src/components/AttachResult/Events';
 
 describe('AttachResult', () => {
     let attachResult: Mock.IBasicComponentSetup<AttachResult>;
     let fakeResult = Fake.createFakeResult();
+    fakeResult.raw.article = 'foo';
 
     beforeAll(() => {
         Logger.disable();
@@ -94,14 +95,23 @@ describe('AttachResult', () => {
 
             attachSpy = spyOn(faker, 'attach').and.callThrough();
 
-            attachResult = Mock.optionsResultComponentSetup(
+            attachResult = Mock.advancedResultComponentSetup(
                 AttachResult,
-                {
-                    attach: faker.attach,
-                    detachCaption: 'detach me',
-                    attachCaption: 'attach me'
-                },
-                fakeResult
+                fakeResult,
+                new Mock.AdvancedComponentSetupOptions(
+                    document.createElement('div'),
+                    {
+                        attach: faker.attach,
+                        detachCaption: 'detach me',
+                        attachCaption: 'attach me',
+                        caseId: 'testcase',
+                        articleIdField: 'article'
+                    },
+                    env => {
+                        env.searchInterface.usageAnalytics = env.usageAnalytics;
+                        return env;
+                    }
+                )
             );
 
             attachResult.cmp.detach().then(() => {
@@ -145,6 +155,22 @@ describe('AttachResult', () => {
             });
             attachResult.cmp.attach();
         });
+
+        it('should log a click and attach event', async () => {
+            await attachResult.cmp.attach();
+            expect(attachResult.env.usageAnalytics.logClickEvent).toHaveBeenCalledWith(
+                analyticsActionCauseList.caseAttach,
+                jasmine.any(Object),
+                fakeResult,
+                attachResult.cmp.element
+            );
+            expect(attachResult.env.usageAnalytics.logCustomEvent).toHaveBeenCalledWith(
+                analyticsActionCauseList.caseAttach,
+                jasmine.objectContaining({ caseID: 'testcase', articleID: 'foo', resultUriHash: fakeResult.raw.urihash }),
+                attachResult.cmp.element,
+                fakeResult
+            );
+        });
     });
 
     describe('detach', () => {
@@ -159,14 +185,23 @@ describe('AttachResult', () => {
 
             detachSpy = spyOn(faker, 'detach').and.callThrough();
 
-            attachResult = Mock.optionsResultComponentSetup(
+            attachResult = Mock.advancedResultComponentSetup(
                 AttachResult,
-                {
-                    detach: faker.detach,
-                    detachCaption: 'detach me',
-                    attachCaption: 'attach me'
-                },
-                fakeResult
+                fakeResult,
+                new Mock.AdvancedComponentSetupOptions(
+                    document.createElement('div'),
+                    {
+                        detach: faker.detach,
+                        detachCaption: 'detach me',
+                        attachCaption: 'attach me',
+                        caseId: 'testcase',
+                        articleIdField: 'article'
+                    },
+                    env => {
+                        env.searchInterface.usageAnalytics = env.usageAnalytics;
+                        return env;
+                    }
+                )
             );
 
             attachResult.cmp.attach().then(() => {
@@ -210,6 +245,16 @@ describe('AttachResult', () => {
             });
             attachResult.cmp.detach();
         });
+
+        it('should log a detach event', async () => {
+            await attachResult.cmp.detach();
+            expect(attachResult.env.usageAnalytics.logCustomEvent).toHaveBeenCalledWith(
+                analyticsActionCauseList.caseDetach,
+                jasmine.objectContaining({ caseID: 'testcase', articleID: 'foo', resultUriHash: fakeResult.raw.urihash }),
+                attachResult.cmp.element,
+                fakeResult
+            );
+        });
     });
 
     describe('click', () => {