Map Metrics Updates

src/components/CopyToClipboard/CopyToClipboard.vue

@@ -94,8 +94,10 @@ export default {
 
       if (copiedSuccessfully) {
         this.textLabel = LABEL_AFTER;
+        this.$emit('copied', {status: 'success'});
       } else {
         this.textLabel = 'Error trying to copy to clipboard!';
+        this.$emit('copied', {status: 'error'});
       }
     },
     resetSettings: function () {

src/components/Tooltip/AnnotationPopup.vue

@@ -30,7 +30,7 @@
       <el-row class="info-field">
         <div class="title">Feature Annotations</div>
         <div class="title-buttons">
-          <copy-to-clipboard :content="updatedCopyContent" />
+          <copy-to-clipboard  @copied="onCopied" :content="updatedCopyContent" />
         </div>
       </el-row>
       <template v-if="entry">
@@ -271,12 +271,26 @@ export default {
       if (this.entryIndex !== 0) {
         this.entryIndex = this.entryIndex - 1;
         this.emitActiveItemChange();
+
+        const data = this.annotationEntry[this.entryIndex];
+        const taggingData = {
+          'event_name': `portal_maps_annotation_previous`,
+          'category': String(data?.featureId || ''),
+        };
+        this.trackEvent(taggingData);
       }
     },
     next: function () {
       if (this.entryIndex !== this.annotationEntry.length - 1) {
         this.entryIndex = this.entryIndex + 1;
         this.emitActiveItemChange();
+
+        const data = this.annotationEntry[this.entryIndex];
+        const taggingData = {
+          'event_name': `portal_maps_annotation_next`,
+          'category': String(data?.featureId || ''),
+        };
+        this.trackEvent(taggingData);
       }
     },
     emitActiveItemChange: function () {
@@ -491,6 +505,23 @@ export default {
 
       return contentArray.join('\n\n<br>');
     },
+    onCopied: function () {
+      const data = this.annotationEntry[this.entryIndex];
+      const taggingData = {
+        'event_name': `portal_maps_annotation_copy_content`,
+        'category': String(data?.featureId || ''),
+      };
+
+      this.trackEvent(taggingData);
+    },
+    trackEvent: function (data) {
+      const taggingData = {
+        'event': 'interaction_event',
+        'location': 'map_annotation',
+        ...data,
+      };
+      this.$emit('trackEvent', taggingData);
+    }
   },
   watch: {
     annotationEntry: {

src/components/Tooltip/ExternalResourceCard.vue

@@ -3,7 +3,7 @@
     <div class="attribute-title-container">
       <div class="attribute-title">References</div>
       <div class="copy-button">
-        <CopyToClipboard label="Copy list to clipboard" :content="referecesListContent" />
+        <CopyToClipboard @copied="onCopied($event, '')" label="Copy list to clipboard" :content="referecesListContent" />
       </div>
     </div>
     <div class="citation-tabs" v-if="referencesWithDOI">
@@ -55,7 +55,7 @@
               @show-related-connectivities="showRelatedConnectivities"
             />
 
-            <CopyToClipboard :content="reference.citation[citationType]" />
+            <CopyToClipboard @copied="onCopied($event, reference)" :content="reference.citation[citationType]" />
           </template>
         </template>
       </li>
@@ -68,7 +68,7 @@
           @show-related-connectivities="showRelatedConnectivities"
         />
 
-        <CopyToClipboard :content="formatCopyReference(reference)" />
+        <CopyToClipboard @copied="onCopied($event, reference)" :content="formatCopyReference(reference)" />
       </li>
 
       <li v-for="reference of isbnDBReferences" :key="reference.id">
@@ -79,7 +79,7 @@
           @show-related-connectivities="showRelatedConnectivities"
         />
 
-        <CopyToClipboard :content="reference.url" />
+        <CopyToClipboard @copied="onCopied($event, reference)" :content="reference.url" />
       </li>
     </ul>
   </div>
@@ -154,6 +154,15 @@ export default {
   methods: {
     showRelatedConnectivities: function (resource) {
       this.$emit('show-reference-connectivities', resource);
+
+      const taggingData = {
+        'event': 'interaction_event',
+        'event_name': `portal_maps_show_related_connectivities`,
+        'category': resource,
+        'location': 'map_connectivity_references',
+      };
+
+      this.$emit('trackEvent', taggingData);
     },
     formatReferences: function (references) {
       const nonPubMedReferences = this.extractNonPubMedReferences(references);
@@ -546,6 +555,42 @@ export default {
         throw new Error(error);
       }
     },
+    onCopied: function (event, reference) {
+      let category = 'Reference List';
+      let doi = '';
+      let citationType = this.citationType;
+
+      if (reference) {
+        category = reference.resource;
+        doi = reference.type === 'doi' ? reference.id : '';
+      } else {
+        const combinedResources = [
+          ...this.pubMedReferences,
+          ...this.openLibReferences,
+          ...this.isbnDBReferences
+        ];
+        const formattedResources = combinedResources.map((resource) => {
+          if (resource.type === 'doi') {
+            return resource.id;
+          } else {
+            return resource.resource;
+          }
+        });
+
+        category = formattedResources.join(', ');
+      }
+
+      const taggingData = {
+        'event': 'interaction_event',
+        'event_name': `portal_maps_copy_citation`,
+        'category': category,
+        'doi': doi,
+        'citation_type': citationType,
+        'location': 'map_connectivity_references',
+      };
+
+      this.$emit('trackEvent', taggingData);
+    },
   },
 }
 </script>