対象プランOFFLINEBUSINESSPRO
作成したランディングページにEventHubの登録フォームへアクセス出来るボタンを設置した場合、ランディングページに設定したUTMパラメーターは登録フォームへ引き継がれません。
ランディングページでパラメーター引き継ぎの処理が入っていない場合は、本ページの手順を参考に、UTMパラメーターが引き継がれるように設定しましょう。
<tips>関連ページ：UTMパラメーターを利用して流入経路の計測をする</tips>
<attention>こちらでご紹介する方法は、提供する情報の継続や正確性を完全に保証するものではありません。本ページでご紹介した方法で正しく動作するかは必ずご自身で検証ください。
既にパラメーター引き継ぎの実装が入っている場合は、本ページのコードを記載することで二重にパラメータが引き継がれる可能性もございます。
正常に作動しない場合は、作成したランディングページに問題がある、あるいはGoogleタグマネージャーの設定方法に不備がある場合があります。技術的な内容となるため、トラブルシューティングは社内のエンジニアへご依頼ください。</attention>
1. EventHubの登録フォームを作成する
まず初めに、ランディングページに設定するEventHubの登録フォームを作成しましょう。
作成手順は以下のページをご覧ください。
2. ランディングページを作成する
次に、ランディングページを作成します。作成したページに、1の手順で作成したEventHubの登録フォームのリンクを設定しましょう。
作成したフォームの列の一番右にある、3点マーク[アクション]＞[URLコピー]をクリックすると、個別登録フォームのURLが取得できます。
3. GoogleタグマネージャーにカスタムHTMLタグを設定する
<tips>ランディングページに設定するGoogleタグマネージャーのアカウントを作成していない場合は、アカウントの作成から始めます。既に作成している方は、手順③へスキップしてください。</tips>
① [アカウントを作成]をクリックします。
② アカウント名、国、コンテナ名、ターゲットプラットフォーム(ウェブ)を入力し、[作成]をクリックします。
③ [新しいタグ]をクリックします。
④ [タグの設定]をクリックし、タグタイプ[カスタムHTML]を選択します。
⑤ タグの名称を変更し、[HTML]の部分に以下のコードをコピー＆ペースト＞[保存]をクリックします。
<script>
(function () {
//UTMパラメーターを引き継ぐページのドメインを設定(今回の場合はEventHubの登録フォーム)
//カスタムドメインを利用のお客様は、以下の ‘client.eventhub.jp’を ‘client.カスタムドメイン’に変更してください。
var domainsToDecorate = [
'client.eventhub.jp'
],
queryParams = [
'utm_source',
'utm_medium',
'utm_campaign',
'utm_term',
'utm_content'
];
var links = document.querySelectorAll('a');
for (
var linkIndex = 0;
linkIndex < links.length;
linkIndex++
) {
for (
var domainIndex = 0;
domainIndex < domainsToDecorate.length;
domainIndex++
) {
if (
links[linkIndex].href.indexOf(
domainsToDecorate[domainIndex]
) > -1 &&
links[linkIndex].href.indexOf('#') === -1
) {
links[linkIndex].href = decorateUrl(
links[linkIndex].href
);
}
}
}
function decorateUrl(urlToDecorate) {
urlToDecorate =
urlToDecorate.indexOf('?') === -1
? urlToDecorate + '?'
: urlToDecorate + '&';
var collectedQueryParams = [];
for (
var queryIndex = 0;
queryIndex < queryParams.length;
queryIndex++
) {
if (getQueryParam(queryParams[queryIndex])) {
collectedQueryParams.push(
queryParams[queryIndex] +
'=' +
getQueryParam(queryParams[queryIndex])
);
}
}
return collectedQueryParams.length === 0
? urlToDecorate.slice(0, -1)
: urlToDecorate +
collectedQueryParams.join('&');
}
function getQueryParam(name) {
if (
(name = new RegExp(
'[?&]' + encodeURIComponent(name) + '=([^&]*)'
).exec(window.location.search))
)
return decodeURIComponent(name[1]);
}
})();
</script>
参考記事：Transfer UTM Parameters From One Page To Another with GTM
⑥ [トリガー]をクリックし、[All Pages]を選択します。
⑦ [保存]をクリックします。
⑧ 作成したタグが追加されていることを確認し、[公開]をクリックします。
⑨ バージョン名を入力し、[公開]をクリックします。
⑩ 以下の画面に遷移すれば公開完了です。
4. ランディングページにGoogleタグマネージャーを設置する
次に、手順3で作成したGoogleタグマネージャーをランディングページに設置します。
画面右上にある[GTM-XXXXXXX]をクリックしてコードを取得し、ランディングページの<head>と<body>に設置してください。
以上の設定で、ランディングページに設定したUTMパラメーターがEventHubの登録フォームへ引き継がれるようになります。必ずご自身で引き継がれているかどうか、ご確認ください。
5. 注意・補足
このJavaScriptは、ページが読み込まれた後にページ内のURLを全て取得し、コード内で設定したドメインに該当する場合はUTMパラメーターを付与するという処理行っています。
ページの読み込みがされる前に本JavaScriptが実行されると、URLが取得できずに正常に作動しない場合があります。正常に作動しない場合は、Googleタグマネージャーで以下の手順に沿って設定を行なってください。
① トリガーの設定を開き、[+]をクリックします。
② トリガーの設定をクリックし、[ウィンドウの読み込み]を選択します。
③ トリガーの名称を設定し、[すべてのウィンドウの読み込みイベント]にチェックを入れる＞[保存]をクリックします。
④ [保存]した後、再度公開設定をしてください。
上記設定を行うと、ページウィンドウ内の読み込みが終わった後に設定したGoogleタグマネージャーが作動するため、動的に生成されたランディングページでも正常に作動されるようになります。