Skip to content

WIP: Google analytics added #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

WIP: Google analytics added #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
065324e
#62 vue-analytics added to package.json
Nov 13, 2019
b5b498f
#62 google analytics initialized and event added to the license choos…
Nov 13, 2019
993182b
documentation updated
Nov 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ $ npm run dev
You should now have the application running and accessible at http://localhost:8080 (note: will run on a different port if 8080 is occupied, most common alternative port is 8081).

## Contributing
Before getting started on an issue, please comment on the issue you would like to work on to indicate that you are interested. Issues marked with the yellow `in progress` tag are already claimed, and are not up for grabs.
Before getting started on an issue, please comment on the issue you would like to work on to indicate that you are interested. Issues marked with the yellow `in progress` tag are already claimed, and are not up for grabs.

If you create a PR for your work, but you are not finished yet, please include `WIP:` in the beginning of your PR title. When your work on your PR is completed and you are ready for a final review, please remove the `WIP:` prefix from the title to indicate that your work is done.

Expand All @@ -43,6 +43,15 @@ To run e2e tests, you must have Java installed. [[download Java here](https://ja


## Deployment
The source files for the beta deployment are contained in the `./docs/` dir, and are live. Any changes to this dir's contents will be automatically deployed, so please take care when making modifications to this location.
The source files for the beta deployment are contained in the `./docs/` dir, and are live. Any changes to this dir's contents will be automatically deployed, so please take care when making modifications to this location.

To update the dist bundle, run ```$ npm run build```, and copy the generated files from `./dist/` to `./docs/`, taking care to not delete the CNAME file in `./docs/`.

Add your Google Analyitics id in `src/main.js`:
Copy link
Member

@akmadian akmadian Nov 15, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove this section, I would like the analytics to be disabled entirely when in a dev environment by default to avoid sending events that are not from the deployed chooser.

Bonus points if you can find a way to enable the event sending functionality explicitly with a flag on npm run start or npm run dev to allow for testing of analytics code when needed.


```javascript
Vue.use(VueAnalytics, {
id: 'UA-XXX-X',
(...)
})
```
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"clipboard": "^2.0.4",
"sass-loader": "^7.3.1",
"vue": "^2.5.2",
"vue-analytics": "^5.17.2",
"vue-head": "^2.1.2",
"vue-i18n": "^8.15.0"
},
Expand Down
4 changes: 4 additions & 0 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,10 @@ export default {
onLicenseUpdate(e) {
this.selected = e
}
},
created: function() {
// send home to google analytics
this.$ga.page('/')
}
}
</script>
Expand Down
5 changes: 5 additions & 0 deletions src/components/Chooser.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,11 @@ export default {
},
methods: {
updateLicense() {
this.$ga.event({
eventCategory: 'license',
eventAction: 'updated',
eventLabel: this.shortLicenseName
})
this.$emit('input', {
shortName: this.shortLicenseName,
fullName: this.fullLicenseName
Expand Down
86 changes: 65 additions & 21 deletions src/components/HelpSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
<div class="column is-one-third top-bottom-paddingless" id="name-to-icons">
<p>
Creative Commons licenses can be represented by their names, their
associated icons, or both. For example, a CC BY-NC license, which
associated icons, or both. For example, a CC BY-NC license, which
requires attribution, and prohibits commercial use could be represented by its:
<table class="table is-hoverable is-fullwidth">
<tbody>
Expand Down Expand Up @@ -169,7 +169,7 @@
</p> <br>
<footer class="modal-card-foot">
<p>
For more information, please see
For more information, please see
<a id="license_link" href="https://creativecommons.org/licenses/">About the Licenses</a>
</p>
</footer>
Expand All @@ -186,16 +186,16 @@
<li>
<b> - Legal Code: </b>
<p>
Each license begins as a traditional legal tool, in the kind of
language and text formats that most lawyers know and love. We
Each license begins as a traditional legal tool, in the kind of
language and text formats that most lawyers know and love. We
call this the Legal Code layer of each license.
</p>
</li> <br>
<li>
<b> - Human Readable: </b>
<p>
Since most creators, educators, and scientists are not in fact lawyers,
we also make the licenses available in a format that normal people can read --
Since most creators, educators, and scientists are not in fact lawyers,
we also make the licenses available in a format that normal people can read --
The Commons Deed (also known as the “human readable” version of the license).
This is a handy reference for licensors and licensees, summarizing some of the
most important terms and conditions. Think of the Commons Deed as a user-friendly
Expand All @@ -211,14 +211,14 @@
software, we provide a "Machine Readable" version of the license. <br><br>

We developed a standardized way to describe licenses that software can
understand called <a id="cc_rights_link" href="https://wiki.creativecommons.org/Ccrel">CC Rights Expression language</a>
understand called <a id="cc_rights_link" href="https://wiki.creativecommons.org/Ccrel">CC Rights Expression language</a>
(CC REL) to accomplish this.
</p>
</li> <br>
</ul>
<footer class="modal-card-foot">
<p>
For more information, please see
For more information, please see
<a id="license_link_2" href="https://creativecommons.org/licenses/">About the Licenses</a>
</p>
</footer>
Expand All @@ -232,12 +232,12 @@
<p>
Our Public Domain Tools help authors keep and manage their copyright
on terms they choose. Our public domain tools, on the other hand, enable
authors and copyright owners who want to dedicate their works to the
authors and copyright owners who want to dedicate their works to the
worldwide public domain to do so.
</p>
<footer class="modal-card-foot">
<p>
For more information on CC's public domain tools, please see
For more information on CC's public domain tools, please see
<a id="domain_link" href="https://creativecommons.org/publicdomain/">Our Public Domain Tools</a>
</p>
</footer>
Expand All @@ -250,7 +250,7 @@
<section class="modal-card-body">
<p>
There are a number of things you should consider before you apply
a Creative Commons license to your work, or before using Creative
a Creative Commons license to your work, or before using Creative
Commons-licened material. <br><br>

<a id="licensors_link" href="https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Considerations_for_licensors">
Expand All @@ -262,7 +262,7 @@
</p> <br>
<footer class="modal-card-foot">
<p>
For more information, please see
For more information, please see
<a id="wiki_link" href="https://wiki.creativecommons.org/wiki/Before_Licensing">
the CC wiki's page on Considerations for Licensors and Licensees.
</a>
Expand All @@ -278,34 +278,34 @@
<p>
Formally licensing your work is as easy as marking your work
as being CC licensed, along with the specific license it is under.
This mark may be in the form of a watermark, or it may be somewhere
around where your work is hosted or shared. This mark may be as
simple as a bit of text stating the license, or as complex as
This mark may be in the form of a watermark, or it may be somewhere
around where your work is hosted or shared. This mark may be as
simple as a bit of text stating the license, or as complex as
embedding the license information on your website. <br><br>

If you are interested in embedding license information on your
If you are interested in embedding license information on your
website, please see the "Have a Website?" dropdown at the bottom
of this page for help.
</p> <br>
<p>
<b>Recourse Options</b> <br>
So what would I do if someone used my licensed work in a way
that the license does not permit? Well, there are lots of
that the license does not permit? Well, there are lots of
recourse options, but here are the two main ones: <br><br>
<ul>
<li>
<b> - Resolve the Dispute Amicably</b>
<p>
First, we encourage you to contact the alleged violator, and attempt to
resolve the dispute amicalbly. Most disagreements are solved
resolve the dispute amicalbly. Most disagreements are solved
in this manner, and it saves everyone time and money.
</p>
</li> <br>
<li>
<b> - Litigation</b>
<p>
If you determine that the disput cannot be resolved any other
way, you would then identify the alleged violation, contact a
If you determine that the disput cannot be resolved any other
way, you would then identify the alleged violation, contact a
lawyer, and begin building a case.
</p>
</li>
Expand Down Expand Up @@ -338,7 +338,7 @@
</div>
<footer class="modal-card-foot">
<p>
For more information, please see
For more information, please see
<a id="licensing_examples_link" href="https://creativecommons.org/share-your-work/licensing-types-examples/">
this page on Creative Commons licenses.
</a>
Expand Down Expand Up @@ -383,6 +383,50 @@ export default {
isModal5Active: false,
isModal6Active: false
}
},
watch: {
Copy link
Member

@akmadian akmadian Nov 15, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please try to find a better way to do this, instead of having six separate functions, I would rather have one function and pass the eventLabel as a parameter.

isModal1Active: function() {
this.$ga.event({
eventCategory: 'helpsection',
eventAction: 'clicked',
eventLabel: 'What Are Creative Commons Licenses?'
})
},
isModal2Active: function() {
this.$ga.event({
eventCategory: 'helpsection',
eventAction: 'clicked',
eventLabel: 'How do the Licenses Work?'
})
},
isModal3Active: function() {
this.$ga.event({
eventCategory: 'helpsection',
eventAction: 'clicked',
eventLabel: 'Want Public Domain Instead?'
})
},
isModal4Active: function() {
this.$ga.event({
eventCategory: 'helpsection',
eventAction: 'clicked',
eventLabel: 'Considerations Before Licensing'
})
},
isModal5Active: function() {
this.$ga.event({
eventCategory: 'helpsection',
eventAction: 'clicked',
eventLabel: 'How do I Formally License my Work?'
})
},
isModal6Active: function() {
this.$ga.event({
eventCategory: 'helpsection',
eventAction: 'clicked',
eventLabel: 'The Six CC Licenses'
})
}
}
}
</script>
Expand Down
9 changes: 9 additions & 0 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'
import VueAnalytics from 'vue-analytics'
import App from './App'
import Buefy from 'buefy'
import VueHead from 'vue-head'
Expand All @@ -10,6 +12,13 @@ import 'bulma/css/bulma.min.css'
import '@creativecommons/vocabulary/root.css'
import '@creativecommons/vocabulary/vocabulary.css'

Vue.use(VueAnalytics, {
id: 'UA-XXX-X',
autoTracking: {
screenview: true
}
})

Vue.config.productionTip = false
Vue.use(Buefy)
Vue.use(VueHead)
Expand Down