Tagging Locations

Now that the Tracker is up and running we can start thinking about Tagging some Elements as LocationContexts using Location Taggers.

Tagging Interactive Elements​

A good rule of thumb is to start by identifying all interactive Elements in the Application.

Buttons​

Anything that the user can interact with, but does not cause a URL change, can be considered a Button. 

// a button tag 
<button [tagPressable]="{ id: 'button-1' }">Click Me!</button>

// a clickable image
<img [tagPressable]="{ id: 'button-3' }" src="/img/ok.png" alt="OK!" />

Links are interactive elements that cause, directly or indirectly, a change in the current URL.

// a link tag 
<a [tagLink]="{ id: 'link-1', href:'/somewhere' }" href="/somewhere">Go!</a>
WIP

Currently it's necessary to specify href manually. We are working on improvements to make this easier.

Expandables​

Elements that cause other Elements, usually their children, to be expanded and displayed to the user. Such as Accordions and collapsible Menus. 

<ul [tagExpandable]="{ id: 'main-menu' }">
  <li>Menu A</li>
  ...
  <li>Menu Z</li>
</ul>

Tracking Locations​

To make modeling easier it's important to ensure all Tracked interactive Elements are uniquely identifiable.

That said, assigning a unique identifier to each Element is not always possible and most often impractical. Think of reusable components for example.

See Core Concepts - Locations for an explanation of how Sections can be tagged to make Events unique without having to assign a unique identifier to each.

An example:

<div [tagContent]="{ id: 'layout' }">
  <div [tagContent]="{ id: 'homepage-hero' }">
    <div [tagContent]="{ id: 'section1' }"
      <a [tagLink]="{ id: 'my-link', href: '/link1'}" href="/link1">Link 1</a>
    </div>
    <div [tagContent]="{ id: 'section2' }"
      <a [tagLink]="{ id: 'my-link', href: '/link2'}" href="/link2">Link 2</a>
    </div>
  </div>
</div>

makeId​

When using Location Taggers, especially in generic components, it's likely to have to use dynamic data to populate the id attribute.

AngularTracker comes with a makeId PipeFilter.

In the following example a wrapper div will render multiple button elements. We make identifiers for PressableContext by piping makeId to button.text:

<div *ngFor="let button of buttons">
  <button [tagPressable]="{ id: button.text | makeId }">{{ button.text }}</button>
</div>