Google Tag Manager

overview google analytics 4 (ga4) integration demo engagement data with your other website event data this sends navattic event data https //docs navattic com/integrations#9zmx0 such as "step viewed" or "converted" to ga4 once set up, ga4 may be used to answer questions like how many users or sessions engage with my navattic demo? where in my website flow do users engage with my navattic demos? which of my navattic projects lead to the most conversions? event data for each project includes navattic event types description view step a flow step is viewed start flow a user starts a flow complete flow a user reached the last step of a flow or completed a "complete flow" step start checklist a user loads a checklist for the first time open checklist a user expands a checklist close checklist a user clicks "x" to close a checklist complete task a user completed a task in a checklist converted a user completed a step tagged "mark as converted" navigate a user clicked a button with the click action "navigate to url" engage a user makes it past the first step of a flow implementation below are the steps to implement navatticjs with google tag manager step 1 create a tag in google tag manager create a tag in google tag manager under the tags tab name the tag "google analytics ga4 configuration" make sure to select "send a page view event when this configuration loads" step 2 copy the navattic js script and add it to a custom html gtm tag in navattic, navigate to settings > navattic js ( link https //app navattic com/u/settings/js ) and copy the installation code snippet create a custom html google tag manager tag named "navattic js setup” and paste the installation code step 3 make a custom navattic ga4 event to create the custom navattic ga4 event, select "new" in google tag manager > select google analytics ga4 event as the tag type the configuration tag should be "google analytics ga4 configuration" and the event name should be "navattic event" next, add a trigger named "navattic event" the trigger type is "custom event" and the event name should be "navattic event" set up this trigger fires on event equals navattic event step 4 add another custom html tag create a custom html google tag manager tag with the following script name the tag "navattic onevent handler" this will trigger all events google tag manager \<script> navattic onevent(function(event){ datalayer push({ event "navattic event", data navattic flatten(event) }); }); \</script> step 5 create custom variables by default, navattic passes through all available events which can be seen in the table here custom variables will be used to present the events in ga4 on the left hand side of google tag manager, select "variables" click new > custom event customize the configuration using the image below as an example after creating the variable, go to navattic ga4 event tag and add a new events parameter