Analytics Setup
This guide explains how to set up web and mobile app analytics for your News Suite installation using Matomo, including proper content attribution and audio analytics tracking.
Overview
Section titled “Overview”WhiteBeard News Suite uses Matomo for comprehensive web and mobile app analytics. Matomo provides detailed insights into user behavior, content performance, and engagement metrics across your digital properties.
Basic Setup
Section titled “Basic Setup”Step 1: Install the Matomo Tag
Section titled “Step 1: Install the Matomo Tag”-
Obtain Your Matomo Tag:
- Contact WhiteBeard News Suite support to receive your unique Matomo tag
- The tag will be provided in a format ready for your tag manager
-
Insert the Tag:
- Add the Matomo tag provided by support into your tag manager
- Ensure the tag is configured to fire on all pages
This basic setup enables general analytics tracking across your website and mobile applications.
Content Attribution Setup
Section titled “Content Attribution Setup”For accurate content performance tracking and detailed article analytics, additional data layer variables must be configured. This setup is essential for understanding which articles drive engagement and revenue.
Required Data Layer Variables
Section titled “Required Data Layer Variables”Configure the following variables in your data layer before triggering your pageview event or other tracking events:
| Variable Name | Type | Description |
|---|---|---|
ArticleId | String | The unique ID of the content or article the user is viewing |
CategoryId | String | The ID of the primary category for the content |
ParentId | String | The publication ID that the content belongs to |
Premium | String | User subscription status: 0 for non-subscribers, 1 for subscribers |
Implementation Example
Section titled “Implementation Example”Push data to the Matomo data layer using the following format:
window._mtm.push({ 'ArticleId': 123, 'CategoryId': '2', 'ParentId': '1', 'Premium': 1});When to Push Data
Section titled “When to Push Data”- Article Pages: Push the data layer variables immediately when the article page loads, before any pageview or engagement events
- Dynamic Content: Update the data layer when users navigate to different articles in single-page applications
- Premium Status: Update the
Premiumvariable if the user’s subscription status changes in the same page
Example Implementation
Section titled “Example Implementation”// Example: Push data layer on article page loaddocument.addEventListener('DOMContentLoaded', function() { if (typeof window._mtm !== 'undefined') { window._mtm.push({ 'ArticleId': document.querySelector('[data-article-id]').dataset.articleId, 'CategoryId': document.querySelector('[data-category-id]').dataset.categoryId, 'ParentId': document.querySelector('[data-publication-id]').dataset.publicationId, 'Premium': userIsSubscribed ? 1 : 0 }); }});Additional Resources
Section titled “Additional Resources”For comprehensive documentation on using the Matomo data layer, including advanced configurations and troubleshooting, refer to the official Matomo documentation:
Matomo Tag Manager Data Layer Guide
Audio Analytics
Section titled “Audio Analytics”If you’re implementing a custom audio player, you can track detailed audio engagement metrics by sending specific events to the Matomo data layer.
Audio Event Structure
Section titled “Audio Event Structure”Push audio events using the following format:
window._mtm.push({ 'event': 'audio_event', 'action': 'audio-start', 'AudioAttachmentId': 123});Required Parameters
Section titled “Required Parameters”| Parameter | Type | Description |
|---|---|---|
event | String | Always set to 'audio_event' for audio tracking |
action | String | The specific audio action being tracked (see below) |
AudioAttachmentId | String | The unique ID of the audio attachment being played |
Audio Event Actions
Section titled “Audio Event Actions”Track the following audio playback events to understand listener engagement:
Core Events
Section titled “Core Events”| Action | When to Fire | Description |
|---|---|---|
audio-start | Audio begins playing | Fired when the user starts audio playback for the first time |
audio-end | Audio completes | Fired when audio playback reaches the end of the content |
audio-listened | After 10 seconds | Fired once per page after 10 seconds of continuous playback (indicates genuine engagement) |
Progress Events
Section titled “Progress Events”Track listening duration by firing progress events every 10 seconds of playback:
| Action | When to Fire |
|---|---|
audio-progress-10 | After 10 seconds of playback |
audio-progress-20 | After 20 seconds of playback |
audio-progress-30 | After 30 seconds of playback |
audio-progress-N | Continue every 10 seconds (40, 50, 60, etc.) |
Implementation Examples
Section titled “Implementation Examples”Starting Audio Playback
Section titled “Starting Audio Playback”audioPlayer.addEventListener('play', function() { window._mtm.push({ 'event': 'audio_event', 'AudioAttachmentId': audioId, 'action': 'audio-start' });});Tracking 10-Second Engagement
Section titled “Tracking 10-Second Engagement”// After 10 seconds of continuous playback (fires once per page)let hasTrackedListened = false;
audioPlayer.addEventListener('timeupdate', function() { if (!hasTrackedListened && audioPlayer.currentTime >= 10) { window._mtm.push({ 'event': 'audio_event', 'AudioAttachmentId': audioId, 'action': 'audio-listened' }); hasTrackedListened = true; }});Tracking Progress Events
Section titled “Tracking Progress Events”// Fire every 10 seconds during playbackaudioPlayer.addEventListener('timeupdate', function() { const currentTime = Math.floor(audioPlayer.currentTime);
if (currentTime > 0 && currentTime % 10 === 0) { window._mtm.push({ 'event': 'audio_event', 'AudioAttachmentId': audioId, 'action': `audio-progress-${currentTime}` }); }});Audio Completion
Section titled “Audio Completion”audioPlayer.addEventListener('ended', function() { window._mtm.push({ 'event': 'audio_event', 'AudioAttachmentId': audioId, 'action': 'audio-end' });});Best Practices
Section titled “Best Practices”Data Quality
Section titled “Data Quality”- Validate Data: Ensure all data layer variables are populated correctly before pushing to Matomo
- Consistent IDs: Use consistent ID formats across your implementation
- Error Handling: Implement error handling to prevent tracking failures from breaking your site
Privacy Considerations
Section titled “Privacy Considerations”- User Consent: Ensure you have proper user consent before tracking, in compliance with GDPR and other privacy regulations
- PII Protection: Never include personally identifiable information (PII) in custom variables
- Subscription Status: The Premium variable should only indicate subscription status, not specific user identity
Testing
Section titled “Testing”Before deploying to production:
- Verify Tag Installation: Confirm the Matomo tag fires correctly on all pages
- Test Data Layer: Check that all variables are being pushed with correct values
- Validate Events: Ensure audio events fire at the correct times
- Use Matomo Debugger: Utilize browser developer tools and Matomo’s debugging features to verify tracking
Troubleshooting
Section titled “Troubleshooting”Data Layer Not Pushing
Section titled “Data Layer Not Pushing”If data isn’t appearing in Matomo:
- Verify
window._mtmis defined before pushing data - Check browser console for JavaScript errors
- Ensure the Matomo tag is loaded before data layer pushes
Missing Article Data
Section titled “Missing Article Data”If article metrics aren’t tracking:
- Confirm
CategoryIdandParentIdare being set on article pages - Check that data is pushed before pageview events
Audio Events Not Recording
Section titled “Audio Events Not Recording”If audio analytics aren’t working:
- Verify
AudioAttachmentIdis correct - Check that events fire at the right playback moments
- Ensure
'event': 'audio_event'is included in all audio pushes
Getting Support
Section titled “Getting Support”For assistance with analytics setup or custom implementations:
- Contact WhiteBeard News Suite support for your Matomo tag and configuration
- Refer to Matomo’s official documentation for advanced features
- Work with your development team to ensure proper integration with your specific platform architecture