Make share button component automagically add utm tags

openaustralia · Nov 22, 2024 · 70c80c2 · 70c80c2
1 parent 9d3c520
commit 70c80c2
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 16 deletions.
diff --git a/app/components/share_button_component.html.erb b/app/components/share_button_component.html.erb
@@ -7,7 +7,7 @@
   x-bind:class="{'invisible': false}"
   x-data="{
     copied: false,
-    shareData: {url: '<%= j(@url) %>', title: '<%= j(@title) %>'}
+    shareData: {url: '<%= j(url_with_tracking) %>', title: '<%= j(@title) %>'}
   }">
   <button class="inline-block px-10 py-3 text-xl font-semibold border-2 sm:py-4"
           x-bind:class="{'bg-white': !copied, 'bg-light-grey2': copied,
@@ -21,7 +21,7 @@
               console.log('Web share error', err);
             }
           } else {
-            navigator.clipboard.writeText('<%= @url %>');
+            navigator.clipboard.writeText('<%= url_with_tracking %>');
             copied = true;
             setTimeout(() => { copied = false }, 2000);
           }">

diff --git a/app/components/share_button_component.rb b/app/components/share_button_component.rb
@@ -19,4 +19,17 @@ def initialize(url:, title:, color:)
       raise "Unexpected color: #{color}"
     end
   end
+
+  sig { returns(String) }
+  def url_with_tracking
+    append_params(@url, utm_source: "share", utm_content: content.strip)
+  end
+
+  sig { params(url: String, params: T::Hash[String, String]).returns(String) }
+  def append_params(url, params)
+    u = URI.parse(url)
+    e = Rack::Utils.parse_nested_query(u.query).merge(params).to_param
+    u.query = e
+    u.to_s
+  end
 end
diff --git a/app/views/applications/_thanks_for_commenting.html.erb b/app/views/applications/_thanks_for_commenting.html.erb
@@ -33,13 +33,9 @@
       <p class="mb-8">
         Thanks, your comment has been sent to <%= comment.comment_recipient_full_name %> and posted below!
       </p>
-      <%# TODO: Make the share button component add the utm tags automatically %>
-      <%= c = "Share your comment"
-          render ShareButtonComponent.new(
-            url: comment_url(comment, utm_source: "share", utm_content: c),
-            title: "My comment on #{page_title(comment.application)}",
-            color: :lavender
-          ).with_content(c) %>
+      <%= render ShareButtonComponent.new(url: comment_url(comment), title: "My comment on #{page_title(comment.application)}", color: :lavender) do %>
+        Share your comment
+      <% end %>
     </div>
   <% end %>
   <%# Make the canvas (which is used to show the confetti) the same size as the alert %>

diff --git a/app/views/applications/show.html.erb b/app/views/applications/show.html.erb
@@ -97,13 +97,9 @@
 </div>
 
 <div class="mt-6 md:mt-2">
-  <%# TODO: Make the share button component add the utm tags automatically %>
-  <%= c = "Share this application"
-      render ShareButtonComponent.new(
-        url: application_url(@application, utm_source: "share", utm_content: c),
-        title: page_title(@application),
-        color: :green
-      ).with_content(c) %>
+  <%= render ShareButtonComponent.new(url: application_url(@application), title: page_title(@application), color: :green) do %>
+    Share this application
+  <% end %>
 </div>
 
 <%= render "applications/create_alert_form_bigger", alert: @alert %>