Merge pull request #765 from openstax/google-analytics

Track Google Analytics events in new Student flow

README.md

@@ -278,3 +278,61 @@ When someone signs up, especially if they are Educators, we want to keep track o
 Keeping the above in mind will help you make sense of the signup form and related business logic such as [PushSalesforceLead](app/routines/push_salesforce_lead.rb).
 
 In short, new users become sales leads in Salesforce.
+
+## Google Analaytics
+The following data is sent to Google Analytics
+
+When user lands on Login Page Send Referrer
+| Category | Action | Label |
+|----------|--------|-------|
+|Login & Account Creation|open|Referrer - [referrer URL]|
+
+When user logs in with Facebook
+| Category | Action | Label |
+|----------|--------|-------|
+|Login|Click|Facebook|
+
+When user logs in with Google
+| Category | Action | Label |
+|----------|--------|-------|
+|Login|Click|Google|
+
+When user logs in with Email and Password
+| Category | Action | Label |
+|----------|--------|-------|
+|Login|Click|Email|
+
+When a user reaches the Profile page via login (/login) or signup (/done)
+| Category | Action | Label |
+|----------|--------|-------|
+|Profile|Referrer|Referrer - [Referrer URL]|
+
+Account Creation Steps
+| Category | Action | Label |Description|
+|----------|--------|-------|-----------|
+|Account Creation|Click|1-Sign Up|Click the Sign Up tab|
+|Account Creation|Click|2A-Student|Click the Student card|
+|Account Creation|Click|2B-Educator|Click the Educator card|
+|Account Creation|Click|3A-Email|Enters an email and password|
+|Account Creation|Click|3B-Facebook|Clicks Facebook button|
+|Account Creation|Click|3C-Google|Clicks Google button|
+|Account Creation|Click|4-Confirm My Account|Clicks Confirm button after entering pin|
+|Account Creation|Click|5-Finish|Click the Finish button|
+|Account Creation|Click|5-Close Window|User closes the tab. This is somewhat unreliable since it can be triggered by other actions such as refeshing the page|
+
+Password Reset
+| Category | Action | Label |
+|----------|--------|-------|
+|Login|Click|Password Reset|
+
+Add Email Address
+| Category | Action | Label |
+|----------|--------|-------|
+|My Account|Click|Add Email Address|
+
+Close the Profile Page
+| Category | Action | Label |Description|
+|----------|--------|-------|-----------|
+|My Account|Click|Close Window|User closes the tab. This is somewhat unreliable since it can be triggered by other actions such as refeshing the page|
+
+

app/assets/javascripts/newflow.js

@@ -15,8 +15,10 @@ $(document).ready(function () {
         var password_field = $('[name$="[password]"]')[0];
         if ($(password_field).attr("type") == "password") {
             $(password_field).attr("type", "text");
+            gaShowHide('Show');
         } else {
             $(password_field).attr("type", "password");
+            gaShowHide('Hide');
         }
     });
 });

app/views/layouts/_google_analytics.html.erb

@@ -7,5 +7,79 @@ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 
 ga('create', '<%= Settings::GoogleAnalytics.google_analytics_code %>', 'auto');
 ga('send', 'pageview');
+
+$('[data-ga-category]').on('click', function() {
+  var category = $(this).data('ga-category');
+  var action = $(this).data('ga-action');
+  var label = $(this).data('ga-label');
+  ga('send', {
+    hitType: 'event',
+    eventCategory: category,
+    eventAction: action,
+    eventLabel: label
+  });
+});
+
+window.addEventListener('beforeunload', (event) => {
+  if((window.location.href.indexOf('<%= newflow_signup_path %>') > -1) || (window.location.href.indexOf('<%= profile_newflow_path %>') > -1)) {
+    var category = 'Account Creation';
+    var action = 'Click';
+    var label = '5-Close Window';
+    if (window.location.href.indexOf("/i/profile") > -1){
+      category = 'My Account'
+      label = 'Close Window'
+    }
+    ga('send', {
+      hitType: 'event',
+      eventCategory: category,
+      eventAction: action,
+      eventLabel: label
+    });
+  } 
+  return;
+});
+
+var gaShowHide = function(buttonText){
+  var location = 'Login'
+  if(window.location.href.indexOf('<%= newflow_signup_path %>') > -1) {
+    location = 'Sign Up';
+  }
+  ga('send', {
+      hitType: 'event',
+      eventCategory: 'SHOW/HIDE password',
+      eventAction: 'show/hide',
+      eventLabel: buttonText + ' - ' + location
+    });
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  if(window.location.href.indexOf('<%= newflow_login_path %>') > -1) {
+    ga('send', {
+      hitType: 'event',
+      eventCategory: 'Login & Account Creation',
+      eventAction: 'open',
+      eventLabel: 'Referrer - ' + document.referrer
+    });
+
+  } else if(window.location.href.indexOf('<%= profile_newflow_path %>') > -1) {
+    ga('send', {
+      hitType: 'event',
+      eventCategory: 'Profile',
+      eventAction: 'Referrer',
+      eventLabel: 'Referrer - ' + document.referrer
+    });
+
+  } else if(window.location.href.indexOf('<%= newflow_signup_path %>') > -1) {
+    ga('send', {
+      hitType: 'event',
+      eventCategory: 'Account Creation',
+      eventAction: 'Click',
+      eventLabel: '1-Sign Up'
+    });
+
+  }
+});
+
 </script>
 <% end %>
