Continuing the discussion from Integrating Google Tag Manager with Google Analytics:
This guide is a wiki. If you are an expert at using GTM, feel free to edit the topic, or reply to the topic with suggestions for improvements. If there are particular events that you want to track, let us know and we’ll see what can be done to push them onto the Data Layer.
To configure your Discourse site to push page view events to Google Tag Manager and Google Analytics, follow the steps outlined here: Setup Google Tag Manager for Analytics - admins - Discourse Meta. After completing those steps, you should see data about the title and URL of Discourse page views on your analytics page.
In this topic I will outline how to add custom events to the data that is sent to GTM and Analytics. Note that this topic assumes you have entered your site setting and updated your site’s content security policy script src setting to allow the Google scripts to run on the site.
Adding Discourse events to the GTM Data Layer
Note: when you enable GTM on Discourse by adding your tag manager ID to your Discourse gtm container id setting, a dataLayer object will be created. You can push new events onto the data_layer to make them available on GTM. If you are just testing the script below without having set your gtm container id , you’ll need to initialize the data_layer object in your script.
Discourse fires numerous events when users perform an action on the site. Some of these events will be useful for analytics. The code below handles the following events:
page:bookmark-post-toggledpost:createdtopic:createdpage:like-toggled
<script type="text/discourse-plugin" version="0.11.0">
// This should only be required if the gtm_container_id hasn't been set, but it is probably
// best to include it to prevent errors if the gtm container id is ever removed from that setting.
window.dataLayer = window.dataLayer || [];
api.onAppEvent("page:bookmark-post-toggled", post => {
if (post && post.bookmarked) {
window.dataLayer.push({
'event': 'postBookmarked',
'postId': post.id
});
}
});
api.onAppEvent("post:created", post => {
if (post) {
window.dataLayer.push({
'event': 'postCreated',
'postId': post.id
});
}
});
api.onAppEvent("topic:created", (post, composerModel) => {
if (post) {
window.dataLayer.push({
'event': 'topicCreated',
'topicCategory': composerModel.get("category.name")
});
}
});
api.onAppEvent("page:like-toggled", (post, likeAction) => {
let topic = post.topic;
if (post && topic && likeAction && likeAction.acted) {
window.dataLayer.push({
'event': 'postLiked',
'postId': post.id
});
}
});
</script>
In all events except the topicCreated event, the ID of the post that has been acted on is being added to the dataLayer object. The topicCreated event is an example of how other types of data can be added to the dataLayer . If you have followed all steps in Setup Google Tag Manager for Analytics - admins - Discourse Meta, you will also have page.title and page.url variables configure on GTM that can be used to add data about the page’s title or URL to the custom event on GTM.
Configure GTM
For the examples below, I’ll be configuring the postBookmarked event that’s been added to the dataLayer in the code example above.
Create a Trigger
Go to https://tagmanager.google.com/. Select Triggers from the side menu and click the New button to create a new trigger. Give your trigger a name, select Custom Event as the Trigger type and postBookmarked as the Event name . Set the trigger to fire on “All Custom Events”:
Create a Data Layer Variable
Select Variables from the GTM side menu. On the page’s User Defined Variables section, click the New button. Give the variable a recognizable name (you’ll be using it in the next step.) For Variable Type select “Data Layer Variable.” Set the Data Layer Variable Name to postId . This allows GTM to read the value of the postId that you have pushed onto the dataLayer . Make sure the Data Laver Version is set to “Version 2”:
Create a Universal Analytics Event Tag
Select Tags from the GTM side menu and click the button to create a new tag. Give your tag a name. For the Tag Type select Google Analytics: Universal Analytics . For the Track Type select Event . Give your tag a Category. That category will be displayed on your Analytics page when the event fires. The value of the Action field is what will get passed along with the event from GTM to Analytics. To send the postId that was configured in the previous step to Analytics, add that variable’s title, surrounded by {{}} to the form’s Action section. You’ll see that you can select this variable from the field’s drop down menu.
You can now either configure a settings variable and add it to the Google Analytics Settings field, or select “Enable overriding settings in this tag” and enter your Analytics tracking ID into the form:
Submit your changes
Before the data will be available on Analytics, you need to click the GTM Submit button to publish your changes. You should now be able to browse your site and see your actions in the Analytics Events section:
Todo
- find the best way to track signup events
Last edited by @MarkDoerr 2024-07-03T03:01:03Z
Check document
Perform check on document:
ᐧ