DEICH-5590: Tracking related content clicks.

deichman.no/components/DynamicList/DynamicList.js

@@ -25,6 +25,7 @@ const DynamicList = ({
   onFavourite,
   size,
   cardOptions,
+  tracker,
   children
 }) => {
   const numberOfItems = size || DEFAULT_SIZES[type];
@@ -68,6 +69,7 @@ const DynamicList = ({
               onFavourite={onFavourite}
               isHorizontal
               cardOptions={cardOptions}
+              tracker={tracker}
               hideFlagsList={["recommended", "liked"]}
             />
           )}
@@ -91,6 +93,7 @@ DynamicList.defaultProps = {
   favourites: [],
   size: null,
   cardOptions: {},
+  tracker: null,
   children: []
 };
 
@@ -105,6 +108,7 @@ DynamicList.propTypes = {
   onFavourite: PropTypes.func.isRequired,
   size: PropTypes.number,
   cardOptions: PropTypes.object,
+  tracker: PropTypes.object,
   children: PropTypes.node
 };
 

deichman.no/components/DynamicListFromAgent/DynamicListFromAgent.js

+/*
+  An <a> element with onClick but without href results in eslint warnings. The href
+  is added to the <a> element by the Link component, so we ignore the warnings.
+*/
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/interactive-supports-focus */
 import React from "react";
 import PropTypes from "prop-types";
 import Link from "next/link";
@@ -13,6 +19,12 @@ import {
   FEATURING,
   PRODUCTION_COMPANY
 } from "../../constants/roles";
+import {
+  createTracker,
+  CONTRIBUTOR,
+  SHOW_MORE
+} from "../tracker/RelatedContent";
+import addArgs from "../tracker/util";
 
 import { Block, Flex, Icon } from "@digibib/deichman-ui";
 
@@ -40,6 +52,8 @@ const DynamicListFromAgent = ({
     ? `?mediatype=mediaType_${translations[mediaType]}`
     : "";
 
+  const tracker = createTracker();
+
   return (
     <InlineSearch
       query={`${agentQuery}${mediaTypeQuery}`}
@@ -61,13 +75,21 @@ const DynamicListFromAgent = ({
               totalCount={data.totalHits}
               favourites={favourites}
               onFavourite={onFavourite}
+              tracker={addArgs(tracker, "click", CONTRIBUTOR, agentLabel)}
             />
             {displayLink && (
               <Flex align="center">
                 <Icon type="arrow-large-right" size="20" />
                 <Block left={2}>
                   <Link href={pLink.href} as={pLink.as}>
-                    <a>Se alt fra {agentLabel}</a>
+                    <a
+                      role="link"
+                      onClick={() =>
+                        tracker.click(CONTRIBUTOR, agentLabel, SHOW_MORE)
+                      }
+                    >
+                      Se alt fra {agentLabel}
+                    </a>
                   </Link>
                 </Block>
               </Flex>

deichman.no/components/DynamicListFromQuery/DynamicListFromQuery.js

@@ -10,6 +10,7 @@ const DynamicListFromQuery = ({
   title,
   inheritRouterQuery,
   randomizeHits,
+  tracker,
   children
 }) => (
   <InlineSearch
@@ -27,6 +28,7 @@ const DynamicListFromQuery = ({
         totalCount={data.totalHits}
         favourites={favourites}
         onFavourite={onFavourite}
+        tracker={tracker}
       >
         {children}
       </DynamicList>
@@ -38,6 +40,7 @@ DynamicListFromQuery.defaultProps = {
   type: "standard",
   inheritRouterQuery: true,
   randomizeHits: false,
+  tracker: null,
   children: []
 };
 
@@ -47,6 +50,7 @@ DynamicListFromQuery.propTypes = {
   query: PropTypes.string.isRequired,
   randomizeHits: PropTypes.bool,
   title: PropTypes.string.isRequired,
+  tracker: PropTypes.object,
   children: PropTypes.node
 };
 

deichman.no/components/PublicationRelatedContent/PublicationRelatedContent.js

@@ -12,6 +12,8 @@ import {
   FEATURING,
   PRODUCTION_COMPANY
 } from "../../constants/roles";
+import { createTracker, POPULAR } from "../tracker/RelatedContent";
+import addArgs from "../tracker/util";
 
 import { Block } from "@digibib/deichman-ui";
 
@@ -74,6 +76,8 @@ export default function PublicationRelatedContent({ publication }) {
     </Block>
   ));
 
+  const popularRelatedContentTracker = createTracker();
+
   return (
     <>
       {workSeriesContent}
@@ -85,6 +89,7 @@ export default function PublicationRelatedContent({ publication }) {
           title="Andre har også lånt"
           inheritRouterQuery={false}
           randomizeHits
+          tracker={addArgs(popularRelatedContentTracker, "click", POPULAR)}
         />
       </Block>
     </>

deichman.no/components/SearchResults/SearchResults.js

@@ -9,6 +9,7 @@ import SearchFilters from "../SearchFilters";
 import WorkGrid from "../WorkGrid";
 import WorkList from "../WorkList";
 import NoHitsMessage from "./NoHitsMessage";
+import addArgs from "../tracker/util";
 
 import { Container, Block, ShowMore, Loader } from "@digibib/deichman-ui";
 
@@ -121,9 +122,7 @@ class SearchResults extends Component {
             </h2>
             <WorkComponent
               items={hits}
-              tracker={{
-                click: tracker.click.bind(null, searchQuery)
-              }}
+              tracker={addArgs(tracker, "click", searchQuery)}
               totalCount={results.totalHits}
               favourites={favourites}
               onFavourite={onFavourite}

deichman.no/components/WorkGrid/WorkGrid.js

@@ -10,6 +10,7 @@ import ExpandCollapseButton from "../Grid/ExpandCollapseButton";
 import GridUl from "../Grid/GridUl";
 import { useRef } from "react";
 import ScrollIndicator from "../Grid/ScrollIndicator";
+import addArgs from "../tracker/util";
 
 export default function WorkGrid({
   headline,
@@ -21,7 +22,7 @@ export default function WorkGrid({
   hideFlagsList,
   noHits = false,
   small = false,
-  tracker = { click: () => {} },
+  tracker,
   cardOptions,
   totalCount,
   isHorizontal = false,
@@ -72,9 +73,7 @@ export default function WorkGrid({
                 showFavorite={showFavorite}
                 onFavourite={onFavourite}
                 hideFlagsList={hideFlagsList}
-                tracker={{
-                  click: tracker.click.bind(null, item.fullTitle, index)
-                }}
+                tracker={addArgs(tracker, "click", item.fullTitle, index)}
                 options={cardOptions}
               />
             </li>

deichman.no/components/WorkList/WorkList.js

@@ -3,6 +3,8 @@ import autoBind from "auto-bind";
 import PropTypes from "prop-types";
 
 import WorkCard from "../WorkCard";
+import addArgs from "../tracker/util";
+
 import { Block, ShowMore } from "@digibib/deichman-ui";
 
 import "./styles.css";
@@ -30,7 +32,7 @@ class WorkList extends Component {
       favourites,
       onFavourite,
       showMoreLabel: showMoreLabelOverride,
-      tracker = { click: () => {} }
+      tracker
     } = this.props;
 
     const { expanded } = this.state;
@@ -52,9 +54,7 @@ class WorkList extends Component {
                   favourites={favourites}
                   showFavorite={showFavorite}
                   onFavourite={onFavourite}
-                  tracker={{
-                    click: tracker.click.bind(null, item.fullTitle, index)
-                  }}
+                  tracker={addArgs(tracker, "click", item.fullTitle, index)}
                 />
               </li>
             ))}

deichman.no/components/WorkSeriesPublicationList/WorkSeriesPublicationList.js

+/*
+  An <a> element with onClick but without href results in eslint warnings. The href
+  is added to the <a> element by the Link component, so we ignore the warnings.
+*/
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/interactive-supports-focus */
 import React from "react";
 import PropTypes from "prop-types";
 import autoBind from "auto-bind";
@@ -11,6 +17,12 @@ import { fullTitle } from "../../utilities/title";
 import { pageLinkFromUri } from "../../utilities/pageLink";
 import { translations } from "../../constants/translations";
 import { toggleFavourites } from "../../store/application";
+import {
+  createTracker,
+  SHOW_MORE,
+  WORKSERIES
+} from "../tracker/RelatedContent";
+import addArgs from "../tracker/util";
 
 import { Block, Flex, Icon } from "@digibib/deichman-ui";
 
@@ -28,6 +40,7 @@ class WorkSeriesPublicationList extends React.Component {
       isLoading: true
     };
     autoBind(this);
+    this.tracker = createTracker();
   }
 
   componentDidMount() {
@@ -86,13 +99,21 @@ class WorkSeriesPublicationList extends React.Component {
           favourites={favourites}
           onFavourite={this.handleFavourite}
           cardOptions={cardOptions}
+          tracker={addArgs(this.tracker, "click", WORKSERIES, workSeriesLabel)}
         />
         {displayLink && (
           <Flex align="center">
             <Icon type="arrow-large-right" size="20" />
             <Block left={2}>
               <Link href={pLink.href} as={pLink.as}>
-                <a>Se alt fra {workSeriesLabel}</a>
+                <a
+                  role="link"
+                  onClick={() =>
+                    this.tracker.click(WORKSERIES, workSeriesLabel, SHOW_MORE)
+                  }
+                >
+                  Se alt fra {workSeriesLabel}
+                </a>
               </Link>
             </Block>
           </Flex>

deichman.no/components/tracker/RelatedContent.js

+import { sendEvent } from "../../utilities/analytics";
+
+// types
+const CONTRIBUTOR = "contributor";
+const POPULAR = "popular";
+const WORKSERIES = "workseries";
+
+const SHOW_MORE = "SHOW_MORE";
+
+function createTracker() {
+  return {
+    click(relatedContentType, name, detail) {
+      sendEvent({
+        eventValue: name,
+        eventCategory: "related_content",
+        eventAction: "related_content_click",
+        eventLabel: relatedContentType,
+        cd1: detail
+      });
+    }
+  };
+}
+
+export { createTracker, CONTRIBUTOR, POPULAR, SHOW_MORE, WORKSERIES };

deichman.no/components/tracker/util.js

+/*
+  Add args to a tracker function. Returns a copy of the tracker with an
+  updated version of the function.
+  
+  Used when trackers are passed down the component hierarchy and args
+  need to be added at different levels.
+*/
+export default function addArgs(tracker, func, ...args) {
+  // create dummy if tracker doesn't exist
+  const newTracker = !tracker ? {} : { ...tracker };
+
+  // add function if it's missing
+  if (!newTracker[func]) {
+    newTracker[func] = () => {};
+  }
+
+  // bind new args to the function
+  newTracker[func] = newTracker[func].bind(null, ...args);
+
+  return newTracker;
+}