Push custom events to Google Tag Manager and Analytics

documentation developers
7

Here is the list of events I’ve been able to find that can be targeted with the onAppEvent method:

  • page:changed
  • page:bookmark-post-toggled
  • post:created
  • topic:created
  • page:like-toggled
  • topic:flag-created
  • post:flag-created
  • page:topic-loaded
  • page:compose-reply

I am not finding a way to use this method to track the signup or registration events. I’ve asked about this before on Meta, so I am fairly sure there isn’t a user:created, or user:logged-on event that can be hooked into. It looks like the best approach for tracking signups may be to track visits to the /users/account-created page with something like this:

api.onPageChange((url, title) => {
    if (url === '/u/account-created') {
        window.dataLayer.push({
            'event': 'newUserCreated'
        });
    }
});

Unfortunately, that approach will only work for users that are created by submitting the Discourse login form. It also doesn’t give you any details about the user that was created, or tell you if the user activated their account by responding to the Discourse account activation email.

It is also possible to track Discourse click events to push information onto the data layer. This approach could be used with either the Sign Up or Log In buttons. The downside of this is that all it is telling you is that the buttons were clicked. It doesn’t tell you if the user went on to activate their account, or login to the site.

The click tracking approach can also be used to get details about shared topics and posts.

<script type="text/discourse-plugin" version="0.11.0">
window.dataLayer = window.dataLayer || [];

let main = document.getElementById("main");
if (!main) {
    return;
}
let currentUrl; // Setting this in the call to onPageChange, then using it in the clickHandler method.
    
api.onPageChange((url, title) => {
    currentUrl = url
    if (currentUrl === '/u/account-created') {
        window.dataLayer.push({
            'event': 'newUserCreated'
        });
    }
});

let clickHandler = function(e) {
let target = e.target;
if (target) {
    if (target.closest('.login-button')) {
        window.dataLayer.push({
            'event': 'userLoggedIn'
        });

    } else if (target.closest('.sign-up-button')) {
        window.dataLayer.push({
            'event': 'newUserCreated'
        });

    } else if (target.closest('#topic-footer-button-share-and-invite')) {
        window.dataLayer.push({
            'event': 'topicShared',
            'url': currentUrl
        });

    } else if (target.closest('.post-controls .share')) {
        let shareUrl = $(target).parent().data('share-url')
        window.dataLayer.push({
            'event': 'postShared',
            'post': shareUrl
        });
    }
}

return false;
};

main.addEventListener("click", clickHandler);
main.addEventListener("touchstart", clickHandler);
</script>

I’d still like to find a better way of passing the login and signup events to analytics. I’ll look into finding a way of tracking search events as well.

5 Likes