Matomo Tag Manager Setup guide

description the prerequisite for successful tracking with the matomo tag manager is that all desired action events, view events and attributes are configured in the "tracking config json" you can find out how to do this in general tracking configuration based on this configuration, pxp sends the corresponding data to matomo tag manager using defined names for triggers and variables the configuration must be set up accordingly on matomo's side the full pxp support results in the following example structure which shows the full setup to support action events, view events and attributes complete structure used by this example matomo tag manager structure in detail tags to connect pxp with matomo tag manager, these tags are required based on this example trigger to connect pxp with matomo tag manager, these triggers are required based on this example variables to connect pxp with matomo tag manager these variables are required based on this example events and attributes action events pxp it starts with an action event configuration the event " issue opened " is used for the following example depending on whether parameters are to be used or not, the configuration differs as follows action event "issue opened" { "templates" { "category" "content", "action" "issue opened", "name" "{{issue name}}", "value" 1 } } action event with parameters "issue opened" { "templates" { "trigger" "purple issue opened", "category" "content", "action" "issue opened", "name" "{{issue name}}", "value" 1 }, "parameters" { "3" "{{issue name}}" } } reduced code from pxp pxp web client pushes an "event" which is configured as " trigger " and data which is configured as " variable (data layer) " to matomo tag manager the following source code shows a simplified representation of how pxp calls the matomo tag manager api pxp code for api call // code for action events const eventdata = { 'event' 'purple action event', // trigger 'purple' { 'action event action' , // variable 'action event category' , // variable 'action event name' , // variable 'action event value' // variable } }; window mtm push(eventdata); pxp code for api call with parameters // code for action events with parameters const eventdata = { 'event' event templates? trigger ?? 'purple action event', // trigger 'purple' { 'action event action' , // variable 'action event category' , // variable 'action event name' , // variable 'action event value' , // variable 'parameters' { } // all configured parameters } }; window mtm push(eventdata); configuration in matomo tag manager create required "variables (data layer)" to receive data the variable names defined by purple are as follows purple action event category purple action event action purple action event name purple action event value purple action event category purple action event action purple action event name purple action event value matomo tag manager example variable to receive category variable to receive action variable to receive name variable to receive value create the required “trigger” for pxp to push to the trigger name defined by purple is as follows purple action event purple action event matomo tag manager example trigger for action event create a “tag” that will run when the trigger fires create a tag which creates an action event using the variables from step 1 and assign the trigger from step 2 to define when this tag executes matomo tag manager example tag (name) tag (create event) tag (use trigger) summary finally, this is how it works together view events pxp it starts with a view event configuration the event " storefront search " is used for the following example view event "storefront search" { "templates" { "name" "{{view}}", "title" "cool search" } } view event with parameters "storefront search" { "templates" { "name" "{{view}}", "title" "cool search" }, "parameters" { "8" "view parameter example {{foo}}" } } reduced code from pxp pxp web client pushes an "event" which is configured as " trigger " and data which is configured as " variable (data layer) " to matomo tag manager the following source code shows a simplified representation of how pxp calls the matomo tag manager api pxp code for api call // code for view events const eventdata = { 'event' 'purple view event', // trigger 'purple' { 'view event name' , // variable 'view event title' // variable } }; window mtm push(eventdata); pxp code for api call with parameters // code for view events const eventdata = { 'event' view\ templates? trigger ?? 'purple view event', // trigger 'purple' { 'view event name' , // variable 'view event title' , // variable 'parameters' { } // all configured parameters } }; window mtm push(eventdata); configuration in matomo tag manager create required "variables (data layer)" to receive data the variable names defined by purple are as follows purple view event title purple view event name purple view event title purple view event name matomo tag manager example variable to receive view title variable to receive view name create the required “trigger” for pxp to push to the trigger name defined by purple is as follows purple view event purple view event matomo tag manager example trigger for view event create a “tag” that will run when the trigger fires create a tag which creates an view event using the variables from step 1 and assign the trigger from step 2 to define when this tag executes matomo tag manager example tag (name) tag (create event) tag (use trigger) summary finally, this is how it works together attributes pxp it starts with an attribute configuration the attribute " has bookmarks " is used for the following example attribute "has bookmarks" { "templates" { "id" "1" } } reduced code from pxp pxp web client pushes data which is configured as " variable (data layer) " to matomo the following source code shows a simplified representation of how pxp calls the matomo tag manager api pxp code for api call // code for custom dimensions const index = // value is configured in tracking config json const datalayername = `purple custom dimension ${index}`; const customdimensiondata = { \[`${datalayername}`] // variable }; window mtm push(customdimensiondata); configuration in matomo tag manager create custom visit dimensions add your desired custom visit dimensions matomo tag manager example custom visit dimensions create required "variables (data layer)" to receive data the variable names defined by purple are as follows purple custom dimension 1 purple custom dimension n purple custom dimension 1 purple custom dimension n where "n" is an element of the integer positive numbers matomo tag manager example custom dimension 1 used by "hasbookmarks" custom dimension 2 used by "userid" map custom visit dimensions to matomo site configuration custom visit dimensions are mapped within the corresponding matomo site configuration matomo tag manager example matomo site configuration summary finally, this is how it works together