# Implementing Google Tag Manager with Discourse

**URL:** https://meta.discourse.org/t/implementing-google-tag-manager-with-discourse/36861
**Category:** Data & reporting
**Created:** [December 17, 2015, 11:23pm UTC](https://meta.discourse.org/t/implementing-google-tag-manager-with-discourse/36861 "2015-12-17T23:23:09Z")
**Posts on this page:** 1
**Showing post:** 16

<div class="post-metadata">

### Author: ![shri](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/shri/32/197750_2.png) [@shri](https://meta.discourse.org/u/shri)
#### Post date: [July 13, 2016, 6:25am UTC](https://meta.discourse.org/t/implementing-google-tag-manager-with-discourse/36861/16 "2016-07-13T06:25:43Z")

</div>

@neil / @polusok

\*\*Should warn you - this is hacky and might just break everything. :slight_smile: \*\*

Javascript problems forced me to learn this:

> [@Script in /head broke site](https://meta.discourse.org/t/script-in-head-broke-site/36161/6):
>
> Check this post out it should so what you need…

I’ve had some success implementing GTM analytics for now.

1. Open your analytics account and go over to the real time \> content view. This should preferably be done on a development site to avoid noise from regular visitors.
2. Configure your **GTM TAG** as follows:

> - Product - Google Analytics
> - Type: Universal Analytics
> - Configure Tag: Tracking ID / enable disable whatever else you want, TrackType: Pageview. I also enable Debug View to get some logs in the JS console.
> - Fire On: We’ll select a custom trigger here after completing step 3

1. Configure a trigger as follows:

> - Event - Custom Event. I’ve called it ‘DiscourseRoute’
> - Fire On - Event Name (I’ve named it ‘PageView’ to keep things simple.

1. Go back to the tag and select the firing trigger to be the event you configured (DiscourseRoute)

In your admin → customise → CSS / HTML → Header add the call to GTM

```plaintext
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-ND3497"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','_YOUR_CONTAINERID_**');</script>
<!-- End Google Tag Manager -->
```

Note that this is called ‘dataLayer’ (case sensitive…)

In your `</body>` section add this.

```plaintext
<script>
    // console.log("Getting URL");
    Ember.Application.initializer({
        name: 'googleTagManager',

        initialize: function (container, application) {
        var router = container.lookup('router:main');
            console.log('Firing Custom Pageview');
            router.on('didTransition', function () {
                    dataLayer.push({
                         'event': 'PageView'
                    });

            });
        }
    });
</script>
```

Note that the event is a custom event called ‘PageView’.

Save / force refresh and inspect your JS console on your discourse page. You should see the event being fire (console log output) followed by a bunch of debug output from GTM showing that it converted the custom event into a analytics pageview and the variables being passed back to analytics.

The analytics real time console should also show the pageviews being sent over.

---

_[View the full topic](https://meta.discourse.org/t/implementing-google-tag-manager-with-discourse/36861)._