diff --git a/front/src/lib/_utils/uiHelpers.js b/front/src/lib/_utils/uiHelpers.js
index b5319fb8e..b45729654 100644
--- a/front/src/lib/_utils/uiHelpers.js
+++ b/front/src/lib/_utils/uiHelpers.js
@@ -35,27 +35,39 @@ export const themeToggleClick = (theme) => {
 /**
  * Track a click on the code copy button.
  * @param {string} pageTitle - The title of the page containing the code.
- * @param {string} pageSlug - The slug of the page containing the code.
+ * @param {string} page - The slug of the page containing the code.
  * @param {string} [codeTitle='Untitled'] - The title of the code being copied.
  * @param {string} componentInstanceID - The unique identifier of the code component instance.
  */
 export const codeCopyClick = (
   pageTitle,
-  pageSlug,
+  page,
   codeTitle = 'Untitled',
   componentInstanceID
 ) => {
-  trackPlausible('Code Copy', {
+  trackPlausible('Copied Code', {
     pageTitle,
-    pageSlug,
+    page,
     codeTitle,
-    codeIdentifier: `code_copy__${pageSlug.replace(
+    codeIdentifier: `code_copy__${page.replace(
       /-/g,
       '_'
     )}__${componentInstanceID}`,
   });
 };
 
+/**
+ * Track a click on the code copy button.
+ * @param {string} altText - The title of the page containing the code.
+ * @param {string} page - The slug of the page containing the code.
+ */
+export const animatedImagePlay = (altText, page) => {
+  trackPlausible('Played Animated Image', {
+    altText,
+    page,
+  });
+};
+
 /**
  * Helper function to track Plausible events.
  * @param {string} eventName - The name of the Plausible event to track.
diff --git a/front/src/lib/components/content/AnimatedImage.svelte b/front/src/lib/components/content/AnimatedImage.svelte
index 2dfcd7958..ab12a0d4b 100644
--- a/front/src/lib/components/content/AnimatedImage.svelte
+++ b/front/src/lib/components/content/AnimatedImage.svelte
@@ -1,6 +1,13 @@
 <script>
+  import { animatedImagePlay } from '@utils/uiHelpers';
   import '@styles/components/animated-image.css';
-  export let animation, width, height, aAlt, still, sAlt, figcaption;
+  export let animation, width, height, aAlt, still, sAlt, figcaption, slug;
+
+  $: playing = false;
+  const altText = aAlt ? aAlt : sAlt || 'No alt text. This should be fixed.';
+  function playPauseClickHandler(altText, slug) {
+    return playing === true ? false : animatedImagePlay(altText, slug);
+  }
 </script>
 
 <div class="media-box">
@@ -13,8 +20,15 @@
         alt="Still frame{sAlt === null ? '' : `: ${sAlt}`}"
         loading="lazy"
       />
-      <details>
-        <summary aria-label="Click to play the animation">
+      <details bind:open={playing}>
+        <summary
+          aria-label="Click to play the animation"
+          on:click={playPauseClickHandler(altText, slug)}
+          on:keydown={playPauseClickHandler(altText, slug)}
+          role="switch"
+          tabindex="0"
+          aria-checked={playing}
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="19.2"
@@ -44,7 +58,7 @@
             src={animation}
             {width}
             {height}
-            alt="Animated{aAlt === null ? '' : `: ${aAlt}`}"
+            alt={`Animated${aAlt === null ? '' : ' ' + aAlt}`}
             loading="lazy"
           />
         </div>
diff --git a/front/src/lib/components/posts/Post.svelte b/front/src/lib/components/posts/Post.svelte
index 647a5d897..0e0c9ab0b 100644
--- a/front/src/lib/components/posts/Post.svelte
+++ b/front/src/lib/components/posts/Post.svelte
@@ -171,6 +171,7 @@
           {still}
           {sAlt}
           {figcaption}
+          {slug}
         />
       {/if}
       {#if c.__component === 'posts.columns'}