PlopinoのHTMLサンプルに「自分のHTMLをアップロードする」リンクを追加しました。ここで考えたのが、サンプルを見つけた経路を次の画面にも残す方法です。
クエリ文字列を丸ごとコピーするのは簡単です。ただ、必要なのは流入元を表す三つの値だけでした。そこで許可するキーと文字を絞りました。
引き継ぐリンクを明示する
<a href="/upload?type=html" data-proposal-entry>
自分のHTMLをアップロードする
</a>
すべてのリンクではなく、data-proposal-entryを付けたリンクだけを対象にします。
'use strict';
(() => {
const query = new URLSearchParams(location.search);
const tags = ['utm_source', 'utm_medium', 'utm_campaign'];
document.querySelectorAll('a[data-proposal-entry]').forEach(link => {
const target = new URL(link.getAttribute('href'), location.href);
if (target.origin !== location.origin) return;
for (const key of tags) {
const value = query.get(key);
if (value && /^[a-zA-Z0-9][a-zA-Z0-9_.:-]{0,79}$/.test(value)) {
target.searchParams.set(key, value);
}
}
link.href = target.pathname + target.search;
});
})();
これは公開サンプルに追加した処理です。URLでリンクを解析するので、既存のtype=htmlを壊さずに値を追加できます。同じオリジンのリンクだけを書き換え、外部サイトへのリンクには触れません。
なぜ三つだけなのか
utm_source、utm_medium、utm_campaignがあれば、どの投稿から来たかを分けられます。ページに付いた未知のパラメータまで、アップロード画面へ運ぶ必要はありません。
この実装では値を80文字までにし、先頭は英数字、それ以降は英数字と_ . : -を許可しています。これは今回の命名規則です。日本語や空白を含むキャンペーン名を使うなら、意図に合わせて変更が必要です。
確認したこと
- 正常なUTMが次のリンクに残ること
- 元のリンクが持つクエリを保持すること
- 未知のキーを転送しないこと
- 外部オリジンのリンクを書き換えないこと
- 許可していない文字を含む値を引き継がないこと
公開後は、サンプルを流入元付きのURLで開き、アップロードへのリンクにもその値が残ることをブラウザで確認しました。
なお、リンクにUTMを付けるだけでは利用者数やコンバージョンを測定したことにはなりません。遷移先で記録する仕組みと、何を成果として数えるかは別に必要です。
このコードは末尾のフラグメントを残しません。アンカーへの移動も必要ならtarget.hashも保持します。また、ページのURLに秘密情報を入れてよいという意味でもありません。
流入元を知りたいだけなのに、関係ない情報まで持ち回らない。小さな変更ですが、何を引き継ぐかを決めておくと追いやすくなりました。
実装を使った提案書サンプルです。画面は英語、会社と見積もりは架空です。