Add support for Amplitude clickstream/tracking (#132)

bodom0015 · lmarini · web-flow · commit 773f5adf6177 · 2020-11-23T12:55:30.000-06:00
* Allow admin/customize to specify an amplitude access key

* If configured, include Amplitude tracking snippet on each view

* fix: slimmed-down basic Amplitude event tracking

* Count views of files/datasets/collections by id

* Count file/dataset submissions to each extractor

* Count new file uploads to datasets (via the UI)

* Capture viewer details for view_resource events

* Capture submitter details for extraction events

* Added CHANGELOG entry

Co-authored-by: Luigi Marini &lt;lmarini@users.noreply.github.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## Unreleased
+
+### Added
+- Added support for Amplitude clickstream tracking. See Admin -> Customize to configure Amplitude apikey.
+
+
 ## 1.12.1 - 2020-11-05
 
 ### Fixed
diff --git a/app/api/Admin.scala b/app/api/Admin.scala
@@ -80,6 +80,8 @@ class Admin @Inject() (userService: UserService,
     getValueString(request.body, "sensor").foreach(AppConfiguration.setSensorTitle(_))
     getValueString(request.body, "parameters").foreach(AppConfiguration.setParametersTitle(_))
     getValueString(request.body, "parameter").foreach(AppConfiguration.setParameterTitle(_))
+    getValueString(request.body, "amplitudeApikey").foreach(AppConfiguration.setAmplitudeApiKey(_))
+
     getValueString(request.body, "tosText").foreach { tos =>
       events.addEvent(Event(request.user.get, event_type = EventType.TOS_UPDATE.toString))
       AppConfiguration.setTermsOfServicesText(tos)
diff --git a/app/controllers/Admin.scala b/app/controllers/Admin.scala
@@ -29,7 +29,8 @@ class Admin @Inject() (sectionIndexInfo: SectionIndexInfoService, userService: U
     Ok(views.html.admin.customize(theme,
       AppConfiguration.getDisplayName,
       AppConfiguration.getWelcomeMessage,
-      AppConfiguration.getGoogleAnalytics))
+      AppConfiguration.getGoogleAnalytics,
+      AppConfiguration.getAmplitudeApiKey))
   }
 
   def tos = ServerAdminAction { implicit request =>
diff --git a/app/services/AppConfigurationService.scala b/app/services/AppConfigurationService.scala
@@ -116,11 +116,23 @@ object AppConfiguration {
   /** Set the google analytics code */
   def setGoogleAnalytics(gacode: String) = appConfig.setProperty("google.analytics", gacode)
 
-  /** Get the welcome message */
+  /** Get the google analytics code */
   def getGoogleAnalytics: String = appConfig.getProperty("google.analytics", "")
 
   // ----------------------------------------------------------------------
 
+  /** Set the Amplitude clickstream/analytics configuration */
+  def setAmplitudeApiKey(ampApiKey: String) = {
+    appConfig.setProperty("amplitude.apikey", ampApiKey)
+  }
+
+  /** Get the Amplitude clickstream/analytics configuration */
+  def getAmplitudeApiKey: String = {
+    appConfig.getProperty("amplitude.apikey", "")
+  }
+
+  // ----------------------------------------------------------------------
+
   /** Set the Sensors title */
   def setSensorsTitle(sensorsTitle: String) = appConfig.setProperty("sensors.title", sensorsTitle)
 
diff --git a/app/views/admin/customize.scala.html b/app/views/admin/customize.scala.html
@@ -1,4 +1,4 @@
-@(theme: String, displayName: String, welcomeMessage: String, googleAnalytics: String)(implicit user: Option[models.User])
+@(theme: String, displayName: String, welcomeMessage: String, googleAnalytics: String, amplitudeApiKey: String)(implicit user: Option[models.User])
 @main("Customize") {
     <div class="page-header">
         <h1>Customize</h1>
@@ -49,7 +49,16 @@ <h1>Customize</h1>
             <div class="col-md-6">
                 <div class="form-group">
                     <label for="googleAnalytics">Google Analytics Code</label>
-                    <input class="form-control" id="googleAnalytics" name="googleAnalytics" type="text" value="@(googleAnalytics)"></input>
+                    <input class="form-control" id="googleAnalytics" name="googleAnalytics" type="text" value="@(googleAnalytics)" />
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-6">
+                <div class="form-group">
+                    <label for="amplitudeApiKey">Amplitude API Key</label>
+                    <input class="form-control" id="amplitudeApiKey" name="amplitudeApiKey" type="text" value="@(amplitudeApiKey)" />
                 </div>
             </div>
         </div>
@@ -101,13 +110,16 @@ <h1>Customize</h1>
             var theme = $("#themeSelect").val().trim();
             var googleAnalytics = $("#googleAnalytics").val().trim();
 
+            var amplitudeApiKey = $("#amplitudeApiKey").val().trim();
+
             $.ajax({
                 url:  "@api.routes.Admin.updateConfiguration",
                 data: JSON.stringify({
                     displayName: displayName,
                     welcomeMessage: welcomeMessage,
                     theme: theme,
-                    googleAnalytics: googleAnalytics
+                    googleAnalytics: googleAnalytics,
+                    amplitudeApikey: amplitudeApiKey
                 }),
                 type: "POST",
                 contentType: "application/json"
diff --git a/app/views/collectionofdatasets.scala.html b/app/views/collectionofdatasets.scala.html
@@ -13,6 +13,7 @@
 @import models.UUID
 @import api.Permission
 @import _root_.util.Formatters._
+@import services.AppConfiguration
 
 @showPreview(name: String, url: String, collection_id: String) = {
 <script>
@@ -33,7 +34,19 @@
 <script src="@routes.Assets.at("javascripts/spaceModify.js")" type="text/javascript"></script>
 <script src="@routes.Assets.at("javascripts/htmlEncodeDecode.js")" language="javascript"></script>
 <script src="@routes.Assets.at("javascripts/select.js")" type="text/javascript"></script>
-
+@if(AppConfiguration.getAmplitudeApiKey != "") {
+	<script>
+			amplitude.getInstance().logEvent("view_resource", {
+				"type": "collection",
+				"resource_id": '@collection.id',
+				"resource_name": '@collection.name',
+				"author_id": '@collection.author.id',
+				"author_name": '@collection.author.fullName',
+				"viewer_id": '@user.get.id',
+				"viewer_name": '@user.get.getMiniUser.fullName'
+			});
+	</script>
+}
 	<div class="row">
 		<!-- left column -->
 		<div class="col-md-8">
diff --git a/app/views/dataset.scala.html b/app/views/dataset.scala.html
@@ -22,10 +22,24 @@
 @import api.Permission
 @import play.api.Play.current
 @import _root_.util.Formatters._
+@import services.AppConfiguration
 
 @main(dataset.name) {
     <link rel="stylesheet" href="@routes.Assets.at("stylesheets/glyphicon-animations.css")">
     <script src="@routes.Assets.at("javascripts/htmlEncodeDecode.js")" language="javascript"></script>
+    @if(AppConfiguration.getAmplitudeApiKey != "") {
+        <script>
+                amplitude.getInstance().logEvent("view_resource", {
+                    "type": "dataset",
+                    "resource_id": '@dataset.id',
+                    "resource_name": '@dataset.name',
+                    "author_id": '@dataset.author.id',
+                    "author_name": '@dataset.author.fullName',
+                    "viewer_id": '@user.get.id',
+                    "viewer_name": '@user.get.getMiniUser.fullName'
+                });
+        </script>
+    }
     <script type="text/javascript">
         var spaceId = "@currentSpace";
         var descLabel = "@Messages("dataset.description")";
diff --git a/app/views/datasets/uploadFiles.scala.html b/app/views/datasets/uploadFiles.scala.html
@@ -1,5 +1,6 @@
 @(dataset: Dataset, folderId: Option[String])(implicit user: Option[models.User])
 @import play.api.i18n.Messages
+@import services.AppConfiguration
 <!--
 The sections of this file dealing with the multi file uploader library are loosely based on the demo
 of the blueimp jQuery File Upload library. An open source project located here: http://blueimp.github.io/jQuery-File-Upload/
@@ -126,6 +127,7 @@ <h3 class="title"></h3>
 <!-- The template to display files available for download -->
 <script id="template-download" type="text/x-tmpl">
     {% for (var i=0, file; file=o.files[i]; i++) { %}
+        {% logEvent(file.size); %}
         <tr class="template-download fade">
             {% if (file.deleteUrl) { %}
             <td>
@@ -171,6 +173,22 @@ <h3 class="title"></h3>
 
 <!-- The Templates plugin is included to render the upload/download listings - downloaded to make the resource local -->
 <script src="@routes.Assets.at("javascripts/file-uploader/tmpl.min.js")"></script>
+
+<script>
+    // Inject some info into templates for tracking
+    @if(AppConfiguration.getAmplitudeApiKey != "") {
+        tmpl.helper += ',logEvent=function(size){' +
+         'amplitude.logEvent("upload", {' +
+            '"dataset_id":"@dataset.id",' +
+            '"dataset_name":"@dataset.name",' +
+            '"uploader_id":"@user.get.id",' +
+            '"uploader_name":"@user.get.getMiniUser.fullName",' +
+            '"length":size,' +
+            '});}'
+    } else {
+            tmpl.helper += ',logEvent=function(){}'
+    }
+</script>
 <!-- The Load Image plugin is included for the preview images and image resizing functionality - downloaded to make the resource local -->
 <script src="@routes.Assets.at("javascripts/file-uploader/load-image.all.min.js")"></script>
 <!-- The Canvas to Blob plugin is included for image resizing functionality - downloaded to make the resource local -->
diff --git a/app/views/extractions/submitDatasetExtraction.scala.html b/app/views/extractions/submitDatasetExtraction.scala.html
@@ -1,5 +1,6 @@
 @(extractors: List[ExtractorInfo], ds: Dataset)(implicit user: Option[models.User])
 @import play.api.libs.json._
+@import services.AppConfiguration
 
 @main("Extractions") {
     <div class="row">
@@ -70,6 +71,19 @@ <h1>Submit dataset for extraction</h1>
         function submit(extractor_name, textbox_id, ds_id, submit_id) {
             var clickedBtn = $('#' + submit_id);
 
+            @if(AppConfiguration.getAmplitudeApiKey != "") {
+                amplitude.getInstance().logEvent("extraction", {
+                    "view": "dataset",
+                    "extractor_name": extractor_name,
+                    "resource_id": '@ds.id',
+                    "resource_name": '@ds.name',
+                    "author_id": '@ds.author.id',
+                    "author_name": '@ds.author.fullName',
+                    "submitter_id": '@user.get.id',
+                    "submitter_name": '@user.get.getMiniUser.fullName'
+                });
+            }
+
             // Throttle submissions to one every 3 seconds
             disableSubmit(clickedBtn);
             setTimeout(function() {
diff --git a/app/views/extractions/submitFileExtraction.scala.html b/app/views/extractions/submitFileExtraction.scala.html
@@ -1,6 +1,7 @@
 @(extractors: List[ExtractorInfo], file: File, folderHierarchy: List[Folder], spaces:List[ProjectSpace], allDatasets: List[Dataset])(implicit user: Option[models.User])
 @import _root_.util.Formatters._
 @import play.api.libs.json._
+@import services.AppConfiguration
 
 @main("Extractions") {
     <ol class="breadcrumb">
@@ -108,6 +109,18 @@ <h1>Submit file for extraction</h1>
 
         function submit(extractor_name, textbox_id, file_id, submit_id) {
             var clickedBtn = $('#' + submit_id);
+            @if(AppConfiguration.getAmplitudeApiKey != "") {
+                amplitude.getInstance().logEvent("extraction", {
+                    "view": "file",
+                    "extractor_name": extractor_name,
+                    "resource_id": '@file.id',
+                    "resource_name": '@file.filename',
+                    "author_id": '@file.author.id',
+                    "author_name": '@file.author.fullName',
+                    "submitter_id": '@user.get.id',
+                    "submitter_name": '@user.get.getMiniUser.fullName'
+                });
+            }
 
             // Throttle submissions to one every 3 seconds
             disableSubmit(clickedBtn);
diff --git a/app/views/file.scala.html b/app/views/file.scala.html
@@ -13,6 +13,7 @@
 @import api.Permission
 @import _root_.util.FileUtils
 @import _root_.util.Formatters._
+@import services.AppConfiguration
 
 @implicitFieldConstructor = @{ FieldConstructor(twitterBootstrapInput.f) }
 
@@ -71,6 +72,20 @@
 	<script src="@routes.Assets.at("javascripts/deleteUtils.js")" type="text/javascript"></script>
 	<script src="@routes.Assets.at("javascripts/sectionsListProcess.js")" type="text/javascript"></script>
 	<script src="@routes.Assets.at("javascripts/files/datasets.js")" type="text/javascript"></script>
+	@if(AppConfiguration.getAmplitudeApiKey != "") {
+		<script>
+				amplitude.getInstance().logEvent("view_resource", {
+					"type": "file",
+					"resource_id": '@file.id',
+					"resource_name": '@file.filename',
+					"author_id": '@file.author.id',
+					"author_name": '@file.author.fullName',
+					"viewer_id": '@user.get.id',
+					"viewer_name": '@user.get.getMiniUser.fullName',
+					"length": @file.length
+				});
+		</script>
+	}
 
 	<script>
 			var spaceId = "@spaceId";
diff --git a/app/views/main.scala.html b/app/views/main.scala.html
@@ -42,6 +42,35 @@
       <script src="../../assets/js/respond.min.js"></script>
     <![endif]-->
 
+    @if(AppConfiguration.getAmplitudeApiKey != "") {
+        <script type="text/javascript">
+                (function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")
+;r.type="text/javascript"
+;r.integrity="sha384-girahbTbYZ9tT03PWWj0mEVgyxtZoyDF9KVZdL+R53PP5wCY0PiVUKq0jeRlMx9M"
+;r.crossOrigin="anonymous";r.async=true
+;r.src="https://cdn.amplitude.com/libs/amplitude-7.2.1-min.gz.js"
+;r.onload=function(){if(!e.amplitude.runQueuedFunctions){
+                    console.log("[Amplitude] Error: could not load SDK")}}
+;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)
+;function s(e,t){e.prototype[t]=function(){
+                    this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
+                    var o=function(){this._q=[];return this}
+;var a=["add","append","clearAll","prepend","set","setOnce","unset"]
+;for(var c=0;c<a.length;c++){s(o,a[c])}n.Identify=o;var u=function(){this._q=[]
+;return this}
+;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]
+;for(var p=0;p<l.length;p++){s(u,l[p])}n.Revenue=u
+;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","enableTracking","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId"]
+;function v(e){function t(t){e[t]=function(){
+                        e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}
+                        for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){
+                        e=(!e||e.length===0?"$default_instance":e).toLowerCase()
+;if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]}
+;e.amplitude=n})(window,document);
+
+                amplitude.getInstance().init("@AppConfiguration.getAmplitudeApiKey");
+        </script>
+    }
 </head>
 <body>
     <div id="wrap">

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,8 @@ class Admin @Inject() (sectionIndexInfo: SectionIndexInfoService, userService: U`
`29`	`29`	`Ok(views.html.admin.customize(theme,`
`30`	`30`	`AppConfiguration.getDisplayName,`
`31`	`31`	`AppConfiguration.getWelcomeMessage,`
`32`		`- AppConfiguration.getGoogleAnalytics))`
	`32`	`+ AppConfiguration.getGoogleAnalytics,`
	`33`	`+ AppConfiguration.getAmplitudeApiKey))`
`33`	`34`	`}`
`34`	`35`
`35`	`36`	`def tos = ServerAdminAction { implicit request =>`