diff --git a/static/js/controllers.js b/static/js/controllers.js index c4c4271c1..99cc1781a 100644 --- a/static/js/controllers.js +++ b/static/js/controllers.js @@ -79,7 +79,8 @@ function TutorialCtrl($scope, AngularTour, AngularTourSignals, UserService) { return message['data']['action'] == 'login'; }), 'waitMessage': "Waiting for docker login", - 'skipTitle': "I'm already logged in" + 'skipTitle': "I'm already logged in", + 'mixpanelEvent': 'tutorial_start' }, { 'title': 'Step 2: Create a new container', @@ -100,7 +101,8 @@ function TutorialCtrl($scope, AngularTour, AngularTourSignals, UserService) { } return pushing; }), - 'waitMessage': "Waiting for repository push to begin" + 'waitMessage': "Waiting for repository push to begin", + 'mixpanelEvent': 'tutorial_wait_for_push' }, { 'title': 'Push in progress', @@ -115,7 +117,8 @@ function TutorialCtrl($scope, AngularTour, AngularTourSignals, UserService) { 'title': 'Step 5: View the repository on Quay.io', 'templateUrl': '/static/tutorial/view-repo.html', 'signal': AngularTourSignals.matchesLocation('/repository/'), - 'overlayable': true + 'overlayable': true, + 'mixpanelEvent': 'tutorial_push_complete' }, { 'content': 'Waiting for the page to load', @@ -131,7 +134,8 @@ function TutorialCtrl($scope, AngularTour, AngularTourSignals, UserService) { { 'title': 'Repository View', 'content': 'This is the repository view page. It displays all the primary information about your repository.', - 'overlayable': true + 'overlayable': true, + 'mixpanelEvent': 'tutorial_view_repo' }, { 'title': 'Image History', @@ -161,7 +165,8 @@ function TutorialCtrl($scope, AngularTour, AngularTourSignals, UserService) { { 'title': 'Repository Admin', 'content': "The repository admin panel allows for modification of a repository's permissions, webhooks, visibility and other settings", - 'overlayable': true + 'overlayable': true, + 'mixpanelEvent': 'tutorial_view_admin' }, { 'title': 'Permissions', @@ -178,7 +183,8 @@ function TutorialCtrl($scope, AngularTour, AngularTourSignals, UserService) { }, { 'templateUrl': '/static/tutorial/done.html', - 'overlayable': true + 'overlayable': true, + 'mixpanelEvent': 'tutorial_complete' } ] }; diff --git a/static/js/tour.js b/static/js/tour.js index d62a28f71..eac104eda 100644 --- a/static/js/tour.js +++ b/static/js/tour.js @@ -134,6 +134,15 @@ angular.module("angular-tour", []) }); }; + var fireMixpanelEvent = function() { + if (!$scope.step || !mixpanel) { return; } + + var eventName = $scope.step['mixpanelEvent']; + if (eventName) { + mixpanel.track(eventName); + } + }; + $scope.setStepIndex = function(stepIndex) { // Close existing spotlight and signal timer. teardownSignal(); @@ -149,6 +158,8 @@ angular.module("angular-tour", []) $scope.step = $scope.tour.steps[stepIndex]; + fireMixpanelEvent(); + // If the signal is already true, then skip this step entirely. setupSignal(); if (checkSignal()) {