キャンペーン配線図 / UTM実例ガイド

二重UTM・日本語・記号によるURLの崩れを点検する

既存パラメータがあるURLへタグを付けるときの架空例です。出力文字列を読み、値と区切りが保たれたか確かめます。

崩れや重複が起きる場所

URLでは ? の後ろがクエリ、& がクエリ項目の区切り、# の後ろがフラグメントです。値の中で区切り記号をデータとして使う場合は、URLの各部分を組み立てる段階でパーセントエンコードします。たとえば値の & は %26、= は %3D、# は %23 になります。URL仕様ではこれらを構文の区切りにも使うため、データとして使うときの扱いに注意が必要です。

すでに同名のUTMがあるURLへ手で文字列を足すと、同じキーが複数並ぶ場合があります。複数値の解釈は利用先に依存するので、完成URL内のUTMを1項目につき1つにそろえてから使います。

入力例と期待されるURL

次の入力はすべて架空です。ベースURLには古い utm_source が2つ、古い utm_medium が1つ含まれています。

ベースURL: https://example.com/landing?ref=mail&utm_source=old&utm_source=older&utm_medium=wrong&note=rock%26roll#thanks
utm_source: 広報
utm_medium: social
utm_campaign: 秋 & 体験会
utm_content: 上部 # 特集
utm_term: A=B

「キャンペーン配線図」でこの値を組み立てると、既存の同名UTMは入力値に更新され、ref・note と #thanks は残ります。

https://example.com/landing?ref=mail&note=rock%26roll&utm_source=%E5%BA%83%E5%A0%B1&utm_medium=social&utm_campaign=%E7%A7%8B%20%26%20%E4%BD%93%E9%A8%93%E4%BC%9A&utm_content=%E4%B8%8A%E9%83%A8%20%23%20%E7%89%B9%E9%9B%86&utm_term=A%3DB#thanks
確認箇所完成URLで見るもの
衝突utm_source は1回だけで値が 広報。utm_medium も1回だけで値が social。
区切り記号を含む値utm_campaign をURLとして読むと 秋 & 体験会、utm_content は 上部 # 特集、utm_term は A=B。
既存情報ref=mail、値に & を含む note=rock&roll、フラグメント #thanks が保持される。

手順

  1. URL組み立て欄へ、UTMがすでに入っているベースURLを貼ります。
  2. source・medium・campaignを入力し、必要ならcontent・termも入れて組み立てます。
  3. 結果カードの「同名UTMを更新」に表示されるキーと、完成URLに同名キーが重複せず1つずつ含まれていることを確認します。
  4. 結果の各値をURLとして読み戻し、入力値と一致することを確認します。ブラウザの開発者コンソールなら new URL(完成URL).searchParams.get('utm_campaign') のように調べられます。

期待結果：このページの例では、3つの既存UTMが新しい値へ置き換わり、エンコードされた日本語や予約記号は読み戻すと元の文字列になります。期待URLは既存の実装から生成して照合した例です。

二重エンコードと制約

新しく入力するUTM値は、パーセント表現を最大3回まで読み戻して正規化します。既存URLのUTM以外のクエリは書き換えず、たとえば label=%25E6%2597%25A5%25E6%259C%25AC は同じ表記のまま残します。二重エンコードを意図した値も保持するため、既存値の意味を直したい場合は元URLで修正してから組み立ててください。出力URLの値は利用前に確認してください。

参考資料