+

app/views/layouts/newflow_layout.html.erb

@@ -40,6 +40,7 @@
         </div>
 
         <%= render partial: 'layouts/newflow_footer' %>
+        <%= render partial: "layouts/google_analytics" %>
 
         <%= yield :javascript %>
     </body>

app/views/newflow/login_signup/_confirmation_form_template.html.erb

@@ -41,7 +41,8 @@
                 <div class="content">
                     <%= f.submit I18n.t(:"login_signup_form.confirm_my_account_button"),
                                         disable_with: I18n.t(:"login_signup_form.confirm_my_account_button"),
-                                        class: 'primary' %>
+                                        class: 'primary',
+                                        :data => {:'ga-category' => 'Account Creation', 'ga-action': 'Click', 'ga-label': '4A-Confirm My Account'} %>
                 </div>
 
             <% end %>

app/views/newflow/login_signup/confirmation_form_updated_email.html.erb

@@ -6,7 +6,8 @@ render(
     help_message: I18n.t(
         :"login_signup_form.havent_received_message",
         contact_us: link_to(
-          I18n.t(:"login_signup_form.contact_us"), knowledge_base_url, target: '_blank'
+          I18n.t(:"login_signup_form.contact_us"), knowledge_base_url, target: '_blank',
+          :data => {:'ga-category' => 'Login', 'ga-action': 'Click', 'ga-label': 'Contact Us'}
         )
     ).html_safe
   }

app/views/newflow/login_signup/forgot_password_form.html.erb

@@ -39,7 +39,8 @@
                         I18n.t(
                             :"login_signup_form.cant_remember_email",
                             contact_us_link:link_to(
-                            I18n.t(:"login_signup_form.contact_us"), knowledge_base_url, target: '_blank'
+                            I18n.t(:"login_signup_form.contact_us"), knowledge_base_url, target: '_blank',
+                            :data => {ga_category: 'Login', ga_action: 'Click', ga_label: 'Contact Us'}
                             )
                         ).html_safe
                         %>
@@ -48,7 +49,8 @@
                 <div class="content">
                     <%= f.submit I18n.t(:"login_signup_form.reset_my_password_button"),
                                         disable_with: I18n.t(:"login_signup_form.reset_my_password_button"),
-                                        class: 'primary' %>
+                                        class: 'primary',
+                                        :data => {ga_category: 'Login', ga_action: 'Click', ga_label: 'Password Reset'} %>
                 </div>
 
             <% end %>

app/views/newflow/login_signup/login_form.html.erb

@@ -20,14 +20,14 @@
                         <div class="social-buttons">
 
                             <div class="fb-share-button">
-                                <%= link_to newflow_auth_path(:facebooknewflow), class: 'facebook btn' do %>
+                                <%= link_to newflow_auth_path(:facebooknewflow), class: 'facebook btn', data: { ga_category: 'Login', ga_action: 'Click', ga_label: 'Facebook' }  do %>
                                     <i class="social-icon fa fa-facebook"></i>
                                     <span>Facebook</span>
                                 <% end %>
                             </div>
 
                             <div class="google-share-button">
-                                <%= link_to newflow_auth_path(:googlenewflow), class: 'google btn' do %>
+                                <%= link_to newflow_auth_path(:googlenewflow), class: 'google btn', data: { ga_category: 'Login', ga_action: 'Click', ga_label: 'Google' } do %>
                                     <i class="social-icon fa fa-google"></i>
                                     <span>Google</span>
                                 <% end %>
@@ -58,7 +58,7 @@
                                     class: 'field-label required'
                             %>
                             <span id="password-show-hide-button">
-                                <span class="toggle-show-hide">SHOW</span>
+                                <span class="toggle-show-hide" data-ga_category='SHOW/HIDE password', data-ga_action='Click', data-ga_label='SHOW - Logon'>SHOW</span>
                                 <span class="toggle-show-hide" style="display: none">HIDE</span>
                             </span>
                             <%= fh.text_field name: :password,
@@ -71,7 +71,8 @@
                     <div class="content">
                         <%= f.submit I18n.t(:"login_signup_form.continue_button"),
                                     disable_with: I18n.t(:"login_signup_form.continue_button"),
