Set up tracking of site search for Google Analytics

CHANGELOG

@@ -3,6 +3,8 @@ mkdocs-material-0.x.x (2016-xx-xx)
   In progress
 
   * Fixed #10: Invisible header after closing search bar with ESC key
+  * Corrected wrong path for static asset monitoring in Gulpfile.js
+  * Set up tracking of site search for Google Analytics
 
 mkdocs-material-0.2.0 (2016-02-24)
 

material/base.html

@@ -124,7 +124,8 @@
               {% include "footer.html" %}
             </footer>
           {% endblock %}
-        </div></article>
+        </div>
+      </article>
       <div class="results" role="status" aria-live="polite">
         <div class="scrollable">
           <div class="wrapper">
@@ -138,7 +139,7 @@
       var base_url = '{{ base_url }}';
       var repo_id  = '{{ repo_id }}';
     </script>
-    <script src="{{ base_url }}/assets/javascripts/application-0c6e4a273e.js"></script>
+    <script src="{{ base_url }}/assets/javascripts/application-997097ee0c.js"></script>
     {% for path in extra_javascript %}
       <script src="{{ path }}"></script>
     {% endfor %}
@@ -158,13 +159,21 @@
         /* Track outbound links */
         var buttons = document.querySelectorAll('a');
         Array.prototype.map.call(buttons, function(item) {
-          if (item.host != window.location.host) {
+          if (item.host != document.location.host) {
             item.addEventListener('click', function() {
               var action = item.getAttribute('data-action') || 'follow';
               ga('send', 'event', 'outbound', action, item.href);
             });
           }
         });
+        /* Register handler to log search on blur */
+        var query = document.querySelector('.query');
+        query.addEventListener('blur', function() {
+          if (this.value) {
+            var path = document.location.pathname;
+            ga('send', 'pageview', path + '?q=' + this.value);
+          }
+        });
       </script>
     {% endif %}
   </body>

material/manifest.json

@@ -1,6 +1,6 @@
 {
   "assets/images/favicon.ico": "assets/images/favicon-e565ddfa3b.ico",
-  "assets/javascripts/application.js": "assets/javascripts/application-0c6e4a273e.js",
+  "assets/javascripts/application.js": "assets/javascripts/application-997097ee0c.js",
   "assets/javascripts/modernizr.js": "assets/javascripts/modernizr-4ab42b99fd.js",
   "assets/stylesheets/application.css": "assets/stylesheets/application-b64b728552.css",
   "assets/stylesheets/palettes.css": "assets/stylesheets/palettes-05ab2406df.css"

src/assets/javascripts/application.js

@@ -253,7 +253,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
             /* Close search and jump to anchor when on same page */
             var parts = link.href.split('#');
-            if (parts[0] == window.location.href.split('#')[0]) {
+            if (parts[0] == document.location.href.split('#')[0]) {
               link.addEventListener('click', function(e) {
                 document.body.classList.remove('toggle-search');
                 document.body.classList.remove('locked');

src/base.html

@@ -208,8 +208,8 @@
               {% include "footer.html" %}
             </footer>
           {% endblock %}
-        </article>
-      </div>
+        </div>
+      </article>
 
       <!-- Search results -->
       <div class="results" role="status" aria-live="polite">
@@ -251,13 +251,22 @@
         /* Track outbound links */
         var buttons = document.querySelectorAll('a');
         Array.prototype.map.call(buttons, function(item) {
-          if (item.host != window.location.host) {
+          if (item.host != document.location.host) {
             item.addEventListener('click', function() {
               var action = item.getAttribute('data-action') || 'follow';
               ga('send', 'event', 'outbound', action, item.href);
             });
           }
         });
+
+        /* Register handler to log search on blur */
+        var query = document.querySelector('.query');
+        query.addEventListener('blur', function() {
+          if (this.value) {
+            var path = document.location.pathname;
+            ga('send', 'pageview', path + '?q=' + this.value);
+          }
+        });
       </script>
     {% endif %}
   </body>