[ARCHIVED] Google Analytics Custom Dimensions through Google Tag Manager

[christopher_phi]

Once you have setup Google Tag manager ( Using Google Tag Manager to add Google Analytics), there are all kinds of cool things you can start to do. This document will go over how to add custom dimensions to track additional information that you can get from Canvas. Once Google Analytics is installed you will start seeing all kinds of information from your Canvas visitors including: 

1. Age and Gender of site visitors 
2. Location data (country, state, city)
3. Technology (browser, mobile, device) 
4. User languages 
5. Page views, bounce rates and exit pages

Beyond the standard web analytics that come out of the box from Google Analytics, custom dimensions to your site allows you to track Canvas specific information about your site visitors such as: 

• Types of Activities (Course Home, Quiz, Assignment, etc.)
• The Canvas Course ID
• User Roles 
• The User ID 
• Mobile App Usage
• File Downloads

I will also share some information about a few additional variables that you can include with some extra work. Let's get started! 

Setting up Custom Dimensions

Google Analytics Custom Dimensions

The first step will be to setup your custom dimensions in Google Analytics (GA). Once you have setup the custom dimensions we will put the code needed to gather that information into Google Tag Manager (GTM) without having to update the embed code in already into the Canvas global header. Here are instructions for setting up custom dimensions in GA. You can add dimensions in any order, but you may want to align your variables with those mentioned in How to Set Up Google Analytics for Canvas to be able to use some of the shared dashboards that  @jperkins  recommends such as: 

Custom Dimension 1	Index	Scope
Canvas User ID	1	User
Canvas User Role	3	User
Canvas Course ID	4	Hit
Canvas Course Name	5	Hit
Canvas Sub-Account ID	6	Hit

Google Tag Manager Variables

Once you have setup your custom dimensions in GA, you login to GTM where we will setup to variables to populate your custom dimensions. Google Tag Manager has a number of built-in variables as well as user-defined variables. We will be adding a new user-defined variable. Go to the variables page in your GTM Workspace and click New under "User-Defined Variables". 
   

Let's go over a couple of examples of how to populate those variables. 

Course ID Variable

The Course ID is already stored by Canvas so this is an easy one. After clicking "New" to add a variable, click on "Choose a variable type to begin setup..." then give the variable a name (Course ID) and select "JavaScript Variable": 

The global variable used by Canvas for the Course ID is "ENV.COURSE.id" so all we need to do is input that into the Global Variable Name field and click Save: 

Congratulations! You just added your first variable. Let's add one more that is a little more complex and then we will map them to our custom dimensions. 

Type of Activity

Go ahead and create a new variable again, but this type select a variable type "Custom Javascript". Name your variable and then insert the following code which uses the page URL to determine the type of course activity:

