Analytics

latest

Arc React components pass all data attributes through to their underlying DOM nodes, which allows you to use custom data- attributes to identify particular instances of a component.

For example, you could add test ids to Button components and use them to identify the button clicks in an analytics tag manager:

<Button label="Button" data-testid="mainCallToAction" />
<Button label="Button" data-testid="secondaryCallToAction" />

<button class="arc-Button" data-testid="mainCallToAction">
  <span class="arc-Button-inner">
    <span class="arc-Button-text">Button</span>
  </span>
</button>
<button class="arc-Button" data-testid="secondaryCallToAction">
  <span class="arc-Button-inner">
    <span class="arc-Button-text">Button</span>
  </span>
</button>