Google Tag Manager Recipes

[christopher_phi]

Once you have Google Tag Manager setup and running on your Canvas account there are all kinds data that you can start gathering. Below are some code snippets or recipes you can use to get more data out of Google Analytics. 

• Custom Dimensions
• Activity
• Sample Data Returned
• Code
• Course ID
• Sample Data Returned
• Code
• Course Name
• Sample Data Returned
• Code
• Canvas User Role
• Sample Data Returned
• Code
• Canvas User ID
• Sample Data Returned
• Code
• Mobile or Browser
• Sample Data Returned
• Code
• Behaviors and Events
• Track File Downloads
• Configure Built-in Variables
• Create New User-Defined Variable
• Define Trigger
• Create Tag
• Publish

Custom Dimensions

Once you have setup custom dimensions in your Google Analytics account all you need to do is add the relevant code below into a variable in Google Tag Manager and assign that adding these custom dimensions is as simple as putting the code below into a variable and assigning it to a dimension. See Google Analytics Custom Dimensions through Google Tag Manager for instructions on both of those steps. 

Activity

This recipe determines the type of Canvas activity based on the URL and returns it as the activityType variable. 

Sample Data Returned

• Content Page
• Assignment List
• People

Code

Variable Type: Custom Javascript

// 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;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Course ID

The Course ID is already set in Canvas, all you need to do is put the variable into Googl

Sample Data Returned

• 468601
• 469120
• 470906

Code

Variable Type:  JavaScript variable

ENV.COURSE_ID‍‍‍‍‍

Course Name

Provides the name of the course. 

Sample Data Returned

• Fa17 PHYS-2220-001
• Fa17 BIOL-1610-001
• Fa17 CS-1400-001

Code

Variable Type: JavaScript variable

courseName‍‍‍‍

Canvas User Role

This one is a little more complicated and there are a couple of ways to grab this data. For now at least it is difficult to grab the role of the user for the specific page that they are on, so we grab all of the roles for that user. In our institution the vast majority of users are simply "student", however if a grad student is both a student and a teacher then the role for that user would be returned as "student, teacher". 

Sample Data Returned

• student
• student,teacher
• teacher

Code

Variable Type:  JavaScript variable

function identifyRole() {
     var roles = ENV.current_user_roles.toString();
       roles = roles.replace('user,', '');
return roles;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Canvas User ID

Although it is possible to grab the actual username, bringing in personal identifiable information violates the Google Analytics terms of service. However, once you are bringing in the User ID you can bring in the username locally using the Google Chrome PII Viewer for Google Analytics. 

Sample Data Returned

• 826131
• 145392
• 774836

Code

Variable Type:  JavaScript variable

ENV.current_user_id‍‍‍‍

Mobile or Browser 

Although Google does some device tracking, we added a specific variable to differentiate between mobile browser traffic and mobile app traffic. The custom JavaScript file is different for the Canvas browser experience and Canvas app so this one is as easy as setting the variable in the custom JavaScript for each. 

Sample Data Returned

• Browser
• Canvas Mobile App

Code

Variable Type: Constant

Browser‍‍‍

In the variable for the app you would use: 

Canvas Mobile App‍‍‍

Behaviors and Events

Tracking events is an incredibly valuable feature of Google Analytics platform and can be used to track almost any type of user behavior including scroll depth, percent of videos watched, tracking outbound links forms submitted, use of LTI tools, etc. Below is a recipe to track file downloads. 

Track File Downloads

While Canvas provides helpful analytics on usage of many types of content, there is currently no way to track file downloads through Canvas. Fortunately it is fairly straightforward to add that tracking in Google Tag Manager. 

Configure Built-in Variables

The first step is to go into the variables section of Google Tag Manager and ensure that the necessary built-in variables are configured. Go to Variables > Built-in Variables > Configure and then make sure "Click Text" and "Click URL" are enabled.

Create New User-Defined Variable

 From the variables page you now need to create a new variable to capture the name of the file from Canvas. This is what a link to file looks like in Canvas: 

<a class="" title="15-02-13 LDS Accessibility Report.docx" href="https://usu.instructure.com/courses/431567/files/64892122/download?wrap=1" data-api-endpoint="https://usu.instructure.com/api/v1/courses/431567/files/64892122" data-api-returntype="File">15-02-13 LDS Accessibility Report.docx</a>‍‍

The actual link is an obscure internal reference that would not be very helpful in our report but the actual file name is listed in the title attribute so we will grab that instead. To do so, go to the Variables page again and  click "New" under User-Defined Variables name the variable "Canvas Link Title" and select "Auto-Event Variable" as the variable type under Page Elements. Set the Variable Type as "Element Attribute" and the Attribute name as "title", now we have a variable that will collect whatever is inside the "title" element. Click Save. 

Define Trigger 

Now we need to define the trigger that will tell Google Tag Manager when to collect the data that we need. Go to Triggers and click New. Name your Trigger "Download File on Click" and select the trigger type of "Just Links" under Click. Go ahead and click "Wait for Tags" and "Check Validation" and under "Enable this trigger when all of these conditions are true" select "Page URL", "matches RegEx" and ".*". This tell Google Tag Manger to run the tag on all of your pages. Next we want to specify that the tag should only fire when the title tag includes certain types of file extensions. To do that click "Some Link Clicks" and then specific:

• "Canvas Link Title" (the variable we setup earlier)
• "matches RegEx (ignore case)"
• "\.(pdf|doc|dot|odt|pages|ppt|pps|pot|odp|key|xls|xlt|ods|numbers|rtf|txt|csv|htm|zip)"  

That RegEx includes the file extensions that we decided to track. You could easily add or remove file extensions from that list. Click Save. 

Create Tag

The last step is to go to Tags and click "New". For the tag type select "Universal Analytics" under the Featured Section. Name your tag "File Downloads".  For Track Type select "Event" and enter the following Event Tracking Parameters: 

• Category: File Download 
• Action: {{Click Text}}
• Label: {{Canvas Link Title}}

The Non-Interaction Hit should be set to "False" and you can set your Google Analytics Settings to  {{Google Analytics Settings}}.  

Then go down to your Trigger and select the Trigger you setup earlier, "Download File on Click". 

Publish

You are finished - you may want to preview first to make sure it is working and then click "Publish" to deploy a new version to your Google Tag Manager Code. You should be able to see data coming in immediately by going to the Google Analytics Real-Time > Events menu. With a day you will also see data showing up under Behavior > Events > Overview. 

[jperkins]

Just wanted to say first that this is an awesome resource.

A quick note on using ENV variables... some are consistent between course pages, and others are not. For example, ENV.course_id is not found on the course syllabus page.

For course_id I've found that using regex to pull the course_id from url to be more reliable than from ENV.course_id.  Sample Javascript to pull course_id from url with regex below:

var isCourse = window.location.pathname.match(/\/courses\/(\d+)/);
if (isCourse != null) {
  return isCourse[1]
}
return null‍‍‍‍‍‍‍‍‍‍‍

[christopher_phi]

Thank you so much  @jperkins , that is super helpful - a helpful update to make our data a little more reliable. Is there any documentation where I could look at whether this issue exists for other ENV variables as well?