// Pull activity type based on url
function identifyActivity() {
    var url = document.location.href,
        activityType = 'unknown';
    if (url.indexOf('/pages/') > -1) {
        activityType = 'Content Page';
    } else if (url.indexOf('/pages') > -1) {
        activityType = 'Content Pages List';
    } else if (url.indexOf('/assignments/syllabus') > -1) {
        activityType = 'Syllabus';
    } else if (url.indexOf('/assignments/') > -1) {
        activityType = 'Assignment';
    } else if (url.indexOf('/assignments') > -1) {
        activityType = 'Assignment List';
    } else if (url.indexOf('/discussion_topics/') > -1) {
        activityType = 'Discussion';
    } else if (url.indexOf('/discussion_topics') > -1) {
        activityType = 'Discussion List';
    } else if (url.indexOf('/files') > -1) {
        activityType = 'Files';
    } else if (url.indexOf('/grades') > -1) {
        activityType = 'Grades';
    } else if (url.indexOf('/announcements') > -1) {
        activityType = 'Announcements';
    } else if (url.indexOf('/users') > -1) {
        activityType = 'People';
    } else if (url.indexOf('/outcomes') > -1) {
        activityType = 'Outcomes';
    } else if (url.indexOf('/quizzes/') > -1) {
        activityType = 'Quiz';
    } else if (url.indexOf('/quizzes') > -1) {
        activityType = 'Quizzes List';
    } else if (url.indexOf('/modules') > -1) {
        activityType = 'Modules List';
    } else if (url.indexOf('/conferences') > -1) {
        activityType = 'Conferences';
    } else if (url.indexOf('/collaborations') > -1) {
        activityType = 'Collaborations';
    } else if (url.indexOf('/external_tools/') > -1) {
        activityType = 'External Tool';
    } else if (typeof ENV.COURSE_HOME !== undefined) {
        activityType = 'Course Home';
    }
    return activityType;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Then click Save and you have added your second variable! You can view information on additional Canvas variables on this page. 

Mapping Google Tag Manager Custom Dimensions

Once you have added your variables, we need to map them to the custom dimensions that we setup earlier in Google Analytics. Here are the steps:

1. Go to Variables and click on the "Google Analytics Settings"
2. Click on the "Variable Configuration" pane to edit the variable.
3. Click on "More Settings", "Custom Dimensions" and then "+ Add Custom Dimension"
4. Add the index number that aligns with the custom dimension you setup in Google Analytics and then click on the lego brick to add the correct variable. 

That's it! Add as many custom dimensions as needed. Once you are are done adding your variables you can preview your changes in Google Tag Manager to make sure everything is working correctly and click "Publish" as soon as you are ready! 

Check out https://community.canvaslms.com/docs/DOC-13159 for more ideas. 

Additional Resources

Custom Dimensions in Google Analytics

1. Create and edit custom dimensions and metrics
2. Custom Dimensions and Metrics

Google Tag Manager Variables

1. Variable Guide For Google Tag Manager
2. Tag Manager Help: Variables

Canvas and Google Analytics

1. Google Analytics and Canvas Resources 
2. Using Google Tag Manager to add Google Analytics 

[marshall_newton]

I seem not to be able to get the custom dimensions to work when I click on the brick it does not bring them up at all.

[christopher_phi]

Hello  @marshall_newto1 ‌ the custom dimensons will not be there by default, you will have to add each one that you would like to use. Or if you are saying that you are not able to add custom dimensions, that sound like an issue with Tag Manager. 

[asundal22]

I have a question - I'm adding the user-defined variables in tag manager to populate the custom dimensions in analytics. 

Currently, with all the code I've found and used, the only way I can populate the variables for Course Name, Sub-Account ID, Enrollment Term ID, and Enrollment Type is to run multiple API calls- specifically, a different API call for each variable. But I would like to avoid this. I was wondering if it's possible to do one API call in Google Tag Manager to populate multiple tag variables?  If not, is it better to do this in Google Analytics and put the script directly into the Canvas Theme Editor? Curious about your thoughts.

[christopher_phi]

Good question - 

I am going to tag  @kenneth_larsen ‌ to make sure I'm giving you the correct information - but my understanding is the way that we have ours setup is that those variables are populated in the Canvas Theme editor and then it is easy to pull them into GTA without making additional API calls. 

[kenneth_larsen]

Sorry, I'm a little late at seeing this. Christopher is correct, we are gathering the information using JavaScript that is uploaded into the Canvas Theme Editor and then passing it to GTA. Some of the data we have pulled into a database for other purposes and we are querying that database rather than the Canvas API but the beauty of querying the API using JavaScript in Canvas rather than GTA is that the API calls will act as the enrolled user without having to deal with OAuth tokens in GTA.

[akshays]

I want to store Api request payload json object into google analytics using custom dimensions. How i can do that? Is any idea regarding this? Also this payload needs to be store in bigquery as well.

[manilpit]

Hey!

Ive set up my container and gtm with this recipie. However when i try to use the custom dimentions, in this case course_id and course_name they are always undefined. 

This is the output i get in tag preview and under variables for custom dimentions

Course ID	JavaScript Variable	undefined	undefined
Course Name	JavaScript Variable	undefined	undefined

Anyone have an idea why it might be undefned?

Ive set up my tags, variables etc with the js provided. In my canvas instalation i have the head of the gtm tag. 

Is there any code i need to add to the head gtm tag to forward the custom dimentions? 

Using unversal analytics and not ga4.

thank you in advanced