Origami Frontend Components & Services

Demos: o-tracking

Json Config

Sample configuration for a product.

<!-- Page level configuration must be included prior to loading the module code -->
<script type="application/json" data-o-tracking-config>
  {
    "server": "https://test.spoor-api.ft.com/px.gif",
    "context": {
      "product": "origami"
    }
  }
</script>

<p>
  This page is being tracked automatically. See the source for more details.
</p>

<button
  onclick="document.body.dispatchEvent(new CustomEvent('oTracking.page', { detail: { url: document.URL }, bubbles: true}));"
>
  Click to send a page event
</button>
<button
  onclick="document.body.dispatchEvent(new CustomEvent('oTracking.event', { detail: { category: 'element', action: 'click', form: 'submit' }, bubbles: true}));"
>
  Click to track a non-page event
</button>

<script>
  // Send a custom event
  function initLocalScript() {
    oTracking.page({ detail: { url: document.URL }, bubbles: true });
  }
</script>

<!-- Include this to ensure that tracking works even when the page does not load o-tracking's JavaScript -->
<div class="o-tracking o--if-no-js">
  <div style="background-image: url(...)"></div>
</div>
Status
active Origami v1
Switch component view

GitHub Repository

Install o-tracking

If using the Build Service, add o-tracking@^3.1.0 to your script tag.

If running a Manual Build, run npm install "o-tracking@^3.1.0".

Help & Support

o-tracking is maintained directly by the Origami team. If you have any questions about o-tracking or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com