Add GA tracking and optimize open graph tags

server/config.js

@@ -0,0 +1,17 @@
+module.exports = {
+    // Search and metadata
+    title: 'Imagine, Program, Share',
+    description:
+        'Scratch is a free programming language and online community ' +
+        'where you can create your own interactive stories, games, ' +
+        'and animations.',
+
+    // Open graph
+    og_image: 'https://scratch.mit.edu/images/og_image.jpg',
+    og_image_type: 'image/jpeg',
+    og_image_width: 986,
+    og_image_height: 860,
+
+    // Analytics & Monitoring
+    ga_tracker: process.env.GA_TRACKER || ''
+};

server/defaults.json

@@ -1,4 +0,0 @@
-{    
-    "title": "Imagine, Program, Share",
-    "description": "Scratch is a free programming language and online community where you can create your own interactive stories, games, and animations."
-}

server/handler.js

@@ -4,12 +4,14 @@ var fs = require('fs');
 var mustache = require('mustache');
 var path = require('path');
 
+var config = require('./config');
+
 /**
  * Constructor
  */
 function Handler (route) {
     // Route definition
-    defaults(route, require('./defaults.json'));
+    defaults(route, config);
 
     // Render template
     var location = path.resolve(__dirname, './template.html');

server/template.html

@@ -10,13 +10,19 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <title>Scratch - {{title}}</title>
-        <meta name="description" content="{{description}}" />
 
-        <!-- Open Graph -->
+        <!-- Search & Open Graph-->
-        <meta property="og:type" content="website" />
+        <meta name="description" content="{{description}}" />
+        <meta name="google-site-verification" content="m_3TAXDreGTFyoYnEmU9mcKB4Xtw5mw6yRkuJtXRKxM" />
+
         <meta property="og:url" content="https://scratch.mit.edu/" />
+        <meta property="og:type" content="website" />
         <meta property="og:title" content="Scratch - {{title}}" />
-        <meta property="og:description" content="Make games, stories and interactive art with Scratch. (scratch.mit.edu)" />    
+        <meta property="og:description" content="{{description}}" />
+        <meta property="og:image" content="{{&og_image}}" />
+        <meta property="og:image:type" content="{{&og_image_type}}" />
+        <meta property="og:image:width" content="{{&og_image_width}}" />
+        <meta property="og:image:height" content="{{&og_image_height}}" />
 
         <!-- Favicon & CSS normalize -->
         <link rel="shortcut icon" href="/favicon.ico" />
@@ -41,8 +47,19 @@
         <script src="/js/main.bundle.js"></script>
         <script src="/js/{{view}}.bundle.js"></script>
 
-        <!-- @todo Analytics (GA) -->
+        <!-- Analytics (GA) -->
-        <!-- @todo Monitoring (Raven) -->
+        <script>
+            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+            ga('create', '{{&ga_tracker}}', {
+                'sampleRate': 10
+            });
+            ga('send', 'pageview');
+        </script>
+
         <!-- @todo New Relic -->
     </body>
 </html>