Mint campaign UTM links through the piha.li shortener.

Closes #9.

Auto-insert tracked homepage links in campaign compose, register them with
url_shortening_service, and put short piha.li URLs in SMS, email hrefs, and
postcard QR codes when SHORTENER_* is configured.

site/messaging/templates/messaging/_utm_link_panel.html

@@ -0,0 +1,42 @@
+<div class="utm-panel" id="utm-link-panel"
+     data-base-url="{{ utm_base_url }}"
+     data-link-label="{{ utm_link_label }}"
+     data-medium="{{ utm_medium|default:'' }}"
+     data-campaign-name="{{ utm_campaign_name|default:'' }}"
+     data-shorten-url="{{ utm_shorten_url|default:'' }}"
+     data-campaign-id="{% if campaign %}{{ campaign.pk }}{% endif %}"
+     data-csrf="{{ csrf_token }}"
+     data-live="{% if utm_live %}1{% else %}0{% endif %}">
+  <div class="field" style="margin:0">
+    <label>Tracked site link</label>
+    <p class="hint" data-utm-email-hint hidden>
+      Auto-added to the email as a styled link. Updates as you type the campaign name.
+      <code>utm_medium=email</code> · <code>utm_campaign</code> matches the name.
+      Recipients tap a short <code>piha.li</code> link that redirects to this URL.
+    </p>
+    <p class="hint" data-utm-sms-hint hidden>
+      SMS is plain text — phones cannot show HTML links. A short <code>piha.li</code>
+      URL is in the message and phones make it tappable. Preview below shows it as a link.
+    </p>
+    <p class="hint" data-utm-postcard-hint hidden>
+      Copy the QR image into the postcard designer. Recipients scan it to open the
+      short tracked link (<code>piha.li</code>).
+    </p>
+    <code class="utm-url" data-utm-url>{{ utm_url|default:"" }}</code>
+    <div class="utm-actions">
+      <button type="button" class="btn btn-ghost btn-sm" data-utm-copy-url>Copy link</button>
+    </div>
+    <div class="utm-qr" data-utm-qr-wrap hidden>
+      <canvas data-utm-qr width="192" height="192" aria-label="Campaign QR code"></canvas>
+      <div class="utm-qr-actions">
+        <button type="button" class="btn btn-ghost btn-sm" data-utm-copy-qr>Copy QR image</button>
+        <button type="button" class="btn btn-ghost btn-sm" data-utm-download-qr>Download PNG</button>
+        <p class="hint" style="margin-top:8px">
+          Paste or upload the PNG in
+          <a href="{% url 'messaging:postcard_designer' %}">Postcard design</a>.
+        </p>
+      </div>
+    </div>
+    <p class="hint" data-utm-status hidden></p>
+  </div>
+</div>

site/messaging/templates/messaging/campaign_detail.html

@@ -1,4 +1,5 @@
 {% extends "portal_base.html" %}
+{% load static %}
 {% block title %}{{ campaign.name }} · Campaign{% endblock %}
 {% block topbar_title %}{{ campaign.name }}{% endblock %}
 {% block portal_content %}
@@ -51,6 +52,13 @@
 </div>
 {% endif %}
 
+<div class="panel" style="margin-bottom:16px">
+  <div class="panel-h"><h2>Tracked site link</h2></div>
+  <div class="panel-b">
+    {% include "messaging/_utm_link_panel.html" with utm_live=False utm_medium=campaign.channel utm_campaign_name=campaign.name %}
+  </div>
+</div>
+
 <div class="stat-row" id="campaign-stats">
   <div class="stat-card">
     <div class="label">Messages</div>
@@ -208,7 +216,10 @@
 </div>
 {% endblock %}
 {% block extra_js %}
+<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.4/build/qrcode.min.js"></script>
+<script src="{% static 'js/campaign-utm.js' %}"></script>
 <script>
