Initial Google Analytics tracking of node page events

src/components/AssocTable.vue

@@ -212,7 +212,7 @@
           <template v-slot:cell(support)="data">
             <b-button
               :pressed="data.item._showDetails"
-              @click="data.item._showDetails = !data.item._showDetails"
+              @click="data.item._showDetails = !data.item._showDetails; trackShowDetails(data.item); "
               size="small"
               class="btn btn-xs px-1 py-0 m-0"
               variant="outline-info"
@@ -825,6 +825,18 @@ export default {
         (nodeType === "phenotype" && cardType === "disease")
       );
     },
+    trackShowDetails(item) {
+      if (item._showDetails) {
+        this.$gtag.event(
+          this.nodeType + " node, " + this.cardType + " card, expand support ",
+          {
+            event_category: "node page association table expand support",
+            event_label: item.assocObject,
+            value: item.supportLength,
+          }
+        );
+      }
+    },
   },
 };
 </script>

src/components/EvidenceViewer.vue

@@ -172,13 +172,14 @@
               class="row"
             >
               <span v-if="pub.id.startsWith('PMID')" class="nowrap">
-                <a :href="pub.url" target="_blank" rel="noopener noreferrer">
+                <a :href="pub.url" target="_blank" rel="noopener noreferrer"
+                  @click="trackOpenPub(pub.id)">
                   {{ pub.label }}
                   <i class="fa fa-external-link" aria-hidden="true" />
                 </a>
               </span>
               <span v-else class="nowrap">
-                <router-link :to="pub.url">{{ pub.label }}</router-link>
+                <router-link :to="pub.url" @click="trackOpenPub(pub.id)">{{ pub.label }}</router-link>
               </span>
             </div>
           </template>
@@ -530,6 +531,15 @@ export default {
 
       return evidenceTable;
     },
+    trackOpenPub(label) {
+      this.$gtag.event(
+        this.nodeType + " node, " + this.cardType + " card, open publication",
+        {
+          event_category: "node association table evidence open publication",
+          event_label: label,
+        }
+      );
+    },
   },
 };
 </script>

src/components/NodeSidebar.vue

@@ -83,8 +83,11 @@ export default {
     },
     nodeType: {
       type: String,
-      required: false,
-      default: "",
+      required: true,
+    },
+    nodeId: {
+      type: String,
+      required: true,
     },
     nodeLabel: {
       type: String,
@@ -137,8 +140,19 @@ export default {
 
   methods: {
     expandCard(cardType) {
+      this.trackExpandCard(cardType);
       this.$emit("expand-card", cardType);
     },
+    trackExpandCard(cardType) {
+      this.$gtag.event(
+        this.nodeType + " node, " + cardType + " card, expand card",
+        {
+          event_category: "node page card expand",
+          event_label: this.nodeId,
+          value: this.cardCounts[cardType],
+        }
+      );
+    },
     toggleNeighborhood() {
       this.$emit("toggle-neighborhood");
     },

src/views/Node.vue

@@ -10,8 +10,7 @@
       :available-cards="availableCards"
       :cards-to-display="nonEmptyCards"
       :card-counts="counts"
-      :parent-node="node"
-      :parent-node-id="nodeId"
+      :node-id="nodeId"
       :is-neighborhood-showing="isNeighborhoodShowing"
       :subclasses="subclasses"
       :superclasses="superclasses"