Commit a6c3010f authored by Magnus Westergaard's avatar Magnus Westergaard
Browse files

DEICH-5590: Tracking related content clicks.

parent 40b394b0
......@@ -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
};
......
/*
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>
......
......@@ -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
};
......
......@@ -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>
</>
......
......@@ -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}
......
......@@ -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>
......
......@@ -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>
))}
......
/*
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>
......
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 };
/*
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;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment