From 852df3edbb27185ce78036603d3a68bc0150c030 Mon Sep 17 00:00:00 2001 From: chrisgarrity Date: Thu, 10 Aug 2017 10:00:22 -0400 Subject: [PATCH] Add splash page for usage tracking * Adds a usage cookie * Only asks for usage on first launch * will need checking with the official version to make sure the right elements are showing/hiding. --- editions/free/src/assets/start/homeIcon.svg | 71 ++++++++++ editions/free/src/assets/start/otherIcon.svg | 58 ++++++++ editions/free/src/assets/start/schoolIcon.svg | 112 +++++++++++++++ editions/free/src/css/start.css | 127 ++++++++++++++++++ editions/free/src/index.html | 17 +++ editions/free/src/localizations/en.json | 7 +- src/entry/app.js | 3 + src/entry/index.js | 56 ++++++++ src/iPad/iOS.js | 4 +- src/utils/AppUsage.js | 33 +++++ 10 files changed, 486 insertions(+), 2 deletions(-) create mode 100644 editions/free/src/assets/start/homeIcon.svg create mode 100644 editions/free/src/assets/start/otherIcon.svg create mode 100644 editions/free/src/assets/start/schoolIcon.svg create mode 100644 src/utils/AppUsage.js diff --git a/editions/free/src/assets/start/homeIcon.svg b/editions/free/src/assets/start/homeIcon.svg new file mode 100644 index 0000000..e754379 --- /dev/null +++ b/editions/free/src/assets/start/homeIcon.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/editions/free/src/assets/start/otherIcon.svg b/editions/free/src/assets/start/otherIcon.svg new file mode 100644 index 0000000..88886cf --- /dev/null +++ b/editions/free/src/assets/start/otherIcon.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +other-icon +Created with Sketch. + + + + + + + + + + + + + + + diff --git a/editions/free/src/assets/start/schoolIcon.svg b/editions/free/src/assets/start/schoolIcon.svg new file mode 100644 index 0000000..5a69fab --- /dev/null +++ b/editions/free/src/assets/start/schoolIcon.svg @@ -0,0 +1,112 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +other-icon +Created with Sketch. +school-icon +Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/editions/free/src/css/start.css b/editions/free/src/css/start.css index a09a7c4..f8989f0 100644 --- a/editions/free/src/css/start.css +++ b/editions/free/src/css/start.css @@ -217,3 +217,130 @@ div.frame { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(36deg); } } + +/* Analytics Info Page Elements */ + +.usageQuestion { + position: absolute; + width: 60%; + height: 35%; + top: 15%; + left: 20%; + color: white; + font-size: 5em; + font-weight: 500; + text-align: center; + text-shadow: 1px 1px 4px #333333; +} + +.usageQuestion.hide {display: none;} +.usageQuestion.show {display: block;} + +.usageIcon { + width: 100%; + margin-left: 3%; +} +.usageText { + color: #999999; + font-size: 2em; + text-align: center; + margin-top: .5em; +} + +.usageSchool { + position: absolute; + top: 45%; + left: 17%; + margin: 0px; + width: 17%; + height: 30%; + -webkit-tap-highlight-color: transparent; + z-index: 1000; +} + +.usageSchool.hide {display: none;} +.usageSchool.show {display: block;} + +.usageHome { + position: absolute; + top: 45%; + left: 42%; + width: 17%; + height: 30%; + margin: 0px; + -webkit-tap-highlight-color: transparent; + z-index: 1000; +} + +.usageHome.hide {display: none;} +.usageHome.show {display: block;} + +.usageOther { + position: absolute; + top: 45%; + left: 67%; + margin: 0px; + width: 17%; + height: 22%; + -webkit-tap-highlight-color: transparent; + z-index: 1000; +} + +.usageOther.hide {display: none;} +.usageOther.show {display: block;} + +.usageNoanswer { + position: absolute; + width: 50%; + height: 15%; + top: 90%; + left: 25%; + text-align: center; + z-index: 25; +} +.usageNoanswerText { + color: #35A8E0; + font-size: 1.8em; +} + +.usageNoanswer.hide {display: none;} +.usageNoanswer.show {display: block;} + +/* TODO: make font sizes relative!! */ +/* Usage text boxes */ +.usage-text { + position: absolute; + width: 20%; + height: 15%; + top: 75%; + background-color: #35A8E0; + border: none; + color: white; + font-size: 35px; + text-align: center; + text-decoration: none; + overflow: hidden; + white-space: nowrap; +} + +.usage-text.school { + left: 10%; +} + +.usage-text.home { + left: 40%; +} + +.usage-text.other { + left: 70%; +} + +.usage-text.dont-ask { + top: 90%; + right: 2%; + height: 10%; + width: 20%; + font-size: 20px; + text-align: right; +} + diff --git a/editions/free/src/index.html b/editions/free/src/index.html index e3ba9a4..4ca0f9e 100644 --- a/editions/free/src/index.html +++ b/editions/free/src/index.html @@ -38,6 +38,23 @@
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+
diff --git a/editions/free/src/localizations/en.json b/editions/free/src/localizations/en.json index 84f62b9..c0218d5 100644 --- a/editions/free/src/localizations/en.json +++ b/editions/free/src/localizations/en.json @@ -370,5 +370,10 @@ "SAY_BLOCK_DEFAULT_ARGUMENT": "hi", "ALERT_BACK": "Back", "ALERT_SAVING": "Saving...", - "SELECT_LANGUAGE": "Select language" + "SELECT_LANGUAGE": "Select language", + "USAGE_QUESTION": "Where are you using ScratchJr?", + "USAGE_SCHOOL": "School", + "USAGE_HOME": "Home", + "USAGE_OTHER": "Other", + "USAGE_NONE": "Don't ask again" } diff --git a/src/entry/app.js b/src/entry/app.js index a65f5bb..bcd31bf 100644 --- a/src/entry/app.js +++ b/src/entry/app.js @@ -1,5 +1,6 @@ import {preprocessAndLoadCss} from '../utils/lib'; import Localization from '../utils/Localization'; +import AppUsage from '../utils/AppUsage'; import iOS from '../iPad/iOS'; import IO from '../iPad/IO'; import MediaLib from '../iPad/MediaLib'; @@ -109,5 +110,7 @@ window.onload = () => { entryFunction(); }); }); + // Initialize currentUsage data + AppUsage.initUsage(); }); }; diff --git a/src/entry/index.js b/src/entry/index.js index 501c091..c506aaa 100644 --- a/src/entry/index.js +++ b/src/entry/index.js @@ -3,6 +3,7 @@ import {gn, getUrlVars, isAndroid, isiOS} from '../utils/lib'; import iOS from '../iPad/iOS'; import UI from '../editor/ui/UI'; import Localization from '../utils/Localization'; +import AppUsage from '../utils/AppUsage'; export function indexMain () { gn('gettings').ontouchend = indexGettingstarted; @@ -63,6 +64,14 @@ function indexFirstTime () { } function indexLoadOptions () { + if (window.Settings.edition != 'PBS' && AppUsage.askForUsage()) { + indexLoadUsage(); + } else { + indexLoadStart(); + } +} + +function indexLoadStart () { gn('authors').className = 'credits hide'; gn('authorsText').className = 'creditsText hide'; @@ -86,6 +95,30 @@ function indexLoadOptions () { } } +function indexLoadUsage () { + gn('authors').className = 'credits show'; + gn('authorsText').className = 'creditsText hide'; + gn('purpleguy').className = 'purple hide'; + gn('blueguy').className = 'blue hide'; + gn('redguy').className = 'red hide'; + + gn('usageQuestion').textContent = Localization.localize('USAGE_QUESTION'); + gn('useSchoolText').textContent = Localization.localize('USAGE_SCHOOL'); + gn('useHomeText').textContent = Localization.localize('USAGE_HOME'); + gn('useOtherText').textContent = Localization.localize('USAGE_OTHER'); + gn('usageNoanswerText').textContent = Localization.localize('USAGE_NONE'); + + gn('usageQuestion').className = 'usageQuestion show'; + gn('usageSchool').className = 'usageSchool show'; + gn('usageHome').className = 'usageHome show'; + gn('usageOther').className = 'usageOther show'; + gn('usageNoanswer').className = 'usageNoanswer show'; + gn('usageSchool').ontouchend = indexSetUsage; + gn('usageHome').ontouchend = indexSetUsage; + gn('usageOther').ontouchend = indexSetUsage; + gn('usageNoanswer').ontouchend = indexSetUsage; +} + function indexGohome () { iOS.setfile('homescroll.sjr', 0, function () { doNext(); @@ -107,6 +140,29 @@ function indexGettingstarted () { window.location.href = 'gettingstarted.html?place=home'; } +function indexSetUsage (e) { + var usageText = ''; + + switch (e.target.parentElement.id) { + case 'usageSchool': + usageText = 'school'; + break; + case 'usageHome': + usageText = 'home'; + break; + case 'usageOther': + usageText = 'other'; + break; + case 'usageNoanswer': + usageText = 'noanswer'; + break; + } + // Send one-time analytics event about usage + iOS.analyticsEvent('lobby', 'scratchjr_usage', usageText); + AppUsage.setUsage(usageText); + ScratchAudio.sndFX('tap.wav'); + window.location.href = 'index.html'; +} // For PBS KIDS edition only function indexInfo () { ScratchAudio.sndFX('tap.wav'); diff --git a/src/iPad/iOS.js b/src/iPad/iOS.js index 7e25584..3023948 100644 --- a/src/iPad/iOS.js +++ b/src/iPad/iOS.js @@ -3,6 +3,7 @@ import IO from './IO'; import Lobby from '../lobby/Lobby'; import Alert from '../editor/ui/Alert'; import ScratchAudio from '../utils/ScratchAudio'; +import AppUsage from '../utils/AppUsage'; ////////////////////////////////////////////////// // Tablet interface functions @@ -358,7 +359,8 @@ export default class iOS { if (!value) { value = 1; } - tabletInterface.analyticsEvent(category, action, label, value); + let newCategory = category + AppUsage.currentUsage; + tabletInterface.analyticsEvent(newCategory, action, label, value); } // Web Wiew delegate call backs diff --git a/src/utils/AppUsage.js b/src/utils/AppUsage.js new file mode 100644 index 0000000..2e8f4b6 --- /dev/null +++ b/src/utils/AppUsage.js @@ -0,0 +1,33 @@ +import Cookie from './Cookie'; + +let currentUsage; + +export default class AppUsage { + static get currentUsage () { + return currentUsage; + } + + static initUsage () { + var usageCookie = Cookie.get('usage'); + if (usageCookie === null || usageCookie === 'noanswer') { + currentUsage = ''; + } else { + currentUsage = '_' + usageCookie; + } + + } + + static askForUsage () { + var usageCookie = Cookie.get('usage'); + return usageCookie === null; + } + + static setUsage (kind) { + if (kind === '') { + Cookie.set('usage', 'noanswer'); + } else { + Cookie.set('usage', kind); + } + currentUsage = kind === 'noanswer' ? '' : '_' + kind; + } +}