track installs on distro page (#5621)

* track installs on distro page

Author: ilayda-cp

static/js/public/distro-install.ts

@@ -2,7 +2,15 @@ import screenshots from "./snap-details/screenshots";
 import videos from "./snap-details/videos";
 import initExpandableArea from "./expandable-area";
 import triggerEventWhenVisible from "./ga-scroll-event";
+import initCopyCommand from "./snap-details/copyCommand";
 import declareGlobal from "../libs/declare";
+import { trackPageView } from "@canonical/analytics-events";
+
+if (window.ANALYTICS_ENDPOINT) {
+  trackPageView("snap_distro_install_page");
+}
+
+initCopyCommand();
 
 declareGlobal("snapcraft.public.distroInstall", {
   screenshots,

templates/partials/_code-snippet.html

@@ -1,3 +1,18 @@
-<div class="p-code-snippet">
+<div class="p-code-snippet" style="position: relative;">
   <pre class="p-code-snippet__block--icon is-wrapped"><code {% if snippet_id %}id="snippet-{{ snippet_id }}"{% endif %}>{{ snippet_value }}</code></pre>
+  {% if snippet_id %}
+  <button
+    class="p-button--base is-dense has-icon u-no-margin--bottom"
+    title="Copy to clipboard"
+    data-js="copy-install-command"
+    data-copy-target="snippet-{{ snippet_id }}"
+    {% if snippet_analytics_target %}
+      data-analytics-click
+      data-analytics-target="{{ snippet_analytics_target }}"
+    {% endif %}
+    style="position: absolute; top: 0.5rem; right: 0.5rem;"
+  >
+    <i class="p-icon--copy">Copy to clipboard</i>
+  </button>
+  {% endif %}
 </div>

templates/store/snap-distro-install.html

@@ -188,6 +188,7 @@ <h3>Install {{ snap_title }}</h3>
                   lowest_risk_available,
                   confinement) %}
             {% set snippet_id = "snap-install-stable" %}
+            {% set snippet_analytics_target = "snap_distro_install_copy_install_command" %}
             {% include "/partials/_code-snippet.html" %}
           </div>
         </div>