add copy button & track installs (#5616)

* add copy button & track installs

Author: ilayda-cp

static/js/public/snap-details/copyCommand.ts

@@ -0,0 +1,30 @@
+export default function initCopyCommand() {
+  document.addEventListener("click", (e) => {
+    const button = (e.target as HTMLElement).closest(
+      "[data-js='copy-install-command']",
+    ) as HTMLElement | null;
+
+    if (!button) return;
+
+    const targetId = button.dataset.copyTarget;
+    if (!targetId) return;
+
+    const codeEl = document.getElementById(targetId);
+    if (!codeEl) return;
+
+    const text = codeEl.textContent?.trim();
+    if (!text) return;
+
+    navigator.clipboard.writeText(text).then(() => {
+      const icon = button.querySelector("i");
+      if (icon) {
+        icon.className = "p-icon--success";
+        button.title = "Copied!";
+        setTimeout(() => {
+          icon.className = "p-icon--copy";
+          button.title = "Copy to clipboard";
+        }, 2000);
+      }
+    });
+  });
+}

static/js/public/store-details.ts

@@ -6,13 +6,16 @@ import initReportSnap from "./snap-details/reportSnap";
 import initEmbeddedCardModal from "./snap-details/embeddedCard";
 import { snapDetailsPosts } from "./snap-details/blog-posts";
 import initExpandableArea from "./expandable-area";
+import initCopyCommand from "./snap-details/copyCommand";
 import declareGlobal from "../libs/declare";
 import { trackPageView } from "@canonical/analytics-events";
 
 if (window.ANALYTICS_ENDPOINT) {
   trackPageView("snap_details_page");
 }
 
+initCopyCommand();
+
 declareGlobal("snapcraft.public.storeDetails", {
   map,
   screenshots,

templates/store/snap-details.html

@@ -114,7 +114,9 @@
                 {% endif %}
                 data-js="open-channel-map"
                 data-controls="channel-map-install"
-                aria-controls="channel-map-install">
+                aria-controls="channel-map-install"
+                data-analytics-click
+                data-analytics-target="snap_details_install_button">
                   Install
                   {% if is_preview %}
                 <span class="p-tooltip__message u-align--center" role="tooltip" id="{{ package_name }}-preview-channel-map">This content is being displayed for preview purposes</span>

templates/store/snap-details/_channel_map.html

@@ -20,7 +20,10 @@
               ?channel={{ default_track }}/{{ lowest_risk_available }}
             {% endif %}"
           class="p-view-store-button"
-          data-js="open-desktop">
+          data-js="open-desktop"
+          data-analytics-click
+          data-analytics-target="snap_details_view_in_desktop_store"
+          data-analytics-channel="{{ default_track }}/{{ lowest_risk_available }}">
             View in Desktop store
         </button>
         <p class="p-form-help-text">Make sure <a href="/docs/installing-snapd">snap support</a> is enabled in your Desktop store.</p>
@@ -30,9 +33,10 @@
       </div>
       <div class="u-fixed-width">
         <p><b>Install using the command line</b></p>
-        <div class="p-code-snippet">
+        <div class="p-code-snippet" style="position: relative;">
           <pre class="p-code-snippet__block--icon"><code id="snap-install">{{ install_snippet(
           package_name, default_track, lowest_risk_available, confinement) }}</code></pre>
+          <button class="u-no-margin--bottom" title="Copy to clipboard" data-js="copy-install-command" data-copy-target="snap-install" data-analytics-click data-analytics-target="snap_details_copy_install_command" data-analytics-channel="{{ default_track }}/{{ lowest_risk_available }}" style="position: absolute; top: 0.5rem; right: 0.5rem; background: transparent; border: none; cursor: pointer; padding: 0.25rem;"><i class="p-icon--copy" style="opacity: 0.7;">Copy to clipboard</i></button>
         </div>
         <p class="p-form-help-text">
           Don't have snapd? <a href="/docs/installing-snapd">Get set up for snaps</a>.
@@ -167,16 +171,17 @@
       </div>
     </div>
     <p>Ubuntu 16.04 or later?</p>
-    <button data-snap="{{ package_name }}?channel=${channel}" class="p-view-store-button" data-js="open-desktop">View in Desktop store</button>
+    <button data-snap="{{ package_name }}?channel=${channel}" class="p-view-store-button" data-js="open-desktop" data-analytics-click data-analytics-target="snap_details_channel_view_in_desktop_store" data-analytics-channel="${channel}">View in Desktop store</button>
     <p class="p-form-help-text">Make sure <a href="/docs/installing-snapd">snap support</a> is enabled in your Desktop store.</p>
   </div>
   <div class="u-fixed-width">
     <hr />
   </div>
   <div class="u-fixed-width">
     <p><b>Install using the command line</b></p>
-    <div class="p-code-snippet">
+    <div class="p-code-snippet" style="position: relative;">
       <pre class="p-code-snippet__block--icon is-wrapped"><code id="snap-install-alt">sudo snap install {{ package_name }}${paramString}</code></pre>
+      <button class="u-no-margin--bottom" title="Copy to clipboard" data-js="copy-install-command" data-copy-target="snap-install-alt" data-analytics-click data-analytics-target="snap_details_channel_copy_install_command" data-analytics-channel="${channel}" style="position: absolute; top: 0.5rem; right: 0.5rem; background: transparent; border: none; cursor: pointer; padding: 0.25rem;"><i class="p-icon--copy" style="opacity: 0.7;">Copy to clipboard</i></button>
     </div>
     <p class="p-form-help-text">
       Don't have snapd? <a href="/docs/installing-snapd">Get set up for snaps</a>.
@@ -189,7 +194,7 @@
     <td>${row[0]}/${row[1]}</td>
     <td>${row[2]}</td>
     <td class="u-hide--medium u-hide--small">${row[3]}</td>
-    <td class="u-align--center"><a href="#" class="p-channel-map__version-table-install">Install &rsaquo;</a></td>
+    <td class="u-align--center"><a href="#" class="p-channel-map__version-table-install" data-analytics-click data-analytics-target="snap_details_channel_version_install" data-analytics-channel="${row[0]}/${row[1]}" data-analytics-version="${row[2]}">Install &rsaquo;</a></td>
   </tr>
 </script>