-                                    class: 'primary'
+                                    class: 'primary',
+                                    data: { ga_category: 'Login & Account Creation', ga_action: 'Continue', ga_label: 'Continue ' }
                         %>
                     </div>
 
@@ -80,7 +81,8 @@
                             link_to(
                                 I18n.t(:"login_signup_form.forgot_password"),
                                 forgot_password_form_path,
-                                id: 'forgot-passwork-link'
+                                id: 'forgot-passwork-link',
+                                data: { ga_category: 'Login', ga_action: 'Click', ga_label: 'Password Reset' }
                             )
                         %>
                     </div>

app/views/newflow/login_signup/profile_newflow.html.erb

@@ -62,7 +62,7 @@
 
 <%= ox_card do %>
   <div class="profile-title">
-    <%= link_to ('Log out'), newflow_logout_path, class: 'sign-out' %>
+    <%= link_to ('Log out'), newflow_logout_path, class: 'sign-out', :data => {:'ga-category' => 'Logout', 'ga-action': 'Click', 'ga-label': 'Logout'} %>
     <h1 class="title"><%= t(:"login_signup_form.profile_newflow_page_header") %></h1>
   </div>
 
@@ -97,7 +97,7 @@
       <% current_user.email_addresses.order(:created_at).each do |email| %>
         <%= email_entry(value: email.value, id: email.id, is_verified: email.verified, is_searchable: email.is_searchable) %>
       <% end %>
-      <%= link_to t(:"users.edit.add_email_address"), '#', {id: 'add-an-email'} %>
+      <%= link_to t(:"users.edit.add_email_address"), '#', { id: 'add-an-email', data: { 'ga-category': 'My Account', 'ga-action': 'Click', 'ga-label': 'Add Email Address' } } %>
     </div>
   </div>
 

app/views/newflow/login_signup/signup_done.html.erb

@@ -15,7 +15,7 @@
                     <br />
                     <%= image_tag('highlighting_and_note_taking.png', style: 'width: inherit;' ) %>
 
-                    <%= button_tag('Finish') %>
+                    <%= button_tag('Finish', :data => {:'ga-category' => 'Account Creation', 'ga-action': 'Click', 'ga-label': '5-Finish'}) %>
                 </div>
             </form>
         <% end  %>

app/views/newflow/login_signup/student_signup_form.html.erb

@@ -40,14 +40,16 @@
 
                         <div class="fb-share-button">
                             <%= link_to newflow_auth_path(:facebooknewflow),
-                                        class: 'facebook btn' do %>
+                                        class: 'facebook btn',
+                                        :data => {ga_category: 'Account Creation', ga_action: 'Click', ga_label: '3B-Facebook'} do %>
                                 <i class="social-icon fa fa-facebook"></i>
                                 <span>Facebook</span>
                             <% end %>
                         </div>
 
                         <div class="google-share-button">
-                            <%= link_to newflow_auth_path(:googlenewflow), class: 'google btn' do %>
+                            <%= link_to newflow_auth_path(:googlenewflow), class: 'google btn',
+                                    :data => {ga_category: 'Account Creation', ga_action: 'Click', ga_label: '3C-Google'} do %>
                                 <i class="social-icon fa fa-google"></i>
                                 <span>Google</span>
                             <% end %>
@@ -155,7 +157,8 @@
                 <div class="content">
                     <%= f.submit I18n.t(:"login_signup_form.continue_button"),
                                         data: { disable_with: I18n.t(:"login_signup_form.continue_button") },
-                                        class: 'primary', id: 'signup_form_submit_button' %>
+                                        class: 'primary', id: 'signup_form_submit_button',
+                                        :data => {ga_category: 'Account Creation', ga_action: 'Click', ga_label: '3A-Email'} %>
                 </div>
             <% end %>
         <% end %>

app/views/newflow/login_signup/welcome.html.erb

@@ -14,7 +14,7 @@
                     <div class="join-as">
 
                         <div>
-                            <%= link_to newflow_signup_student_path do%>
+                            <%= link_to newflow_signup_student_path, :data => {:'ga-category' => 'Account Creation', 'ga-action': 'Click', 'ga-label': '2A-Student'} do%>
                                 <div class="join-as__role student">
                                     <span><%= I18n.t(:"login_signup_form.student") %></span>
                                     <%= image_tag('student-icon.svg') %>
@@ -30,7 +30,7 @@
                         <div>
                             <%# bpff = "bypass feature flag" %>
                             <%# the value is just a boolean. In this case I decided to use `9` for a little code obfuscation. %>
-                            <%= link_to signup_path(bpff: 9)  do%>
+                            <%= link_to signup_path(bpff: 9), :data => {:'ga-category' => 'Account Creation', 'ga-action': 'Click', 'ga-label': '2B-Educator'} do%>
                                 <div class="join-as__role educator">
                                     <span><%= I18n.t(:"login_signup_form.educator") %></span>
                                     <%= image_tag('educator-icon.svg') %>