Added Mixpanel analytics

_config.yml

@@ -10,6 +10,7 @@ keywords:
 author: James Peret
 language: en
 timezone: ''
+mixpanel_token: 61c6b4a424afd5de7b00490d1c7ced17
 
 # URL
 ## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'

readme.md

@@ -45,6 +45,35 @@ hexo deploy
 
 - [x] Grid Miner announcement post
 
+- [x] Vue App
+  
+  - [x] Newsletter signup function
+  
+  - [x] Mixpanel analytics
+    
+    - [x] install tracking
+    
+    - [x] track page load 
+      *Landing page view, Game page view, Presskit page view*
+    
+    - [x] Track *Newsletter Signup*, *Newsletter Invalid Email* and *Newsletter Error*
+    
+    - [x] Track *External Link*
+    
+    - [x] Track *Media Downloaded*
+  
+  - [x] Newsletter success / error / loading
+
+- [x] Test all Links
+
+- [x] Add media to presskit (logo, hero, thumbnail, icon, developer and publisher logos)
+
+- [ ] Contact form page
+
+- [ ] Contact message functions
+
+- [ ] Track *Contact Message Sent*, *Contact Message Invalid* and *Contact Message Error*
+
 - [ ] Blog page
 
 - [ ] Games page
@@ -53,18 +82,4 @@ hexo deploy
 
 - [ ] Better landing page hero
 
-- [ ] Contact form page
-
-- [ ] Vue App
-  
-  - [x] Newsletter signup function
-  
-  - [ ] Mixpanel analytics
-  
-  - [ ] Contact message functions
-  
-  - [x] Newsletter success / error / loading
-
-- [ ] Test all Links
-
-- [x] Add media to presskit (logo, hero, thumbnail, icon, developer and publisher logos)
+- [ ] 

source/_posts/games/grid-miner.md

@@ -14,7 +14,7 @@ released: false
 release: November 20th 2021
 game_modes: Singleplayer campaign
 email: kairoscope.games[at]gmail.com
-twitter_dev: kairoscope
+twitter_dev: kairoscopegames
 library_hero: /games/grid-miner/library-hero.png
 library_logo: /games/grid-miner/library-logo.png
 tags: 

source/_posts/games/max-raider.md

@@ -15,7 +15,7 @@ released: true
 release: December 15th 2020
 game_modes: Arena Deathmatch
 email: kairoscope.games[at]gmail.com
-twitter_dev: kairoscope
+twitter_dev: kairoscopegames
 trailer: https://www.youtube.com/embed/p6RHwO6mFlU
 library_hero: /games/max-raider/library-hero.png
 library_logo: /games/max-raider/library-logo.png

source/games/max-raider/presskit/index.md

@@ -1,5 +1,5 @@
 ---
-title: Max Raider
+title: Max Raider Presskit
 id: max-raider-presskit
 target_id: max-raider
 content_type: presskit

themes/kairoscope-theme/layout/_partial/analytics.ejs

