Add telemetry (#2)

* Added a fix for tsconfig, was missing lib for some reason

* Added basic telemetry

* Added a check for instrumentation key

* Update app version to correct version

_config.yml

@@ -18,6 +18,7 @@ email: charticulator@microsoft.com
 description: > # this means to ignore newlines until "baseurl:"
   Charticulator's Website
 baseurl: "" # the subpath of your site, e.g. /blog
+instrumentation_key: ""
 url: "https://charticulator.com" # the base hostname & protocol for your site, e.g. http://example.com
 
 # Enable CDN when deploying the site.

_includes/head.html

@@ -4,4 +4,47 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="{{ '/assets/main.css' | cdn_url }}">
     <title>{{ page.title }} | Charticulator</title>
+    <script type="text/javascript">
+        var instrumentationKey = "{{ site.instrumentation_key }}";
+        if (instrumentationKey) {
+            var appInsights = window.appInsights || function (config) {
+                function i(config) { t[config] = function () { var i = arguments; t.queue.push(function () { t[config].apply(t, i) }) } } var t = { config: config }, u = document, e = window, o = "script", s = "AuthenticatedUserContext", h = "start", c = "stop", l = "Track", a = l + "Event", v = l + "Page", y = u.createElement(o), r, f; y.src = config.url || "https://az416426.vo.msecnd.net/scripts/a/ai.0.js"; u.getElementsByTagName(o)[0].parentNode.appendChild(y); try { t.cookie = u.cookie } catch (p) { } for (t.queue = [], t.version = "1.0", r = ["Event", "Exception", "Metric", "PageView", "Trace", "Dependency"]; r.length;)i("track" + r.pop()); return i("set" + s), i("clear" + s), i(h + a), i(c + a), i(h + v), i(c + v), i("flush"), config.disableExceptionTracking || (r = "onerror", i("_" + r), f = e[r], e[r] = function (config, i, u, e, o) { var s = f && f(config, i, u, e, o); return s !== !0 && t["_" + r](config, i, u, e, o), s }), t
+            }({
+                instrumentationKey: instrumentationKey
+            });
+
+            window.appInsights = appInsights;
+            appInsights.trackPageView();
+        }
+    </script>
+    <script type="text/javascript">
+        var appVersion;
+        function trackVideoPlay(metadata) {
+            // If for whatever reason it doesn't load
+            if (appInsights) {
+                appInsights.trackEvent('play-video', metadata || {});
+            }
+        }
+        function trackAppLaunch() {
+            // If for whatever reason it doesn't load
+            if (appInsights) {
+                if (!appVersion) {
+                    // TODO: Get dynamically
+                    appVersion = '1.1.0';
+                    // getAppVersion().then(function(version) {
+                    //   appVersion = version;
+                    //   appInsights.trackEvent('launch-app', {
+                    //     version
+                    // });
+                    appInsights.trackEvent('launch-app', {
+                        version: appVersion
+                    });
+                } else {
+                    appInsights.trackEvent('launch-app', {
+                        version: appVersion
+                    });
+                }
+            }
+        }
+    </script>
 </head>

_includes/header.html

@@ -26,7 +26,7 @@
           <a class="page-link" href="{{ '/gallery/index.html' | relativize_url }}">Gallery</a>
           <a class="page-link" href="{{ '/docs/getting-started.html' | relativize_url }}">Getting Started</a>
           <a class="page-link" href="{{ '/about.html' | relativize_url }}">About</a>
-          <a class="page-link btn-launch" href="{{ '/app/index.html' | relativize_url }}" role="button">Launch</a>
+          <a class="page-link btn-launch" href="{{ '/app/index.html' | relativize_url }}" role="button" onclick="trackAppLaunch()">Launch</a>
         </div>
       </nav>
     {% endif %}

_layouts/gallery.html

@@ -28,7 +28,7 @@ layout: default
 {% if page.video %}
 <h2>Creation Process</h2>
 <p class="gallery-video">
-    <video controls="controls" preload="auto">
+    <video controls="controls" preload="auto" onplay="trackVideoPlay({ name: '{{ page.title }}', type: 'gallery', url: '{{ page.video }}' })">
         <source src="{{ page.video | cdn_url }}" type="video/mp4" />
     </video>
 </p>

index.html

@@ -8,13 +8,13 @@ title: Home
 <div class="home-header">
     <h1>Charticulator</h1>
     <p class="el-description">Interactive Construction of Bespoke Chart Layouts</p>
-    <p><a class="btn-launch-large" href="{{ '/app/index.html' | relativize_url }}" role="button">Launch Charticulator</a></p>
+    <p><a class="btn-launch-large" href="{{ '/app/index.html' | relativize_url }}" role="button" onclick="trackAppLaunch()">Launch Charticulator</a></p>
     <p class="el-note">Charticulator requires the use of a mouse or touch screen.</p>
     <p class="el-note">Compatatible with <a href="https://www.google.com/chrome/">Google Chrome</a>, <a href="//www.mozilla.org/en-US/firefox/">Mozilla Firefox</a>, and <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p>
     <p class="el-note mobile-fork"><a href="https://github.com/Microsoft/charticulator">Fork the Github repository of this project</a>.</p>
 </div>
 <p class="home-video">
-    <video style="max-width: 100%" controls preload="auto" poster="{{ '/videos/charticulator-supplemental-poster.png' | cdn_url }}">
+    <video style="max-width: 100%" controls preload="auto" poster="{{ '/videos/charticulator-supplemental-poster.png' | cdn_url }}" onplay="trackVideoPlay()">
         <source src="{{ '/videos/charticulator-supplemental.mp4' | cdn_url }}"></source>
     </video>
 </p>

tutorials/viewer/src/telemetry.ts

@@ -0,0 +1,11 @@
+/**
+ * Tracks the given event
+ * @param event The event name
+ * @param data The data for the event
+ */
+export function trackEvent(event: string, data?: any) {
+    const ai = (window as any).appInsights;
+    if (ai) {
+        ai.trackEvent(event, data || {});
+    }
+}

tutorials/viewer/src/tsconfig.json

@@ -8,6 +8,7 @@
         "moduleResolution": "node",
         "target": "es5",
         "jsx": "react",
+        "lib": ["es5", "es6", "dom"],
         "noImplicitAny": true,
         "sourceMap": true
     }

