How do I markup content for content tracking?

There are two different methods for marking up your content as something that should be tracked. The first is via HTML which offers the most flexibility in terms of labelling as you can manually specify the value for each element. Alternatively, you can add custom CSS classes to your content so the values for each are pulled dynamically from the element itself. The latter option is best for custom page templates on systems where it isn’t possible to set and utilise structured HTML data for your labels.

HTML Data Tags (Takes Precedence)

The benefit of using HTML to define your content blocks is the ability to specify the exact values for the three content elements. This can make your labels much more flexible, and typically more specific. You should aim to use this method wherever possible.

HTML Attributes

  • data-track-content
  • data-content-name="NAME"
  • data-content-piece="PIECE"
  • data-content-target="TARGET"
  • data-content-ignoreinteraction

Example Banner

<a href="https://example.com/" data-track-content="" data-content-name="Banner Ad" data-content-target="https://example.com/">
    <img src="http://matomo.local/wp-content/uploads/buy-stuff.png" alt="Buy More" class="wp-image-45" data-content-piece="Buy Stuff Ad">
</a>

Example Values

Developer’s Note: As the target in this case is set on an a element which contains an href attribute, the data-content-target isn’t technically required, but it has been added for clarity here. The target attribute is required for situations where, for example, you are using JavaScript onClick events instead of a standard link.

CSS Tags

The other method for defining content blocks to be tracked is by setting CSS classes. The benefit of CSS is the ability to create templates which dynamically display different content pieces, but where it isn’t possible to pass consistent or usables values for the names, so they can be pulled from their native values instead. This method can also be useful for content management systems where you can attach custom classes and CSS but can’t directly edit the HTML.

  • .matomoTrackContent
  • .matomoContentPiece
  • .matomoContentTarget
  • .matomoContentIgnoreInteraction

Example Banner

<a href="https://example.com/" class="matomoTrackContent matomoContentTarget">
    <img src="https://matomo.org/wp-content/uploads/buy-stuff.png" alt="Buy More" class="matomoContentPiece">
</a>

Example Values

More Markup Examples

If you’re still not confident with the various potential configurations, the developer documentation contains many more examples of HTML and CSS content tracking markup.

Previous FAQ: How do I enable Content Tracking via Matomo Tag Manager?