A Better Form for Piwik
Matomo Tag Manager
📋 Agenda
- Current Piwik UBT Situation
- Matomo Tag Manager (MTM)
- MTM Concepts
- Demo
- Conculsion
😕 Current Piwik UBT Situation
- Add UBT Phase
- Modify UBT Phase
- UBT Location
😕 Add UBT Phase
- Different codes for Piwik & Pendo
piwik.trackEvent('...', '...');<div data-tracking="..." />- Tag payload naming
- Frontend may not choose the most suitable naming
😕 Modify UBT Phase
- Lengthy process for Piwik UBT modifications
- Costly to change Tag's payload
Tell frontend
→ Modify codebase
→ Commit / Push
→ Build/Deploy
→ PR
😕 UBT Locations
- Separated in tons of files
🤔 How about add UBT like Pendo?
Add UBT Phase
- One effort for both Piwik & Pendo UBT
- Name Tag payloads by data analyst
Modify UBT Phase
- Modify Piwik UBT without changing frontend codebase
UBT Location
- One place for all Piwik UBTs Tags
Matomo Tag Manager (MTM)
- Matomo's (formerly Piwik) Tag Management System (TMS)
- Manage UBTs from Matomo's console
- Just like Pendo UBT
- Since v3.7.0 (ours: v3.11.0)
MTM Concepts - Components
- 🏷 Tag
- Think as an UBT object
- 💥 Trigger
- When to send a Tag
- Clicked, Scroll ...etc
- 🔤 Variables
- Dynamic data
- e.g. Current URL, Element Text
{ category: '...', action: '...' }{ category: '...', action: 'Clicked_{{ClickedText}}' }- 🏷 Tag
- Think as an UBT object
- 💥 Trigger
- When to send a Tag
- Clicked, Scroll ...etc
- 🔤 Variables
- Dynamic data
- e.g. Current URL, Element Text
Components - To illustrate
{
category: 'Favorite Button',
action: Clicked_{{Article Title}},
name: '',
value: ''
}💥 Trigger
🏷 Tag
🔤 Variables
MTM Concepts - Add UBT Process
🏷
Add a Tag
💥
Link to a Trigger
👁
Preview / Debug
⬆️
Publish
🎞 Version added
MTM Concepts - Add UBT Process
🏷
Add a Tag
💥
Link to a Trigger
⬆️
Publish
Demo - A Blog Website
{
category: 'Post Link',
action: 'Post_Clicked_{{ClickText}}'
}🏷
💥
🔤
Scenario: Add when
UBT
click
post
Add Custom Data to Tag?
_mtm.push({
/* some custom data here */
});- e.g. vid, cid
🔤
Add Custom Variables
- Still needs to write code
Demo - Custom Variable
{
category: 'Article Link',
action: 'Clicked_{{ClickText}}_uid:{{UserID}}'
}🏷
💥
Scenario: Add when
UID
click
post
🔤
👍🏽 Pros
- Agility
- Central control UBTs
- Version control
👎🏽 Cons
- Occasionally need to change codebase
- Poor UX for preview mode