Skip to content

Commit c1170da

Browse files
obulatobulat
authored
Merge pull request #88 from creativecommons/ga
Set up Google analytics
2 parents 7a2d46b + 130668a commit c1170da

File tree

8 files changed

+107
-24
lines changed

8 files changed

+107
-24
lines changed

‎package-lock.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"clipboard": "^2.0.4",
3030
"core-js": "^3.6.1",
3131
"vue": "^2.6.10",
32+
"vue-analytics": "^5.22.1",
3233
"vue-i18n": "^8.15.3"
3334
},
3435
"devDependencies": {

‎src/App.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,10 @@ export default {
4646
Header,
4747
Footer,
4848
Locale
49+
},
50+
created: function() {
51+
// send home to google analytics
52+
this.$ga.page('/')
4953
}
5054
}</script>
5155
<style lang="scss">

‎src/components/HelpSection.vue‎

Lines changed: 54 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,53 +8,53 @@
88
<div class="columns" id="modal-buttons">
99
<div class="column top-bottom-paddingless">
1010
<button id="cc_license_btn" class="button is-light is-large is-fullwidth help-button"
11-
@click="isModal1Active = true">
11+
@click="clickHandler(1)">
1212
<p>
1313
{{ $t('help.what_are_cc_licenses.heading') }}
1414
</p>
1515
</button>
1616
<button id="license_work_btn" class="button is-light is-large is-fullwidth help-button"
17-
@click="isModal2Active = true">
17+
@click="clickHandler(2)">
1818
<p>
1919
{{ $t('help.how_licenses_work.heading') }}
2020
</p>
2121
</button>
2222
<button id="icons_meaning_btn" class="button is-light is-large is-fullwidth help-button"
23-
@click="isModal3Active = true">
23+
@click="clickHandler(3)">
2424
<p>
2525
{{ $t('help.what_icons_mean.heading') }}
2626
</p>
2727
</button>
2828
<button id="license_communication_btn" class="button is-light is-large is-fullwidth help-button"
29-
@click="isModal7Active = true">
29+
@click="clickHandler(7)">
3030
<p>
3131
{{ $t('help.how_licenses_communicated.heading') }}
3232
</p>
3333
</button>
3434
</div>
3535
<div class="column top-bottom-paddingless">
3636
<button id="consideration_btn" class="button is-light is-large is-fullwidth help-button"
37-
@click="isModal4Active = true">
37+
@click="clickHandler(4)">
3838
<p>
3939
{{ $t('help.considerations_before_licensing.heading') }}
4040
</p>
4141
</button>
4242
<button id="formal_license_btn" class="button is-light is-large is-fullwidth help-button"
43-
@click="isModal5Active = true">
43+
@click="clickHandler(5)">
4444
<p>
4545
{{ $t('help.how_formally_license.heading') }}
4646
</p>
4747
</button>
4848
<button id="license_description_btn" class="button is-light is-large is-fullwidth help-button"
49-
@click="isModal6Active = true">
49+
@click="clickHandler(6)">
5050
<p>
5151
{{ $t('help.six_cc_licenses.heading') }}
5252
</p>
5353
</button>
5454
</div>
5555
</div>
5656

57-
<b-modal :active.sync="isModal1Active">
57+
<b-modal :active.sync="modals[1].status">
5858
<header class="modal-card-head">
5959
<p class="modal-card-title modal-title" v-html="this.$t('help.what_are_cc_licenses.heading')"/>
6060
</header>
@@ -65,7 +65,7 @@
6565
</footer>
6666
</section>
6767
</b-modal>
68-
<b-modal :active.sync="isModal2Active">
68+
<b-modal :active.sync="modals[2].status">
6969
<header class="modal-card-head">
7070
<p class="modal-card-title modal-title">
7171
{{ $t('help.how_licenses_work.heading') }}
@@ -76,7 +76,7 @@
7676
<footer class="modal-card-foot" v-html="this.$t('help.how_licenses_work.footer')"/>
7777
</section>
7878
</b-modal>
79-
<b-modal :active.sync="isModal3Active">
79+
<b-modal :active.sync="modals[3].status">
8080
<header class="modal-card-head">
8181
<p class="modal-card-title modal-title">
8282
{{ $t('help.what_icons_mean.heading') }}
@@ -141,7 +141,7 @@
141141
</footer>
142142
</section>
143143
</b-modal>
144-
<b-modal :active.sync="isModal4Active">
144+
<b-modal :active.sync="modals[4].status">
145145
<header class="modal-card-head">
146146
<p class="modal-card-title modal-title">
147147
{{ $t('help.considerations_before_licensing.heading') }}
@@ -154,7 +154,7 @@
154154
</footer>
155155
</section>
156156
</b-modal>
157-
<b-modal :active.sync="isModal5Active">
157+
<b-modal :active.sync="modals[5].status">
158158
<header class="modal-card-head">
159159
<p class="modal-card-title modal-title">
160160
{{ $t('help.how_formally_license.heading') }}
@@ -164,7 +164,7 @@
164164
<article v-html="this.$t('help.how_formally_license.text')"/>
165165
</section>
166166
</b-modal>
167-
<b-modal :active.sync="isModal6Active">
167+
<b-modal :active.sync="modals[6].status">
168168
<header class="modal-card-head">
169169
<p class="modal-card-title modal-title">
170170
{{ $t('help.six_cc_licenses.heading') }}
@@ -187,7 +187,7 @@
187187
</footer>
188188
</section>
189189
</b-modal>
190-
<b-modal :active.sync="isModal7Active">
190+
<b-modal :active.sync="modals[7].status">
191191
<header class="modal-card-head">
192192
<p class="modal-card-title modal-title">{{ $t('help.how_licenses_communicated.heading') }}
193193
</p>
@@ -242,13 +242,46 @@ export default {
242242
data() {
243243
return {
244244
sixLicensesImg: '<img src="../assets/license-openness-scale.png">',
245-
isModal1Active: false,
246-
isModal2Active: false,
247-
isModal3Active: false,
248-
isModal4Active: false,
249-
isModal5Active: false,
250-
isModal6Active: false,
251-
isModal7Active: false
245+
modals: {
246+
1: {
247+
status: false,
248+
title: 'what_are_cc_licenses'
249+
},
250+
2: {
251+
status: false,
252+
title: 'how_licenses_work'
253+
},
254+
3: {
255+
status: false,
256+
title: 'what_icons_mean'
257+
},
258+
4: {
259+
status: false,
260+
title: 'considerations_before_licensing'
261+
},
262+
5: {
263+
status: false,
264+
title: 'how_formally_license'
265+
},
266+
6: {
267+
status: false,
268+
title: 'six_cc_licenses'
269+
},
270+
7: {
271+
status: false,
272+
title: 'how_licenses_communicated'
273+
}
274+
}
275+
}
276+
},
277+
methods: {
278+
clickHandler(modalNumber) {
279+
this.modals[modalNumber].status = true
280+
this.$ga.event({
281+
eventCategory: 'HelpSection',
282+
eventAction: 'clicked',
283+
eventLabel: this.modals[modalNumber].title
284+
})
252285
}
253286
}
254287
}