@@ -0,0 +1,6 @@
+<script type="text/javascript">(function(c,a){if(!a.__SV){var b=window;try{var d,m,j,k=b.location,f=k.hash;d=function(a,b){return(m=a.match(RegExp(b+"=([^&]*)")))?m[1]:null};f&&d(f,"state")&&(j=JSON.parse(decodeURIComponent(d(f,"state"))),"mpeditor"===j.action&&(b.sessionStorage.setItem("_mpcehash",f),history.replaceState(j.desiredHash||"",c.title,k.pathname+k.search)))}catch(n){}var l,h;window.mixpanel=a;a._i=[];a.init=function(b,d,g){function c(b,i){var a=i.split(".");2==a.length&&(b=b[a[0]],i=a[1]);b[i]=function(){b.push([i].concat(Array.prototype.slice.call(arguments,
+    0)))}}var e=a;"undefined"!==typeof g?e=a[g]=[]:g="mixpanel";e.people=e.people||[];e.toString=function(b){var a="mixpanel";"mixpanel"!==g&&(a+="."+g);b||(a+=" (stub)");return a};e.people.toString=function(){return e.toString(1)+".people (stub)"};l="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
+    for(h=0;h<l.length;h++)c(e,l[h]);var f="set set_once union unset remove delete".split(" ");e.get_group=function(){function a(c){b[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));e.push([d,call2])}}for(var b={},d=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<f.length;c++)a(f[c]);return b};a._i.push([b,d,g])};a.__SV=1.2;b=c.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?
+    MIXPANEL_CUSTOM_LIB_URL:"file:"===c.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";d=c.getElementsByTagName("script")[0];d.parentNode.insertBefore(b,d)}})(document,window.mixpanel||[]);
+    mixpanel.init("<%- config.mixpanel_token %>");
+</script>

themes/kairoscope-theme/layout/_partial/contact.ejs

@@ -4,7 +4,9 @@
             <h2 class="group-header">Get in touch</h2>
             <p class="lead justify">Got any questions, ideas, feedback, bugs or feature requests? Join our discord server or send us a direct message.</p>
             <p style="text-align: center;">
-                <a class="btn btn-secondary discord-color" href="" style="margin-right: 20px;">
+                <a class="btn btn-secondary discord-color" 
+                    href="https://discord.gg/SvKJ2cy" style="margin-right: 20px;"
+                    v-on:click="mixpanelTrack('External Link', { target: 'Discord', link : 'https://discord.gg/SvKJ2cy'})">
                     <i class="fab fa-discord"></i> Join our Discord Server
                 </a>
                 <a class="btn btn-secondary" href=""><i class="fas fa-envelope"></i> Send us a Message</a>

themes/kairoscope-theme/layout/_partial/links.ejs

@@ -7,10 +7,18 @@
     <div class="row">
         <div class="col-12 center-list">
             <ul>
-                <li><a href="" class="display-4 social-link"><i class="fab fa-steam"></i></a></li>
-                <li><a href="" class="display-4 social-link"><i class="fab fa-discord"></i></a></li>
-                <li><a href="" class="display-4 social-link"><i class="fab fa-twitter"></i></a></li>
-                <li><a href="" class="display-4 social-link"><i class="fab fa-youtube"></i></a></li>
+                <li><a href="https://store.steampowered.com/search/?developer=Kairoscope" 
+                    v-on:click="mixpanelTrack('External Link', { target: 'Steam', link : 'https://store.steampowered.com/search/?developer=Kairoscope'})"
+                    class="display-4 social-link"><i class="fab fa-steam"></i></a></li>
+                <li><a href="https://discord.gg/SvKJ2cy" 
+                    v-on:click="mixpanelTrack('External Link', { target: 'Discord', link : 'https://discord.gg/SvKJ2cy'})"
+                    class="display-4 social-link"><i class="fab fa-discord"></i></a></li>
+                <li><a href="https://twitter.com/kairoscopegames" 
+                    v-on:click="mixpanelTrack('External Link', { target: 'Twitter', link : 'https://twitter.com/kairoscopegames'})"
+                    class="display-4 social-link"><i class="fab fa-twitter"></i></a></li>
+                <li><a href="https://www.youtube.com/channel/UCzxug8k-rlHzimEy_XCS7Cw" 
+                    v-on:click="mixpanelTrack('External Link', { target: 'Youtube', link : 'https://www.youtube.com/channel/UCzxug8k-rlHzimEy_XCS7Cw'})"
+                    class="display-4 social-link"><i class="fab fa-youtube"></i></a></li>
             </ul>
         </div>
     </div>

themes/kairoscope-theme/layout/_partial/tracker.ejs

@@ -0,0 +1,26 @@
+<% var title = "" %>
+<% if(page.canonical_path == 'index.html') { title = "Landing Page view" %>
+<% } else { title = page.content_type.charAt(0).toUpperCase() + page.content_type.slice(1);  } %>
+
+
+
+<% if(page.canonical_path == 'index.html') { %>
+    <script>
+        if (location.hostname !== "localhost" && location.hostname !== "127.0.0.1"){
+            mixpanel.track("<%- title %>");
+        } else {
+            console.log('No tracking in ' + location.hostname);
+            console.log(`Tracking: \'<%- title %>\'`)
+      }
+    </script>
+<% } else { %>
+    <script>
+        var payload = { content : "<%- page.title %>" };
+        if (location.hostname !== "localhost" && location.hostname !== "127.0.0.1"){
+            mixpanel.track("<%- title %> view", payload);
+        } else {
+            console.log('No tracking in ' + location.hostname);
+            console.log(`Tracking: \'<%- title %> view\'`, payload)
+      }
+    </script>
+<% } %>

themes/kairoscope-theme/layout/_partial/vue.ejs

@@ -32,7 +32,13 @@
                     req.setRequestHeader('Content-Type', 'application/json');
                     req.onload  = function() {
                         var res = JSON.parse(req.responseText);
-                        console.log(res);
+                        //console.log(res);
+                        var tracking_data = {
+                            email : vm.newsletter.email,
+                            already_registered: res.already_registered,
+                            confirmed_subscription: res.confirmed_subscription,
+                            registration_attempts: res.registration_attempts
+                        }
                         if(req.status == 200) {
                             vm.newsletter.alert_class = 'alert-success';
                             vm.newsletter.show_alert = true;
@@ -46,6 +52,7 @@
                             } else {
                                 vm.newsletter.alert_text = `Thanks for subscribing! We have sent a confirmation email to "${vm.newsletter.email}".`;
                             }
+                            vm.mixpanelTrack("Newsletter Signup", tracking_data);
                         } else {
                             vm.newsletter.alert_class = 'alert-danger';
                             vm.newsletter.show_alert = true;
@@ -54,9 +61,11 @@
                             vm.newsletter.show_alert_close = true;
                             if(req.status == 400) { 
                                 vm.newsletter.alert_text = `The email address provided is not valid!`;
+                                vm.mixpanelTrack("Newsletter Invalid Email", tracking_data);
                             }
                             if(req.status == 500) { 
                                 vm.newsletter.alert_text = `There was an error with the server. Please try again later.`;
+                                vm.mixpanelTrack("Newsletter Error", tracking_data);
                             }
                         }
                         setTimeout(function(){
@@ -69,6 +78,15 @@
             },
             close_newsletter_alert: function() {
                 this.newsletter.show_alert = false;
+            },
+            mixpanelTrack: function(event_name, properties){
+                if (location.hostname !== "localhost" && location.hostname !== "127.0.0.1"){
+                    mixpanel.track(event_name, properties);
+                    console.log(`Tracking: \'${event_name}\'`, properties)
+                } else {
+                    //console.log('No tracking in ' + location.hostname);
+                    console.log(`Tracking: \'${event_name}\'`, properties)
+                }
             }
         },
         computed: { },

themes/kairoscope-theme/layout/layout.ejs

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html class="h-100">
   <%- partial('_partial/head') %>
+  <%- partial('_partial/analytics') %>
   <body class="d-flex flex-column h-100">
     <div id="vue-app">
       <%- body %>
@@ -8,4 +9,5 @@
   </body>
   <script src="/js/vue.js"></script>
   <%- partial('_partial/vue') %>
+  <%- partial('_partial/tracker') %>
 </html>

themes/kairoscope-theme/layout/presskit.ejs

@@ -135,7 +135,8 @@
                             <div class="<%- c %>">
                                 <div class="card-body">
                                     <h5 class="card-title">
-                                        <a target="_BLANK" href="<%- media.path %>">
+                                        <a target="_BLANK" href="<%- media.path %>" 
+                                            v-on:click="mixpanelTrack('Media Download', { media_name: '<%- media.name %>', media_type: '<%- media.media_type %>', link : '<%- media.path %>', parent: '<%- page.title %>'})">
                                             <%- media.name %> 
                                         </a>
                                     </h5>
@@ -156,7 +157,8 @@
                             </div>
                             <% if(media.media_type == 'image') { %>
                                 <div class="col-md-4 image-box">
-                                    <a target="_BLANK" href="<%- media.path %>">
+                                    <a target="_BLANK" href="<%- media.path %>"
+                                        v-on:click="mixpanelTrack('Media Download', { media_name: '<%- media.name %>', media_type: '<%- media.media_type %>', link : '<%- media.path %>', parent: '<%- page.title %>'})">
                                         <img src="<%- media.path %>" class="img-fluid rounded-start" alt="...">
                                     </a>
                                 </div>