fix(gatsby-plugin-google-tagmanager): Properly communicate site title with GTM services

packages/gatsby-plugin-google-tagmanager/README.md

@@ -29,6 +29,18 @@ plugins: [
 ]
 ```
 
+#### Tracking routes
+
+This plugin will fire a new event called `gatsby-route-change` whenever a route is changed in your Gatsby application. To record this in Google Tag Manager, we will need to add a trigger to the desired tag to listen for the event:
+
+1. Visit the [Google Tag Manager console](https://tagmanager.google.com/) and click on the workspace for your site.
+2. Navigate to the desired tag using the 'Tags' tab of the menu on the right hand side.
+3. Under "Triggering", click the pencil icon, then the "+" button to add a new trigger.
+4. In the "Choose a trigger" window, click on the "+" button again.
+5. Choose the trigger type by clicking the pencil button and clicking "Custom event". For event name, enter `gatsby-route-change`.
+
+This tag will now catch every route change in Gatsby, and you can add Google tag services as you wish to it.
+
 #### Note
 
-Out of the box this plugin will simply load Google Tag Manager on the initial page/app load. It's up to you to fire tags based on changes in your app. To automatically track page changes, in GA for instance, you can configure your tags in GTM to trigger on [History Change](https://support.google.com/tagmanager/answer/7679322?hl=en&ref_topic=7679108).
+Out of the box this plugin will simply load Google Tag Manager on the initial page/app load. It's up to you to fire tags based on changes in your app. See the above "Tracking routes" section for an example.

packages/gatsby-plugin-google-tagmanager/src/gatsby-browser.js

@@ -0,0 +1,6 @@
+exports.onRouteUpdate = ({ location }) => {
+  // wrap inside a timeout to ensure the title has properly been changed
+  setTimeout(() => {
+    window.dataLayer.push({ event: `gatsby-route-change` })
+  }, 50)
+}