@@ -72,7 +102,10 @@ export const MenuComponent = (props) => {
selectedTabClassName={tabClassNames.tabSelected}
selectedTabPanelClassName={tabClassNames.tabPanelSelected}
selectedIndex={props.selectedTab}
- onSelect={props.handleTabSelected}
+ onSelect={(index) => {
+ paEvent.pageDisplay({ pages: ["Menu", menuTabTitles[index]], pageType: "Hauptseite" })
+ return props.handleTabSelected(index)
+ }}
>
@@ -152,6 +185,15 @@ export const MenuComponent = (props) => {
iconSvg={buttonIconMausseite}
external
linkTo="https://www.wdrmaus.de/"
+ onClick={() => {
+ paEvent.clickExit({
+ pages: ['Menu', menuTabTitles[props.selectedTab]],
+ pageType: 'Hauptseite',
+ chapter1: 'Exit',
+ chapter2: 'Zur Maus-Seite',
+ target: "https://www.wdrmaus.de/"
+ })
+ }}
>
Zur Maus-Seite
diff --git a/src/components/stage-header/stage-header.jsx b/src/components/stage-header/stage-header.jsx
index 7770a157a..d9aa64668 100644
--- a/src/components/stage-header/stage-header.jsx
+++ b/src/components/stage-header/stage-header.jsx
@@ -7,6 +7,7 @@ import { Link } from 'redux-little-router'
import Controls from '../../containers/controls.jsx'
import Fullscreen from '../../containers/fullscreen.jsx'
import MenuButton from '../menu-button/menu-button.jsx'
+import { guiTypePages, paEvent } from '../../lib/piano-analytics/main.js'
import styles from './stage-header.css'
import saveIcon from '!raw-loader!../../../assets/icons/header_save.svg'
@@ -14,7 +15,7 @@ import menuIcon from '!raw-loader!../../../assets/icons/header_menu.svg'
import mailIcon from '!raw-loader!../../../assets/icons/menu_impressum.svg'
const StageHeaderComponent = function (props) {
- const { isFullScreen, onSaveProject, vm } = props
+ const { isFullScreen, onSaveProject, vm, logPageInfo } = props
return (
{isFullScreen ? (
(
-
- 
+const WelcomeScreenComponent = () => {
-
-
- 
+ useEffect(() => {
+ paEvent.pageDisplay({
+ pages: ['Willkommensseite'],
+ pageType: 'Onboarding'
+ })
+ }, [])
-
- Willkommen zu Programmieren mit der Maus! -
-- Hier lernst du Schritt für Schritt Bildergeschichten und Spiele mit - der Maus zu programmieren. Viel Spaß! -
+ return ( +
+
-
-
- Spielst du zum ersten Mal?
-
-)
+ )
+}
export default WelcomeScreenComponent
diff --git a/src/containers/content.jsx b/src/containers/content.jsx
index 9e7860740..ca06cf16b 100644
--- a/src/containers/content.jsx
+++ b/src/containers/content.jsx
@@ -14,6 +14,7 @@ import Privacy, {
attributes as privacyAttributes,
} from '../lib/content/privacy.md'
import Terms, { attributes as termsAttributes } from '../lib/content/terms.md'
+import { paEvent } from '../lib/piano-analytics/main.js'
const contentMap = {
eltern: {
@@ -43,6 +44,13 @@ class Content extends React.Component {
)
}
+ componentDidMount() {
+ paEvent.pageDisplay({
+ pages: [this.props.page],
+ pageType: 'Beitrag'
+ })
+ }
+
render() {
if (!(this.props.page in contentMap)) {
return this.wrapContent('Inhalt nicht gefunden.')
diff --git a/src/containers/controls.jsx b/src/containers/controls.jsx
index cfbdcd92c..9b23bcb13 100644
--- a/src/containers/controls.jsx
+++ b/src/containers/controls.jsx
@@ -4,6 +4,7 @@ import React from 'react'
import VM from 'scratch-vm'
import ControlsComponent from '../components/controls/controls.jsx'
+import { paEvent } from '../lib/piano-analytics/main.js'
class Controls extends React.Component {
constructor(props) {
@@ -35,20 +36,45 @@ class Controls extends React.Component {
}
handleGreenFlagClick(e) {
e.preventDefault()
+
+ if (this.props.onGreenFlagClick) {
+ this.props.onGreenFlagClick()
+ }
if (e.shiftKey) {
this.setState({ turbo: !this.state.turbo })
this.props.vm.setTurboMode(!this.state.turbo)
} else {
this.props.vm.greenFlag()
}
+
+ paEvent.clickAction({
+ pages: this.props.logPageInfo,
+ pageType: 'Spiele',
+ chapter1: 'Code',
+ chapter2: 'Los',
+ target: 'Code ausführen'
+ })
}
handleStopAllClick(e) {
e.preventDefault()
+
+ if (this.props.onStopAllClick) {
+ this.props.onStopAllClick()
+ }
this.props.vm.stopAll()
+
+ paEvent.clickAction({
+ pages: this.props.logPageInfo,
+ pageType: 'Spiele',
+ chapter1: 'Code',
+ chapter2: 'Stopp',
+ target: 'Code stoppen'
+ })
}
render() {
const {
vm, // eslint-disable-line no-unused-vars
+ logPageInfo,
...props
} = this.props
return (
@@ -65,6 +91,8 @@ class Controls extends React.Component {
Controls.propTypes = {
vm: PropTypes.instanceOf(VM),
+ onGreenFlagClick: PropTypes.func,
+ onStopAllClick: PropTypes.func
}
export default Controls
diff --git a/src/containers/gui.jsx b/src/containers/gui.jsx
index ea4825ae6..e7cb730da 100644
--- a/src/containers/gui.jsx
+++ b/src/containers/gui.jsx
@@ -9,6 +9,7 @@ import {
activateTab,
BLOCKS_TAB_INDEX,
COSTUMES_TAB_INDEX,
+ editorTabNames,
SOUNDS_TAB_INDEX,
} from '../reducers/editor-tab'
@@ -22,6 +23,8 @@ import { StageSizeProviderHOC } from '../lib/stage-size-provider.jsx'
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) {
@@ -45,6 +48,14 @@ class GUI extends React.Component {
}
}
componentDidUpdate(prevProps) {
+ if (this.props.isNewProject && prevProps.fetchingProject) {
+ logPageDisplay(null, this.props.isNewProject)
+ }
+
+ if (this.props.eduId && this.props.eduId !== prevProps.eduId) {
+ logPageDisplay(this.props.eduId, false)
+ }
+
if (
prevProps.projectData !== this.props.projectData ||
// force clearing workspace after fetching
@@ -140,19 +151,42 @@ const mapStateToProps = (state) => ({
saveProjectVisible: state.scratchGui.modals.saveProject,
eduLayerActive: state.scratchGui.eduLayer.enabled,
eduId: state.scratchGui.eduLayer.gameId,
+ isNewProject: state.router.result && !!state.router.result.newProject
})
+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)
+}
+
const mapDispatchToProps = (dispatch) => ({
closeSaveModal: () => dispatch(closeSaveProject()),
onExtensionButtonClick: () => dispatch(openExtensionLibrary()),
- onActivateTab: (tab) => dispatch(activateTab(tab)),
+ onActivateTab: (eduId, isNewProject, tab) => dispatch(onTabActivating(eduId, isNewProject, tab)),
onActivateCostumesTab: () => dispatch(activateTab(COSTUMES_TAB_INDEX)),
onActivateSoundsTab: () => dispatch(activateTab(SOUNDS_TAB_INDEX)),
onLayoutModeClick: () => dispatch(toggleLayoutMode()),
onSetUnchanged: () => dispatch(setProjectUnchanged()),
})
-const ConnectedGUI = connect(mapStateToProps, mapDispatchToProps)(GUI)
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+ return {
+ ...ownProps,
+ ...stateProps,
+ ...dispatchProps,
+ onActivateTab: (tab) => dispatchProps.onActivateTab(stateProps.eduId, stateProps.isNewProject, tab),
+ onActivateCostumesTab: () => dispatchProps.onActivateCostumesTab(),
+ onActivateSoundsTab: () => dispatchProps.onActivateSoundsTab(),
+ }
+}
+
+const ConnectedGUI = connect(mapStateToProps, mapDispatchToProps, mergeProps)(GUI)
// eslint-disable-next-line new-cap
const WrappedGui = flow([
diff --git a/src/containers/menu.jsx b/src/containers/menu.jsx
index defac7240..4d7fc7cd2 100644
--- a/src/containers/menu.jsx
+++ b/src/containers/menu.jsx
@@ -6,6 +6,7 @@ import { push } from 'redux-little-router'
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'
const tabIdToTab = {
0: MenuTabs.edugames,
@@ -45,6 +46,8 @@ class Menu extends React.Component {
projects: [],
videos: videos.map(Menu.mapVideoData),
}
+
+ paEvent.pageDisplay({ pages: ['Menu'], pageType: 'Hauptseite' })
}
componentDidMount() {
diff --git a/src/containers/stage-header.jsx b/src/containers/stage-header.jsx
index 34009300a..e7388baf8 100644
--- a/src/containers/stage-header.jsx
+++ b/src/containers/stage-header.jsx
@@ -39,6 +39,7 @@ StageHeader.propTypes = {
const mapStateToProps = (state) => ({
isFullScreen: state.scratchGui.mode.isFullScreen,
+ gameId: state.scratchGui.eduLayer.gameId
})
const mapDispatchToProps = (dispatch) => ({
diff --git a/src/entrypoints/index.jsx b/src/entrypoints/index.jsx
index c23a93c81..8563c71e5 100644
--- a/src/entrypoints/index.jsx
+++ b/src/entrypoints/index.jsx
@@ -5,6 +5,9 @@ import ReactDOM from 'react-dom'
import App from '../containers/app.jsx'
import '../css/defaults.css'
+import { paSetConfig } from '../lib/piano-analytics/main.js'
+
+paSetConfig()
const appTarget = document.getElementById('__mausapp')
diff --git a/src/lib/piano-analytics/constants.js b/src/lib/piano-analytics/constants.js
new file mode 100644
index 000000000..ec5290836
--- /dev/null
+++ b/src/lib/piano-analytics/constants.js
@@ -0,0 +1,39 @@
+export const EVENTS = {
+ pageDisplay: 'page.display',
+ clickNavigation: 'click.navigation',
+ clickExit: 'click.exit',
+ clickAction: 'click.action',
+}
+
+export const PROPERTIES = {
+ siteLevel2: 'site_level2',
+ brand: 'brand',
+ redaction: 'editorial_department',
+ platform: 'platform',
+ siteTitle: 'page_title',
+ pageLevel1: 'page_chapter1',
+ pageLevel2: 'page_chapter2',
+ pageLevel3: 'page_chapter3',
+ siteType: 'content_type',
+ publicationTimeAt: 'publication_time', // date
+ reactionUpdatedAt: 'last_editorial_update', // date
+ daysSincePublication: 'days_since_publication', // integer
+ clickLabel: 'click',
+ clickTarget: 'click_target',
+ clickChapter1: 'click_chapter1',
+ clickChapter2: 'click_chapter2',
+}
+
+export const DEFAULT_PROPERTY_VALUES = {
+ [PROPERTIES.siteLevel2]: 'Programmieren mit der Maus',
+ [PROPERTIES.brand]: 'Die Maus',
+ [PROPERTIES.redaction]: 'PG Kinder und Familie',
+ [PROPERTIES.platform]: 'Web',
+}
+
+export const menuTabTitles = {
+ 0: 'Lernen',
+ 1: 'Meine Sachen',
+ 2: 'Beispiele',
+ 3: 'Videos',
+}
diff --git a/src/lib/piano-analytics/main.js b/src/lib/piano-analytics/main.js
new file mode 100644
index 000000000..092d8acbd
--- /dev/null
+++ b/src/lib/piano-analytics/main.js
@@ -0,0 +1,135 @@
+import { pianoAnalytics } from 'piano-analytics-js'
+import {
+ EVENTS,
+ PROPERTIES,
+ DEFAULT_PROPERTY_VALUES,
+ menuTabTitles,
+} from './constants'
+import { editorTabNames } from '../../reducers/editor-tab'
+
+pianoAnalytics.setConfigurations({
+ site: 621455,
+ collectDomain: 'https://logs1414.xiti.com/',
+})
+
+export const paSetConfig = () => {
+ let configurations
+
+ if (process.env.BRANCH === 'production') {
+ configurations = {
+ site: 632700,
+ collectDomain: 'https://ama.wdr.de/',
+ }
+ } else {
+ configurations = {
+ site: 621455,
+ collectDomain: 'https://logs1414.xiti.com/',
+ }
+ }
+ pianoAnalytics.setConfigurations(configurations)
+}
+
+export const guiTypePages = (gameId) => {
+ if (!gameId) {
+ return [menuTabTitles[1], 'New Project']
+ }
+
+ if (gameId.match(/beispiel(0|0\d{1})?$/gm)) {
+ return [menuTabTitles[2], `Beispiel ${gameId}`]
+ } else {
+ return [menuTabTitles[0], `Lernspiel ${gameId}`]
+ }
+}
+
+const pageLevelKeys = [
+ PROPERTIES.pageLevel1,
+ PROPERTIES.pageLevel2,
+ PROPERTIES.pageLevel3,
+]
+
+const sendEvent = (eventKey, data) => {
+ let properties = { ...DEFAULT_PROPERTY_VALUES }
+
+ switch (typeof data) {
+ case 'string':
+ properties[PROPERTIES.pageLevel1] = data
+ break
+
+ case 'object':
+ properties = { ...properties, ...data }
+ break
+ }
+
+ return pianoAnalytics.sendEvent(eventKey, {
+ ...getCustomProperties(properties),
+ ...properties,
+ })
+}
+
+const getCustomProperties = (data) => {
+ const pageList = pageLevelKeys
+ .filter((key) => key in data)
+ .map((key) => data[key])
+
+ return {
+ page: [data[PROPERTIES.siteLevel2], ...pageList].join('_'),
+ ...(pageList.length && { [PROPERTIES.siteTitle]: pageList.slice(-1)[0] }),
+ }
+}
+
+export const paEvent = {
+ pageDisplay: ({ pages, pageType }) => {
+ let data = {}
+
+ if (typeof pages === 'string') {
+ data[PROPERTIES.pageLevel1] = pages
+ } else {
+ const pagesList = [...pages].slice(0, 3)
+ pagesList.forEach((page, index) => {
+ data[PROPERTIES[`pageLevel${index + 1}`]] = page
+ })
+ }
+
+ if (pageType) data[PROPERTIES.siteType] = pageType
+ return sendEvent(EVENTS.pageDisplay, data)
+ },
+ clickAction: (params) => clickEvent(EVENTS.clickAction, params),
+ clickExit: (params) => clickEvent(EVENTS.clickExit, params),
+}
+
+export const buildGuiPage = (eduId, isNewProject, activeTab) => {
+ let pages = []
+ if (isNewProject) {
+ pages = [menuTabTitles[1], 'New Project']
+ } else if (eduId && eduId.match(/beispiel(0|0\d{1})?$/gm)) {
+ pages = [menuTabTitles[2], `Beispiel ${eduId}`]
+ } else if (eduId) {
+ pages = [menuTabTitles[0], `Lernspiel ${eduId}`]
+ }
+ return [...pages, editorTabNames[activeTab || 0]]
+}
+
+const clickEvent = (
+ eventName,
+ { pages, pageType, chapter1, chapter2, target }
+) => {
+ let data = {}
+
+ const pagesList = [...pages].slice(0, 3)
+ pagesList.forEach((page, index) => {
+ data[PROPERTIES[`pageLevel${index + 1}`]] = page
+ })
+ data[PROPERTIES.siteType] = pageType
+
+ const clickProperties = {
+ [PROPERTIES.clickChapter1]: chapter1,
+ [PROPERTIES.clickChapter2]: chapter2,
+ [PROPERTIES.clickTarget]: target,
+ [PROPERTIES.clickLabel]: chapter2,
+ }
+
+ return sendEvent(eventName, {
+ ...data,
+ ...clickProperties,
+ })
+}
diff --git a/src/reducers/editor-tab.js b/src/reducers/editor-tab.js
index 142ea11f1..b91e1878e 100644
--- a/src/reducers/editor-tab.js
+++ b/src/reducers/editor-tab.js
@@ -9,6 +9,12 @@ const initialState = {
activeTabIndex: BLOCKS_TAB_INDEX,
}
+const editorTabNames = {
+ [BLOCKS_TAB_INDEX]: 'Code',
+ [COSTUMES_TAB_INDEX]: 'Kostüme',
+ [SOUNDS_TAB_INDEX]: 'Töne',
+}
+
const reducer = function (state, action) {
if (typeof state === 'undefined') {
state = initialState
@@ -37,4 +43,5 @@ export {
BLOCKS_TAB_INDEX,
COSTUMES_TAB_INDEX,
SOUNDS_TAB_INDEX,
+ editorTabNames,
}
diff --git a/yarn.lock b/yarn.lock
index dff317dea..f583b5212 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8645,7 +8645,7 @@ intl-format-cache@^2.0.5:
intl-messageformat-parser@1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-1.4.0.tgz#b43d45a97468cadbe44331d74bb1e8dea44fc075"
- integrity sha1-tD1FqXRoytvkQzHXS7Ho3qRPwHU=
+ integrity sha512-/XkqFHKezO6UcF4Av2/Lzfrez18R0jyw7kRFhSeB/YRakdrgSc9QfFZUwNJI9swMwMoNPygK1ArC5wdFSjPw+A==
intl-messageformat-parser@^1.2.0:
version "1.8.1"
@@ -8655,7 +8655,7 @@ intl-messageformat-parser@^1.2.0:
intl-messageformat@^2.0.0, intl-messageformat@^2.1.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-2.2.0.tgz#345bcd46de630b7683330c2e52177ff5eab484fc"
- integrity sha1-NFvNRt5jC3aDMwwuUhd/9eq0hPw=
+ integrity sha512-I+tSvHnXqJYjDfNmY95tpFMj30yoakC6OXAo+wu/wTMy6tA/4Fd4mvV7Uzs4cqK/Ap29sHhwjcY+78a8eifcXw==
dependencies:
intl-messageformat-parser "1.4.0"
@@ -12152,6 +12152,11 @@ pez@2.x.x:
hoek "4.x.x"
nigel "2.x.x"
+piano-analytics-js@^6.8.3:
+ version "6.8.3"
+ resolved "https://registry.yarnpkg.com/piano-analytics-js/-/piano-analytics-js-6.8.3.tgz#f13bfaafdc0a58b7045cfb02be20a918cf3231a7"
+ integrity sha512-2NI77WkB1I31ZYdHe9brUhrCpEeDWqdlY/KmUKgvF6npbTiONzMGJOKui6eqKJkoo8f0Wuy1ucmpGM7wXYVdGw==
+
picomatch@^2.0.5:
version "2.2.2"
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
- Fang am besten mit unserem ersten Lernspiel an.
+
-
+ 
-
+
+
-
-
+
+
+
- + Willkommen zu Programmieren mit der Maus! +
++ Hier lernst du Schritt für Schritt Bildergeschichten und Spiele mit + der Maus zu programmieren. Viel Spaß! +
+ + +
+ Spielst du zum ersten Mal?
+
-
-
+ Fang am besten mit unserem ersten Lernspiel an.
+
+
- Kennst du dich schon aus?
- 
-
+
+
+
- Gehe direkt zur Übersicht und klicke dein nächstes Lernspiel an.
- Gespeicherte Spiele findest du unter „Meine Sachen“.
+
+
-
+ Kennst du dich schon aus?
+
-
-
+ Gehe direkt zur Übersicht und klicke dein nächstes Lernspiel an.
+ Gespeicherte Spiele findest du unter „Meine Sachen“.
+
+