mirror of
https://github.com/datahub-project/datahub.git
synced 2025-07-28 03:49:37 +00:00
98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
import LinkComponent from '@ember/routing/link-component';
|
|
import { attribute } from '@ember-decorators/component';
|
|
import { computed } from '@ember/object';
|
|
import { reads } from '@ember/object/computed';
|
|
import { assert } from '@ember/debug';
|
|
import { getAbsoluteUrl } from 'wherehows-web/utils/helpers/url';
|
|
|
|
/**
|
|
* Defines the AnalyticsTrackableLinkTo class
|
|
* Useful for automatically tracking the impressions and interactions of link content
|
|
* Tracking must be initialized by invoking `trackAllContentImpressions` activity on paq
|
|
* to track content
|
|
* @export
|
|
* @class AnalyticsTrackableLinkTo
|
|
* @extends {LinkComponent}
|
|
*/
|
|
export default class AnalyticsTrackableLinkTo extends LinkComponent {
|
|
/**
|
|
* External handler for click events raised on this component instance
|
|
* @memberof AnalyticsTrackableLinkTo
|
|
*/
|
|
onClick?: (e: MouseEvent) => void;
|
|
|
|
/**
|
|
* Externally set attribute for grouping pieces of content.
|
|
* Specifies the data attribute data-content-name derived from the component attribute,
|
|
* contentName
|
|
*
|
|
* This defines the name of the content block to easily identify a specific block.
|
|
* A content name groups different content pieces together
|
|
* For instance, a content name could be "Product A", there could be many different content pieces
|
|
* to exactly know which content was displayed and interacted with
|
|
* @type {string}
|
|
* @memberof AnalyticsTrackableLinkTo
|
|
*/
|
|
@attribute('data-content-name')
|
|
contentName!: string;
|
|
|
|
/**
|
|
* Externally set attribute for identifying this instance of content i.e. the actual content
|
|
* that was displayed
|
|
*
|
|
* Multiple content pieces can be grouped together in a content name
|
|
* @type {string}
|
|
* @memberof AnalyticsTrackableLinkTo
|
|
*/
|
|
@attribute('data-content-piece')
|
|
contentPiece!: string;
|
|
|
|
/**
|
|
* Aliases the href property on the LinkComponent
|
|
* @type {string}
|
|
* @memberof AnalyticsTrackableLinkTo
|
|
*/
|
|
@reads('href')
|
|
hrefAlias: string;
|
|
|
|
/**
|
|
* Specifies the data attribute data-content-target defining the target from interacting with this content block.
|
|
* Useful to track the direction or path a user will take in navigating with this content
|
|
* @readonly
|
|
* @type {string}
|
|
* @memberof AnalyticsTrackableLinkTo
|
|
*/
|
|
@attribute('data-content-target')
|
|
@computed('hrefAlias')
|
|
get contentTarget(): string {
|
|
return getAbsoluteUrl(this.hrefAlias);
|
|
}
|
|
|
|
/**
|
|
* This specifies the data attribute data-track-content which defines a content block.
|
|
* A content block is required for any content that is intended to be tracked
|
|
* This attribute does not require any value hence intentionally narrow type of empty string ''
|
|
* @type {''}
|
|
* @memberof AnalyticsTrackableLinkTo
|
|
*/
|
|
@attribute('data-track-content')
|
|
readonly dataTrackContent: '' = '';
|
|
|
|
init() {
|
|
super.init();
|
|
const { contentName, contentPiece } = this;
|
|
|
|
assert(`Expected contentName to be of type string`, typeof contentName === 'string');
|
|
assert(`Expected contentPiece to be of type string`, typeof contentPiece === 'string');
|
|
}
|
|
|
|
/**
|
|
* Invokes the the closure handler on click
|
|
* @param {MouseEvent} e DOM mouse click event
|
|
* @memberof AnalyticsTrackableLinkTo
|
|
*/
|
|
click(e: MouseEvent): void {
|
|
this.onClick && this.onClick(e);
|
|
}
|
|
}
|