gtag not sending custom dimensions for events

9
votes

I'm having trouble using gtag to send to custom dimensions. I'm currently following their gtag documentation.

Screenshot of the custom dimensions created for my google analytics property enter image description here

Right now I currently initialize my gtag in the head with the following code:

%script{:async => "", :src => "https://www.googletagmanager.com/gtag/js?id=#{APP_CONFIG[:ga_tracking_code]}"}
:javascript
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '#{APP_CONFIG[:ga_tracking_code]}', {
   'custom_map': {
                   'dimension1': 'user_type'
                   'dimension2': 'organization_id'
                 }
  });

Events are currently logged like this

gtag('event', 'test_event', {
                             'event_category': 'test_category', 
                             'organization_id': 'test_org',
                             'user_type': 'test_user_type'
                            });

Looking forward to responses as I have not made progress figuring this out for the past two days.

2
javascriptgoogle-analyticsgtag.js
You might want to match your quotes on your dimensions correctly in your event, unless those are just typos. – Confuzing
That was a typo, thanks for noticing. Will update the question. I figured out what the issue was and answered below. – raman

2 Answers

14
votes

So after going through this over and over a bunch of times I realized cause of the issue.

Our application is a mix of an SPA with server side rendered pages. In our router for the front end I was doing this

let path = SomeRouter.currentPath
gtag('config', gaTrackingCode, {page_path: path})

The issue was that I was not passing in custom_map into the configuration again when sending the page view

Every time you call gtag('config', gaTrackingCode, configParameters) you need to resend the custom_map in the configParamters if you are setting custom dimensions and metrics.

Therefore the I changed the code to look like this

let path = SomeRouter.currentPath
gtag('config', gaTrackingCode,
  {
     page_path: path,
     custom_map: {
               'dimension1': 'user_type'
               'dimension2': 'organization_id'
               }
   })

Now when I send an event, regardless if the route has changed, the custom dimensions are sent to google analytics.

8
votes

I'm dense and I cannot for the life of me understand Google's documentation on Custom dimensions and metrics with gtag.js.

Thank you to the authors of the other answers to point me in the right direction but their answers did not get me to the finish line. So here is how I got my Custom Dimensions implementation working, step by step.

Example: tracking a page view with two custom dimensions

Step 1: you must add/configure custom dimension(s) in the Google Analytics admin website before you can track them in your code. In other words, you must make Google Analytics aware that you're planning to send the dimensions. Add dimensions by following these instructions: Create and edit custom dimensions and metrics

For this example I crated created two dimensions called "yourFirstDimensionName" and "yourSecondDimensionName". Both have a scope of "Hit".

Step 2: at runtime, configure the dimensions and set their values

var pagePath = location.href;
var pageTitle = 'This is a test!';

gtag('config', 'YOUR_TRACKING_ID_HERE',

    // Tell GTag how to map the dimension names with the values.
    'custom_map': {
        'dimension1': 'yourFirstDimensionName',
        'dimension2': 'yourSecondDimensionName'
    },

    // Set the page track information
    'page_path': pagePath,
    'page_title': pageTitle,

    // Set the actual values of the dimensions.
    'yourFirstDimensionName': 'theValueOfTheFirstDimension',
    'yourSecondDimensionName': 'theValueOfTheSecondDimension',
);

Step 3: use the Google Analytics Debugger Chrome extension to watch what GTag is actually sending

Using the Google Chrome web browser, install the Google Analytics Debugger extension. Open the F12 Developer Tools and then visit a page that has your GTag script running. If your GTag code is running correctly then you should see the custom dimensions appear in the payload of the "pageview" commands, as shown below.

In this screenshot example, the custom dimension "dimension1" has a value of "QA".

enter image description here