‎src/components/SelectedLicenseCode.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,21 @@ export default {
7878
methods: {
7979
onCopySuccess(e) {
8080
this.success = true
81+
const fieldsFilled = {}
82+
for (const detail in this.$props.value.attributionDetails) {
83+
fieldsFilled[detail] = this.$props.value.attributionDetails[detail] !== ''
84+
}
85+
const copiedLicense = {
86+
license: this.$props.value.shortName,
87+
// codeType can be either rich-text or html
88+
codeType: this.currentSelection,
89+
fieldsFilled: fieldsFilled
90+
}
91+
this.$ga.event({
92+
eventCategory: 'Attribution',
93+
eventAction: 'copied',
94+
eventLabel: JSON.stringify(copiedLicense)
95+
})
8196
this.$emit('copied', { content: e.text })
8297
setTimeout(() => {
8398
this.success = false

‎src/components/SelectedLicenseDropdown.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,11 @@ export default {
5151
},
5252
set(currentLicense) {
5353
const fullLicenseName = this.fullLicenseName(currentLicense)
54+
this.$ga.event({
55+
eventCategory: 'LicenseDropdown',
56+
eventAction: 'licenseSelected',
57+
eventLabel: currentLicense
58+
})
5459
this.$emit('input', { ...this.$props.value, fullName: fullLicenseName, shortName: currentLicense })
5560
}
5661
}

‎src/components/Stepper.vue‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,16 @@ export default {
121121
if (payload === ndStep && this.$props.value.shortName.includes('ND')) {
122122
this.currentStep = attributionDetailsStep
123123
}
124+
if (this.currentStep === attributionDetailsStep) {
125+
this.sendSelectedToGa()
126+
}
127+
},
128+
sendSelectedToGa() {
129+
this.$ga.event({
130+
eventCategory: 'Stepper',
131+
eventAction: 'licenseSelected',
132+
eventLabel: this.$props.value.shortName
133+
})
124134
},
125135
getIcon(attrName) {
126136
if (attrName === 'BY') {
@@ -139,11 +149,12 @@ export default {
139149
updateLicense(itemId) {
140150
const attrs = { ...this.licenseAttributes }
141151
attrs[itemId] = !attrs[itemId]
142-
this.$emit('input', {
152+
const licenseData = {
143153
shortName: this.shortLicenseName(attrs),
144154
fullName: this.fullLicenseName(attrs),
145155
attributionDetails: this.$props.value.attributionDetails
146-
})
156+
}
157+
this.$emit('input', licenseData)
147158
},
148159
shortLicenseName(attr) {
149160
if (!attr.BY) { return 'CC0 1.0' }

‎src/main.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import Vue from 'vue'
2-
import App from './App.vue'
32
import Buefy from 'buefy'
43
import i18n from './i18n'
4+
import VueAnalytics from 'vue-analytics'
5+
import App from './App.vue'
56
import { library } from '@fortawesome/fontawesome-svg-core'
67
// internal icons
78
import {
@@ -21,6 +22,14 @@ Vue.use(Buefy, {
2122
defaultIconComponent: 'vue-fontawesome',
2223
defaultIconPack: 'fas'
2324
})
25+
26+
Vue.use(VueAnalytics, {
27+
id: 'UA-2010376-41',
28+
autoTracking: {
29+
screenview: true
30+
}
31+
})
32+
2433
Vue.use(LicenseUtilities)
2534

2635
new Vue({

0 commit comments

Comments
 (0)