tutorials/viewer/src/tutorial_view.tsx

@@ -10,6 +10,7 @@ import { VideoView } from "./video_view";
 import { TutorialCaption, TutorialMetadata } from "./data";
 import { classNames } from "./utils";
 import * as marked from "marked";
+import { trackEvent } from "./telemetry";
 
 marked.setOptions({
     smartypants: true
@@ -131,6 +132,7 @@ export class TutorialView extends React.Component<TutorialViewProps, TutorialVie
     }
 
     public render() {
+        const { tutorial } = this.props;
         return (
             <div
                 className="charticulator__tutorial-view"
@@ -142,7 +144,7 @@ export class TutorialView extends React.Component<TutorialViewProps, TutorialVie
                 >
                     <VideoView
                         ref={(e) => this.videoView = e}
-                        source={this.props.tutorial.videoSource}
+                        source={tutorial.videoSource}
                         width={this.props.width - 440}
                         height={(this.props.height - 40)}
                         renderTimeAxis={this.renderTimeAxis.bind(this)}
@@ -151,6 +153,12 @@ export class TutorialView extends React.Component<TutorialViewProps, TutorialVie
                         }}
                         onPlay={() => {
                             let index = this.getCaptionAtTimestamp(this.videoView.time);
+                            trackEvent("play-video", {
+                                type: "tutorial",
+                                name: tutorial.name || "Unknown",
+                                url: tutorial.videoSource.mp4 || tutorial.videoSource.webm,
+                                index,
+                            });
                             this.setState({
                                 currentCaptionIndex: index,
                                 keepCurrentInView: true
@@ -166,7 +174,7 @@ export class TutorialView extends React.Component<TutorialViewProps, TutorialVie
                         this.setState({ keepCurrentInView: false });
                     }}
                 >
-                    {this.props.tutorial.captions.map((caption, index) => (
+                    {tutorial.captions.map((caption, index) => (
                         <CaptionView
                             key={index}
                             caption={caption}

tutorials/viewer/src/video_view.tsx

@@ -6,6 +6,7 @@ import * as d3 from "d3";
 import * as Hammer from "hammerjs";
 import * as R from "./resources";
 import { classNames } from "./utils";
+import { trackEvent } from "./telemetry";
 
 function zeroPadding(s: string, length: number) {
     while (s.length < length) {
@@ -14,6 +15,7 @@ function zeroPadding(s: string, length: number) {
     return s;
 }
 
+
 function formatTimestamp(ts: number) {
     let total_seconds = Math.floor(ts);
     let ms = ts - total_seconds;