Google Tag Manager Setup guide

the prerequisite for successful tracking with the google tag manager is that all desired action and view events are configured in the "tracking config json" you can find out how to do this in general docid\ sxkxo oept7crfzzob9nw based on this configuration, pxp sends the corresponding data to google tag manager using defined names for triggers and variables the configuration must be set up accordingly on google's side the full pxp support results in the following example structure, which shows the full setup to support action events and view events complete structure used by this example google tag manager structure in detail tags to connect pxp with google tag manager, these tags are required based on this example trigger to connect pxp with google tag manager, these triggers are required based on this example variables to connect pxp with google 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", "label" "{{issue name}}" } } action event with parameters "issue opened" { "templates" { "trigger" "purple issue opened", "category" "content", "action" "issue opened", "label" "{{issue name}}" }, "parameters" { "issue id" "{{issue id}}", "issue name" "{{issue name}}" } } reduced code from pxp pxp web client pushes an "event" that is configured as " trigger " and data that is configured as " data layer variable " to google tag manager the following source code shows a simplified representation of how pxp calls the google 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 label' // variable } }; window\ datalayer 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 label' , // variable 'parameters' { } // all configured parameters } }; window\ datalayer push(eventdata); configuration in google tag manager docid\ mclm rfv0hewvziezywj2 to receive data the variable names defined by purple are as follows purple action event category purple action event action purple action event label purple action event category purple action event action purple action event label google tag manager example variable to receive category variable to receive action variable to receive label create the required “trigger” for pxp to push to the trigger name defined by purple is as follows purple action event purple action event google tag manager example trigger for action event create a “tag” that will run when the trigger fires create a tag that creates a google analytics 4 action event using the variables from step 1 and assign the trigger from step 2 to define when this tag executes google tag manager example tag 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" { "view parameter example" "view parameter example {{foo}}" } } reduced code from pxp pxp web client pushes an "event" that is configured as " trigger " and data that is configured as " data layer variable " to google tag manager the following source code shows a simplified representation of how pxp calls the google 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\ datalayer 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\ datalayer push(eventdata); configuration in google tag manager docid\ mclm rfv0hewvziezywj2 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 google 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 google tag manager example trigger for view event create a “tag” that will run when the trigger fires create a tag which creates an google analytics 4 "page view" event using the variables from step 1 and assign the trigger from step 2 to define when this tag executes google tag manager example tag summary finally, this is how it works together