Analytics fix

wjsc · Feb 25, 2018 · 5300e1a · 5300e1a
1 parent cf432f2
commit 5300e1a
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 38 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,27 +1,7 @@
 <!doctype html>
 <html lang="es">
   <head>
-  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-111696291-1"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-    gtag('js', new Date());
-    gtag('config', 'UA-111696291-1',{
-      'custom_map': {'dimension1': 'artist', 'dimension2': 'track'}
-
-    });
-    window.onpopstate = ev => {
-      gtag('config', 'UA-111696291-1', {'page_path': window.location.pathname + window.location.hash });
-    };
-    trackCurrentTrack = currentTrack => {
-      gtag('event', 'play', 
-                  {   
-                      'artist': currentTrack.artist.name,
-                      'track': currentTrack.title
-                  }
-          );
-    }
-  </script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-111696291-1"></script>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">

diff --git a/src/components/CatalogueApp.js b/src/components/CatalogueApp.js
@@ -5,6 +5,7 @@ import Player from './Player/Player';
 import SignInScreen from './UserAccess/SignInScreen';
 import {userLink} from './userLink';
 import {playerLink} from './playerLink';
+import {analyticsLink} from './analyticsLink';
 import {mediaSessionLink} from './mediaSessionLink';
 
 class CatalogueApp extends React.Component {
@@ -20,6 +21,7 @@ class CatalogueApp extends React.Component {
 		};
 		playerLink.connect(this);
 		mediaSessionLink.init();
+		analyticsLink.init();
 		userLink.connect(this);
 	}
 	signInSuccessCallback(result) {

diff --git a/src/components/Player/Player.js b/src/components/Player/Player.js
@@ -1,8 +1,9 @@
-import {config} from '../../config/default.js';
 import React from 'react';
 import './Player.css';
+import {config} from '../../config/default.js';
 import {playerLink} from '../playerLink';
 import {mediaSessionLink} from '../mediaSessionLink';
+import {analyticsLink} from '../analyticsLink';
 import {formatDuration} from '../../lib'
 import {fetchAlbum, insertHistory} from '../../calls'
 import {CDN_URL} from '../../calls'
@@ -21,32 +22,36 @@ class Player extends React.Component {
         this.state = {
             album: {}
         }
-        this.trackCurrentTrack = this.trackCurrentTrack.bind(this);
         this.startPlaying = this.startPlaying.bind(this);
         this.fetchAlbum = this.fetchAlbum.bind(this);
-        this.changeMediaSession = this.changeMediaSession.bind(this);
+        this.collectIfStillPlaying = this.collectIfStillPlaying.bind(this);
 
     }
     componentDidMount() {
         this.element.onended = () => playerLink.next();
         this.element.ontimeupdate = () => playerLink.progressUpdate(this.element.currentTime);
         this.element.onplay = () => {
-            insertHistory(this.props.state.tracks[this.props.state.current]._id);
-            this.fetchAlbum()
-            .then(() => this.changeMediaSession());
-            this.trackCurrentTrack(this.props.state.tracks[this.props.state.current]);
+            const currentTrack = this.props.state.tracks[this.props.state.current];
+            insertHistory(currentTrack._id);
+            this.fetchAlbum(currentTrack)
+                .then(() => mediaSessionLink.changeMediaSession(currentTrack, this.state.album));
+            this.collectIfStillPlaying(currentTrack);
         };
         this.startPlaying();
     }
-    fetchAlbum(){
-        if(this.state.album._id !== this.props.state.tracks[this.props.state.current].album._id) {
-            return fetchAlbum(this.props.state.tracks[this.props.state.current].album._id)
+    fetchAlbum(currentTrack){
+        if(this.state.album._id !== currentTrack.album._id) {
+            return fetchAlbum(currentTrack.album._id)
                     .then(album => this.setState({ album }));
         }
         return Promise.resolve();
     }
-    changeMediaSession(){
-        mediaSessionLink.changeMediaSession(this.props.state.tracks[this.props.state.current], this.state.album);
+    collectIfStillPlaying(currentTrack){
+        setTimeout(() => {
+            this.props.state.status === 'play'
+            && currentTrack._id === this.props.state.tracks[this.props.state.current]._id
+            && analyticsLink.collect(currentTrack)
+        }, config.trackers.track_play_ms);
     }
     startPlaying(){
         this.element.load();
@@ -55,10 +60,6 @@ class Player extends React.Component {
     componentWillUnmount() {
         this.element.ontimeupdate = false;
     }
-    trackCurrentTrack(track) {
-        setTimeout(() => this.props.state.tracks[this.props.state.current] && this.props.state.tracks[this.props.state.current] === track 
-                            ? window.trackCurrentTrack(track) : false , config.trackers.track_play_ms);
-    }
     componentWillReceiveProps(nextProps){
         nextProps.state.tracks[nextProps.state.current] !== this.props.state.tracks[this.props.state.current] && this.startPlaying();
         nextProps.state.status !== this.props.state.status && (nextProps.state.status === 'play' ? this.element.play() : this.element.pause());

diff --git a/src/components/analyticsLink.js b/src/components/analyticsLink.js
@@ -0,0 +1,20 @@
+window.dataLayer = window.dataLayer || [];
+function gtag(){window.dataLayer.push(arguments);}
+
+export const analyticsLink = {
+    init: () => {
+        gtag('js', new Date());
+        gtag('config', 'UA-111696291-1',{
+          'custom_map': {'dimension1': 'artist', 'dimension2': 'track'}
+        });
+        window.onpopstate = ev => {
+          gtag('config', 'UA-111696291-1', {'page_path': window.location.pathname + window.location.hash });
+        };
+    },
+    collect: (track) => {
+        gtag('event', 'play', {   
+                'artist': track.artist.name,
+                'track': track.title
+            });
+    }
+}
diff --git a/src/config/default.js b/src/config/default.js
@@ -3,7 +3,7 @@ export const config = {
     api_url: process.env.REACT_APP_API,
     trackers:{
         google_analytics: process.env.REACT_APP_GOOGLE_ANALYTICS || "UA-XXXXXXX-1",
-        track_play_ms: process.env.REACT_APP_API || 30000
+        track_play_ms: process.env.REACT_MILISECONDS_PLAY || 30000
     },
     firebase:{
         apiKey: process.env.REACT_APP_FIREBASE_API_KEY || "AIzaSyBa9gaXmOAt5beEjWVnsZwPCSFu59Ox5pE",