+window.MonicaUtm.bindPanel(document.getElementById("utm-link-panel"));
 (function () {
   var panel = document.getElementById("recipients-panel");
   var page = (panel && panel.getAttribute("data-page")) || "1";

site/messaging/templates/messaging/campaign_list.html

@@ -1,4 +1,5 @@
 {% extends "portal_base.html" %}
+{% load static %}
 {% block title %}Campaigns · Portal{% endblock %}
 {% block topbar_title %}Campaign composer{% endblock %}
 {% block extra_head %}
@@ -64,6 +65,7 @@
           <label for="id_name">Campaign name</label>
           <input id="id_name" name="name" type="text" required
                  placeholder="Spring seller tips" value="{{ form_data.name }}">
+          <div class="hint">Used as <code>utm_campaign</code> on the tracked site link.</div>
         </div>
         <div class="field" id="subject-field">
           <label for="id_subject">Subject</label>
@@ -84,7 +86,7 @@
           <textarea id="id_body_sms" style="min-height:140px"
                     placeholder="Hi {% templatetag openvariable %}first_name{% templatetag closevariable %}, …"
                     oninput="syncSmsBody()">{{ form_data.body }}</textarea>
-          <div class="hint">Plain text for SMS · keep it short · merge tags: <code>{% templatetag openvariable %}first_name{% templatetag closevariable %}</code>, <code>{% templatetag openvariable %}last_name{% templatetag closevariable %}</code></div>
+          <div class="hint">Plain text for SMS · keep it short · merge tags: <code>{% templatetag openvariable %}first_name{% templatetag closevariable %}</code>, <code>{% templatetag openvariable %}last_name{% templatetag closevariable %}</code>. Tracked site URL is added automatically (SMS cannot use HTML links).</div>
         </div>
         <div class="field" id="postcard-body-hint" hidden>
           <p class="hint-block" style="margin:0">
@@ -128,6 +130,7 @@
           </div>
         </div>
         <p class="hint-block">Saves a draft campaign and recipient stubs. Send from the campaign report when ready. You’ll get an email when the send finishes.</p>
+        {% include "messaging/_utm_link_panel.html" with utm_live=True %}
         <button class="btn btn-primary" type="submit">Save draft</button>
       </form>
     </div>
@@ -179,6 +182,8 @@
 {% endblock %}
 {% block extra_js %}
 <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.4/build/qrcode.min.js"></script>
+<script src="{% static 'js/campaign-utm.js' %}"></script>
 <script>
 (function () {
   var uploadUrl = "{{ image_upload_url|escapejs }}";
@@ -186,11 +191,37 @@
   var bodyField = document.getElementById('id_body');
   var smsField = document.getElementById('id_body_sms');
   var quill = null;
+  var utmLock = false;
+  var utmLinkLabel = "{{ utm_link_label|escapejs }}";
 
   function csrfHeader() {
     return { 'X-CSRFToken': csrfToken };
   }
 
+  function audienceChannel() {
+    var audience = (document.getElementById('id_audience') || {}).value || '';
+    if (audience === 'sms_opt_in') return 'sms';
+    if (audience === 'postcard_opt_in') return 'postcard';
+    return 'email';
+  }
+
+  function applyUtmToBodies(url, channel, label) {
+    if (utmLock) return;
+    utmLock = true;
+    try {
+      if (channel === 'email' && quill) {
+        window.MonicaUtm.ensureQuillLink(quill, url, label || utmLinkLabel);
+        syncBodyFromQuill();
+      } else if (channel === 'sms' && smsField) {
+        smsField.value = window.MonicaUtm.replaceTextUrl(smsField.value, url);
+        if (bodyField) bodyField.value = smsField.value;
+        syncCampaignPreview();
+      }
+    } finally {
+      utmLock = false;
+    }
+  }
+
   function syncBodyFromQuill() {
     if (!quill || !bodyField) return;
     var html = quill.root.innerHTML;
@@ -214,6 +245,7 @@
     var subject = (document.getElementById('id_subject') || {}).value || '';
     var audience = (document.getElementById('id_audience') || {}).value || '';
     var isEmail = audience === 'email_opt_in';
+    var isSms = audience === 'sms_opt_in';
     var isPostcard = audience === 'postcard_opt_in';
     var body = '';
     if (isEmail && quill) {
@@ -244,6 +276,9 @@
     if (isEmail) {
       bodyEl.style.whiteSpace = 'normal';
       bodyEl.innerHTML = body;
+    } else if (isSms) {
+      bodyEl.style.whiteSpace = 'pre-wrap';
+      bodyEl.innerHTML = window.MonicaUtm.linkify(body);
     } else {
       bodyEl.style.whiteSpace = 'pre-wrap';
       bodyEl.textContent = body;
@@ -283,6 +318,8 @@
       var active = (ch === 'email' && isEmail) || (ch === 'sms' && isSms) || (ch === 'postcard' && isPostcard);
       a.classList.toggle('active', active);
     });
+    var panel = document.getElementById('utm-link-panel');
+    if (panel && panel._utmApply) panel._utmApply();
     syncCampaignPreview();
   };
 
@@ -341,7 +378,10 @@
     } else if (initial) {
       quill.setText(initial);
     }
-    quill.on('text-change', syncBodyFromQuill);
+    quill.on('text-change', function () {
+      if (utmLock) return;
+      syncBodyFromQuill();
+    });
     document.getElementById('campaign-compose').addEventListener('submit', function () {
       var audience = (document.getElementById('id_audience') || {}).value || '';
       if (audience === 'email_opt_in') syncBodyFromQuill();
@@ -370,6 +410,14 @@
   if (tmplSelect) tmplSelect.addEventListener('change', syncCampaignPreview);
 
   initQuill();
+  window.MonicaUtm.bindPanel(document.getElementById('utm-link-panel'), {
+    getName: function () {
+      return (document.getElementById('id_name') || {}).value || '';
+    },
+    getMedium: audienceChannel,
+    csrfToken: csrfToken,
+    onUrlChange: applyUtmToBodies
+  });
   syncComposeChannel();
 })();
 </script>