TrackedAnchor

Generates a <a> Element wrapped in a LinkContext.

TrackedAnchor: (props: {
  objectiv?: {
    id?: string,
    href?: string,
    normalizeId?: boolean
    waitUntilTracked?: boolean,
  }
}) => <a>

objectiv prop attributes​

typedefault value
optionalidstringinferred from native id, title or children
optionalhrefstringinferred from native href
optionalnormalizeIdbooleantrue
optionalwaitUntilTrackedbooleanfalse
info
  • When the id attribute is omitted, we attempt to infer it from one of the elements' native props: id, title, children.
  • When the href attribute is omitted, we attempt to infer it from the anchor's href prop.

If either fails, an error will be logged to the Developer Console and the original Component is rendered.

Returns​

<a>

Automatic Events​

Usage example​

import { TrackedAnchor } from '@objectiv/tracker-react';

<div>
  <header>
    <TrackedAnchor href={'/'}>Homepage</TrackedAnchor>

    {/* Whenever inferring 'id' is not possible, we automatically look at `title` */}
    <TrackedAnchor href={'/privacy'} title={'Privacy settings'}>
      <img src="/lock.jpg"/>
    </TrackedAnchor>

    {/* Or `id`, either one will do the job */}
    <TrackedAnchor href={'/profile'} id={'Profile settings'}>
      <img src="/profile.jpg"/>
    </TrackedAnchor>
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</div>

By default, all Tracked Elements automatically normalize their Context identifiers to a kebab-cased format.

This can be disabled via the normalizeId option:

import { TrackedAnchor } from '@objectiv/tracker-react';

<div>
  <TrackedAnchor href={'/'} objectiv={{ normalizeId: false }}>Back to home</TrackedAnchor>
  
  <TrackedAnchor href={'/privacy'} title={'Privacy settings'} objectiv={{ normalizeId: false }}>
    <img src="/lock.jpg"/>
  </TrackedAnchor>

  <TrackedAnchor href={'/profile'} id={'Profile settings'} objectiv={{ normalizeId: false }}>
    <img src="/profile.jpg"/>
  </TrackedAnchor>
</div>

Did you know ?

TrackedAnchor internally uses TrackedLinkContext.


See also