Remove Webtrekk and fix Piano tracking

package.json

@@ -190,8 +190,7 @@
     "scratch-vm": "3.0.9",
     "shortid": "^2.2.14",
     "slugg": "^1.2.1",
-    "uuid": "^3.3.2",
-    "zepto": "^1.2.0"
+    "uuid": "^3.3.2"
   },
   "optionalDependencies": {
     "printer": "^0.2.2"

src/components/edu-stage/edu-stage.jsx

@@ -16,7 +16,7 @@ import {
 import { eduUrl } from '../../lib/routing'
 import { gamesKeyed } from '../../lib/edu/'
 import VideoPlayer from '../video-player/video-player.jsx'
-import { guiTypePages, paEvent } from '../../lib/piano-analytics/main'
+import { buildGuiPage, paEvent } from '../../lib/piano-analytics/main'
 import styles from './edu-stage.css'
 
 const EduStageComponent = (props) => {
@@ -119,20 +119,24 @@ const EduStageComponent = (props) => {
 }
 
 const sendPaEvent = (props, clickName) => {
-  const pages = guiTypePages(props.gameId)
-  pages.push('Code')
+  const pages = buildGuiPage(props.gameId, false, props.activeTabIndex)
 
-  let target = `${props.slideIndex}/${props.slideCount}`
-  if (clickName == 'Weiter') {
-    target = !props.linkNextGame ? `${props.slideIndex + 2}/${props.slideCount}` : 'Nächstes Lernspiel'
+  // 1-based number of the slide shown after the click
+  let target = `${props.slideIndex + 1}/${props.slideCount}`
+  if (clickName == 'Zurück') {
+    target = `${props.slideIndex}/${props.slideCount}`
+  } else if (clickName == 'Weiter') {
+    target = !props.linkNextGame
+      ? `${props.slideIndex + 2}/${props.slideCount}`
+      : 'Nächstes Lernspiel'
   }
 
   paEvent.clickAction({
     pages,
     pageType: 'Spiele',
     chapter1: 'Tutorial',
     chapter2: clickName,
-    target
+    target,
   })
 }
 
@@ -150,6 +154,7 @@ EduStageComponent.propTypes = {
   slideIndex: PropTypes.number,
   toggleFullscreen: PropTypes.func.isRequired,
   finished: PropTypes.bool,
+  activeTabIndex: PropTypes.number,
   preVideo: PropTypes.string,
   postVideo: PropTypes.string,
 }
@@ -162,6 +167,7 @@ const mapStateToProps = (state, ownProps) => {
     isEnabled: state.scratchGui.eduLayer.enabled,
     imageSrc: '',
     gameId: ownProps.match.params.eduId,
+    activeTabIndex: state.scratchGui.editorTab.activeTabIndex,
     caption: '',
   }
 

src/components/gui/gui.jsx

@@ -106,11 +106,15 @@ const GUIComponent = (props) => {
 
   const logClickEvent = (eventFn, eventName) => {
     paEvent.clickAction({
-      pages: buildGuiPage(props.eduId, props.isNewProject, props.activeTabIndex),
+      pages: buildGuiPage(
+        props.eduId,
+        props.isNewProject,
+        props.activeTabIndex
+      ),
       pageType: 'Spiele',
       chapter1: 'Speichern',
       chapter2: eventName,
-      target: eventName
+      target: eventName,
     })
     eventFn()
   }
@@ -138,7 +142,12 @@ const GUIComponent = (props) => {
               <p>{saveProjectError}</p>
               <Button
                 style="primary"
-                onClick={() => logClickEvent(() => onSaveProject().then(() => closeSaveModal()), 'Speichern')}
+                onClick={() =>
+                  logClickEvent(
+                    () => onSaveProject().then(() => closeSaveModal()),
+                    'Speichern'
+                  )
+                }
                 disabled={isSaving}
               >
                 Speichern
@@ -164,22 +173,29 @@ const GUIComponent = (props) => {
                 <Button
                   style="secondary"
                   className={styles.saveModalDownload}
-                  onClick={() => logClickEvent(downloadProject, 'Projekt herunterladen')}
+                  onClick={() =>
+                    logClickEvent(downloadProject, 'Projekt herunterladen')
+                  }
                 >
                   Projekt herunterladen
                 </Button>
               )}
             </ProjectSaver>
             <SBFileUploader onSuccess={closeSaveModal}>
               {(_, renderFileInput, handleClick) => (
-                <Button
-                  style="secondary"
-                  className={styles.saveModalDownload}
-                  onClick={() => logClickEvent(handleClick, 'Projekt hochladen')}
-                >
-                  Projekt hochladen
+                <>
+                  {/* outside the button, so the input's click doesn't bubble into onClick */}
                   {renderFileInput()}
-                </Button>
+                  <Button
+                    style="secondary"
+                    className={styles.saveModalDownload}
+                    onClick={() =>
+                      logClickEvent(handleClick, 'Projekt hochladen')
+                    }
+                  >
+                    Projekt hochladen
+                  </Button>
+                </>
               )}
             </SBFileUploader>
           </div>
@@ -268,7 +284,14 @@ const GUIComponent = (props) => {
           />
         </div>
         <div className={classNames(styles.column, styles.columnButtons)}>
-          <StageHeader vm={vm} logPageInfo={buildGuiPage(props.eduId, props.isNewProject, props.activeTabIndex)} />
+          <StageHeader
+            vm={vm}
+            logPageInfo={buildGuiPage(
+              props.eduId,
+              props.isNewProject,
+              props.activeTabIndex
+            )}
+          />
         </div>
       </div>
 
@@ -380,6 +403,7 @@ GUIComponent.propTypes = {
   onProjectNameChange: PropTypes.func.isRequired,
   saveProjectError: PropTypes.string,
   eduId: PropTypes.string,
+  isNewProject: PropTypes.bool,
 }
 GUIComponent.defaultProps = {
   basePath: '/',

src/components/menu/menu.jsx

@@ -102,13 +102,9 @@ export const MenuComponent = (props) => {
           selectedTabClassName={tabClassNames.tabSelected}
           selectedTabPanelClassName={tabClassNames.tabPanelSelected}
           selectedIndex={props.selectedTab}
-          onSelect={(index) => {
-            paEvent.pageDisplay({
-              pages: ['Menu', menuTabTitles[index]],
-              pageType: 'Hauptseite',
-            })
-            return props.handleTabSelected(index)
-          }}
+          onSelect={(index) =>
+            index !== props.selectedTab && props.handleTabSelected(index)
+          }
         >
           <TabList className={tabClassNames.tabList}>
             <Tab className={tabClassNames.tab}>
@@ -200,7 +196,7 @@ export const MenuComponent = (props) => {
               pageType: 'Hauptseite',
               chapter1: 'Exit',
               chapter2: 'Zur Maus-Seite',
-              target: "https://www.wdrmaus.de/"
+              target: 'https://www.wdrmaus.de/',
             })
           }}
         >

src/containers/app.jsx

@@ -13,7 +13,6 @@ import AppStateHOC, { history } from '../lib/app-state-hoc.jsx'
 import styles from '../css/index.css'
 import ErrorBoundaryHOC from '../lib/error-boundary-hoc.jsx'
 
-import withTracking from '../lib/tracking-hoc.jsx'
 import localeDe from '../../translations/de.json'
 import storage, { s3userFile } from '../lib/storage'
 import { setUserId } from '../reducers/project'
@@ -271,9 +270,7 @@ const ConnectedApp = connect(
   })
 )(App)
 
-const WrappedApp = ErrorBoundaryHOC('Top Level App')(
-  AppStateHOC(withTracking(ConnectedApp))
-)
+const WrappedApp = ErrorBoundaryHOC('Top Level App')(AppStateHOC(ConnectedApp))
 
 WrappedApp.setAppElement = ReactModal.setAppElement
 export default WrappedApp

src/containers/content.jsx

@@ -45,10 +45,20 @@ class Content extends React.Component {
   }
 
   componentDidMount() {
-    paEvent.pageDisplay({
-      pages: [this.props.match.params.page],
-      pageType: 'Beitrag',
-    })
+    this.logPageDisplay()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.match.params.page !== this.props.match.params.page) {
+      this.logPageDisplay()
+    }
+  }
+
+  logPageDisplay() {
+    const { page } = this.props.match.params
+    if (page in contentMap) {
+      paEvent.pageDisplay({ pages: [page], pageType: 'Beitrag' })
+    }
   }
 
   render() {

src/containers/gui.jsx

@@ -9,7 +9,6 @@ import {
   activateTab,
   BLOCKS_TAB_INDEX,
   COSTUMES_TAB_INDEX,
-  editorTabNames,
   SOUNDS_TAB_INDEX,
 } from '../reducers/editor-tab'
 
@@ -24,7 +23,6 @@ import GUIComponent from '../components/gui/gui.jsx'
 import { toggleLayoutMode } from '../reducers/layout-mode'
 import { setProjectUnchanged } from '../reducers/project-changed'
 import { buildGuiPage, paEvent } from '../lib/piano-analytics/main'
-import { menuTabTitles } from '../lib/piano-analytics/constants'
 
 class GUI extends React.Component {
   constructor(props) {
@@ -48,14 +46,12 @@ class GUI extends React.Component {
     }
   }
   componentDidUpdate(prevProps) {
-    if (this.props.isNewProject && prevProps.fetchingProject) {
-      logPageDisplay(null, this.props.isNewProject)
-    }
-
-    const eduId = this.props.match.params.eduId
-    const prevEduId = prevProps.match.params.eduId
-    if (eduId && eduId !== prevEduId) {
-      logPageDisplay(eduId, false)
+    if (prevProps.fetchingProject && !this.props.fetchingProject) {
+      logPageDisplay(
+        this.props.eduId,
+        this.props.isNewProject,
+        this.props.activeTabIndex
+      )
     }
 
     if (
@@ -107,7 +103,6 @@ class GUI extends React.Component {
       loadingStateVisible,
       onSetUnchanged, // eslint-disable-line no-unused-vars
       projectData, // eslint-disable-line no-unused-vars
-      isNewProject, // eslint-disable-line no-unused-vars
       staticContext, // eslint-disable-line no-unused-vars
       dispatch, // eslint-disable-line no-unused-vars
       vm,
@@ -155,26 +150,20 @@ const mapStateToProps = (state) => ({
   layoutmode: state.scratchGui.layoutMode,
   saveProjectVisible: state.scratchGui.modals.saveProject,
   eduLayerActive: state.scratchGui.eduLayer.enabled,
-  // eduId: state.scratchGui.eduLayer.gameId,
   isNewProject:
     state.router.location.state && !!state.router.location.state.isNewProject,
 })
 
 const logPageDisplay = (eduId, isNewProject, tab) => {
   const pages = buildGuiPage(eduId, isNewProject, tab)
 
-  paEvent.pageDisplay({ pages: pages, pageType: "Spiele" })
-}
-
-const onTabActivating = (eduId, isNewProject, tab) => {
-  logPageDisplay(eduId, isNewProject, tab)
-  return activateTab(tab)
+  paEvent.pageDisplay({ pages: pages, pageType: 'Spiele' })
 }
 
 const mapDispatchToProps = (dispatch) => ({
   closeSaveModal: () => dispatch(closeSaveProject()),
   onExtensionButtonClick: () => dispatch(openExtensionLibrary()),
-  onActivateTab: (eduId, isNewProject, tab) => dispatch(onTabActivating(eduId, isNewProject, tab)),
+  onActivateTab: (tab) => dispatch(activateTab(tab)),
   onActivateCostumesTab: () => dispatch(activateTab(COSTUMES_TAB_INDEX)),
   onActivateSoundsTab: () => dispatch(activateTab(SOUNDS_TAB_INDEX)),
   onLayoutModeClick: () => dispatch(toggleLayoutMode()),
@@ -188,7 +177,14 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     ...ownProps,
     ...stateProps,
     ...dispatchProps,
-    onActivateTab: (tab) => dispatchProps.onActivateTab(stateProps.eduId, stateProps.isNewProject, tab),
+    eduId,
+    onActivateTab: (tab) => {
+      // react-tabs also fires onSelect for the already active tab
+      if (tab !== stateProps.activeTabIndex) {
+        logPageDisplay(eduId, stateProps.isNewProject, tab)
+      }
+      dispatchProps.onActivateTab(tab)
+    },
     onActivateCostumesTab: () => dispatchProps.onActivateCostumesTab(),
     onActivateSoundsTab: () => dispatchProps.onActivateSoundsTab(),
   }

src/containers/menu.jsx

@@ -7,6 +7,7 @@ import { MenuComponent } from '../components/menu/menu.jsx'
 import { MenuTabs } from '../lib/routing'
 import { games, examples, videos } from '../lib/edu'
 import { paEvent } from '../lib/piano-analytics/main.js'
+import { menuTabTitles } from '../lib/piano-analytics/constants.js'
 
 const tabIdToTab = {
   0: MenuTabs.edugames,
@@ -46,12 +47,24 @@ class Menu extends React.Component {
       projects: [],
       videos: videos.map(Menu.mapVideoData),
     }
-
-    paEvent.pageDisplay({ pages: ['Menu'], pageType: 'Hauptseite' })
   }
 
   componentDidMount() {
     this.loadUserProjects()
+    this.logPageDisplay()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.tab !== this.props.tab) {
+      this.logPageDisplay()
+    }
+  }
+
+  logPageDisplay() {
+    paEvent.pageDisplay({
+      pages: ['Menu', menuTabTitles[Menu.getTabId(this.props.tab)]],
+      pageType: 'Hauptseite',
+    })
   }
 
   async loadUserProjects() {