GTM リファラでコンテンツを変える

特定のURLからランディングしたとき、ページのコンテンツを差し替えるサンプルです。Google Tag Managerを活用しています。

ツイッターからのリンクでこのページに飛ぶと下記のボタンが青くなります。

リファラの値に「https://t.co/」が含まれると検知して、情報を差し替えます。

<a id="demo_id" class="demo_red" href=".">リファラがツイッターではありません</a>

ツイッターを経由するためのリンクはこちら。

カスタムHTML

GTMのタグの設定はカスタムHTMLを使ってJSを記述しています。


<script>

  //idの要素の取得
  demo_id_item = document.getElementById('demo_id');

    //class名を定義
  demo_id_item.setAttribute('class', 'demo_blue');

  //href属性の値を書き換える
  url_in = demo_id_item.getAttribute('href');
  url_out = url_in + '?hoge=1';
  demo_id_item.setAttribute('href', url_out);
  
  demo_id_item.innerHTML = 'ツイッターからのリファラを検知！';

</script>

トリガーの設定

GTMのトリガーの設定はリファラの部分一致を使って記述しています。（あとはこのページで発火するような記述も書いています。