@internetarchive/collection-browser 2.1.4 → 2.1.5

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {

package/src/collection-browser.ts

@@ -890,20 +890,23 @@ export class CollectionBrowser
    * including the collapsible container (with header) and the facets themselves.
    */
   private get mobileFacetsTemplate(): TemplateResult {
-    const toggleFacetsVisible = () => {
+    const toggleFacetsVisible = (e: Event) => {
       this.isResizeToMobile = false;
       this.mobileFacetsVisible = !this.mobileFacetsVisible;
+
+      const target = e.target as HTMLDetailsElement;
+      this.analyticsHandler?.sendEvent({
+        category: this.searchContext,
+        action: analyticsActions.mobileFacetsToggled,
+        label: target.open ? 'open' : 'closed',
+      });
     };
 
     return html`
-      <details
-        id="mobile-filter-collapse"
-        @click=${toggleFacetsVisible}
-        @keyup=${toggleFacetsVisible}
-      >
+      <details id="mobile-filter-collapse" @toggle=${toggleFacetsVisible}>
         <summary>
           <span class="collapser-icon">${chevronIcon}</span>
-          <h2>Filters</h2>
+          <h2>${msg('Filters')}</h2>
           ${this.clearFiltersBtnTemplate(true)}
         </summary>
         ${this.facetsTemplate}

package/src/utils/analytics-events.ts

@@ -14,6 +14,7 @@ export enum analyticsActions {
   facetDeselected = 'facetDeselected',
   facetNegativeSelected = 'facetNegativeSelected',
   facetNegativeDeselected = 'facetNegativeDeselected',
+  mobileFacetsToggled = 'mobileFacetsToggled',
   partOfCollectionClicked = 'partOfCollectionClicked',
   histogramChanged = 'histogramChanged',
   histogramChangedFromModal = 'histogramChangedFromModal',

package/test/collection-browser.test.ts

@@ -15,7 +15,10 @@ import {
 } from '../src/models';
 import { MockSearchService } from './mocks/mock-search-service';
 import { MockAnalyticsHandler } from './mocks/mock-analytics-handler';
-import { analyticsCategories } from '../src/utils/analytics-events';
+import {
+  analyticsActions,
+  analyticsCategories,
+} from '../src/utils/analytics-events';
 import type { TileDispatcher } from '../src/tiles/tile-dispatcher';
 import type { CollectionFacets } from '../src/collection-facets';
 import type { EmptyPlaceholder } from '../src/empty-placeholder';
@@ -1227,6 +1230,69 @@ describe('Collection Browser', () => {
     expect(mobileFacets).to.exist;
   });
 
+  it('fires analytics when mobile facets toggled', async () => {
+    const searchService = new MockSearchService();
+    const analyticsHandler = new MockAnalyticsHandler();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .searchService=${searchService}
+        .analyticsHandler=${analyticsHandler}
+        .searchContext=${'foobar-context'}
+        .mobileBreakpoint=${9999}
+      ></collection-browser>`
+    );
+
+    el.baseQuery = 'collection:foo';
+    await el.updateComplete;
+
+    const contentContainer = el.shadowRoot?.querySelector(
+      '#content-container'
+    ) as HTMLElement;
+
+    el.handleResize({
+      target: contentContainer,
+      contentRect: contentContainer.getBoundingClientRect(),
+      borderBoxSize: [],
+      contentBoxSize: [],
+      devicePixelContentBoxSize: [],
+    });
+    await el.updateComplete;
+
+    const mobileFacets = el.shadowRoot?.querySelector(
+      '#mobile-filter-collapse'
+    ) as HTMLDetailsElement;
+    expect(mobileFacets).to.exist;
+
+    // We set up a Promise to wait for the 'toggle' event on the collapser,
+    // which is what triggers the analytics.
+    let facetsToggled = new Promise(resolve => {
+      mobileFacets.addEventListener('toggle', resolve);
+    });
+
+    // Open the mobile facets accordion & check analytics
+    const mobileFacetsHeader = mobileFacets.querySelector('summary');
+    expect(mobileFacetsHeader).to.exist;
+    mobileFacetsHeader!.click();
+    await facetsToggled;
+    expect(analyticsHandler.callCategory).to.equal('foobar-context');
+    expect(analyticsHandler.callAction).to.equal(
+      analyticsActions.mobileFacetsToggled
+    );
+    expect(analyticsHandler.callLabel).to.equal('open');
+
+    // Close the mobile facets accordion & check analytics
+    facetsToggled = new Promise(resolve => {
+      mobileFacets.addEventListener('toggle', resolve);
+    });
+    mobileFacetsHeader!.click();
+    await facetsToggled;
+    expect(analyticsHandler.callCategory).to.equal('foobar-context');
+    expect(analyticsHandler.callAction).to.equal(
+      analyticsActions.mobileFacetsToggled
+    );
+    expect(analyticsHandler.callLabel).to.equal('closed');
+  });
+
   it('sets parent collections to prop when searching a collection', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(