Refactor analytics events (#209)

* Refactor analytics.js

* Update analytics calls in app.vue

* Update analytics calls in presets.vue

* Update analytics calls in tools.vue (and app.vue)

* Update analytics calls in global.vue

* Update analytics calls in domain.vue

* Update analytics calls in setup.vue

* Add list of all events to analytics.js

* Add custom copy to clipboard that emits event

* Emit the events from the components

* Update copyright year in all files touched

* Update analytics calls in download.vue

* Update analytics calls in ssl.vue

* Update analytics calls in certbot.vue

* Update analytics calls in domain.vue

* Update analytics calls in app.vue

* Note down 'Code snippet copied' events

src/nginxconfig/templates/global.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2021 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -29,7 +29,7 @@ THE SOFTWARE.
         <div class="tabs">
             <ul>
                 <li v-for="tab in tabs" :class="tabClass(tab.key)">
-                    <a @click="active = tab.key">{{ $t(tab.display) }}{{ changes(tab.key) }}</a>
+                    <a @click="showTab(tab.key)">{{ $t(tab.display) }}{{ changes(tab.key) }}</a>
                 </li>
             </ul>
         </div>
@@ -43,10 +43,10 @@ THE SOFTWARE.
         ></component>
 
         <div class="navigation-buttons">
-            <a v-if="previousTab !== false" class="button is-mini" @click="active = previousTab">
+            <a v-if="previousTab !== false" class="button is-mini" @click="showPreviousTab">
                 <i class="fas fa-long-arrow-alt-left"></i> <span>{{ $t('common.back') }}</span>
             </a>
-            <a v-if="nextTab !== false" class="button is-primary is-mini" @click="active = nextTab">
+            <a v-if="nextTab !== false" class="button is-primary is-mini" @click="showNextTab">
                 <span>{{ $t('common.next') }}</span> <i class="fas fa-long-arrow-alt-right"></i>
             </a>
         </div>
@@ -54,6 +54,7 @@ THE SOFTWARE.
 </template>
 
 <script>
+    import analytics from '../util/analytics';
     import isChanged from '../util/is_changed';
     import * as Sections from './global_sections';
 
@@ -113,6 +114,39 @@ THE SOFTWARE.
                 if (tabs.indexOf(tab) < tabs.indexOf(this.$data.active)) classes.push('is-before');
                 return classes.join(' ');
             },
+            showTab(target) {
+                // Analytics
+                analytics({
+                    category: 'Global',
+                    action: 'Tab clicked',
+                    label: `${this.$data.active}, ${target}`,
+                });
+
+                // Go!
+                this.$data.active = target;
+            },
+            showPreviousTab() {
+                // Analytics
+                analytics({
+                    category: 'Global',
+                    action: 'Back clicked',
+                    label: `${this.$data.active}, ${this.previousTab}`,
+                });
+
+                // Go!
+                this.$data.active = this.previousTab;
+            },
+            showNextTab() {
+                // Analytics
+                analytics({
+                    category: 'Global',
+                    action: 'Next clicked',
+                    label: `${this.$data.active}, ${this.nextTab}`,
+                });
+
+                // Go!
+                this.$data.active = this.nextTab;
+            },
         },
     };
 </script>