GTMを使ってDOM要素の編集をやってみた！

Tweet

仕事で困ったことが発生。
サイトに掲載しているリンク先のURLにパラメータとして、アクセスしている人ごとに異なる識別子とコンテンツごとに異なる識別子を付与してくれとのこと。
しかもすぐに。

開発を入れようにも時間がないので、GTMでなんとかできないか考えてみた。
設定すべき箇所は２か所。

幸いなことにいくつか条件が。

ケース①

１か所目は普通のテキストリンク。

1. 該当箇所のhref属性にはidが付与されている
2. パラメータに追加しなければならない識別子はdatalayer変数に既に含まれている
3. パラメータに追加しなければならない識別子はページURLのパラメータに既に含まれている
4. パラメータを追加するURLには、固有の文字列が含まれている

ケース②

２か所目。リダイレクトページのリンク。

1. metaタグを利用したリダイレクトページ
2. パラメータに追加しなければならない識別子はdatalayer変数に既に含まれている
3. パラメータに追加しなければならない識別子は、リファラから取得する必要がある
4. パラメータを追加するURLには、固有の文字列が含まれている

まずはケース①の例

ケース①はこんな以下のような状況です。
「identifier」という文字列がid=test_idのhref属性に含まれている場合に、パラメータ?param=パラメータ1&ref=パラメータ2を付与せよというもの。

<a id="test_id" href="https://sumida-seabass.sakura.ne.jp/gtm/domtree20180825_identifier" target="_blank">

ケース①のGTMの変数設定

ケース①のGTMのトリガ設定

ケース①のGTMのタグ設定

タグタイプはカスタムhtml。
変更したい箇所のhref要素にパラメータをjsで追加する。

<script>
/*対象のDOMを取得*/
  var target = document.getElementById("test_id");
  var add_param1= target.href+dataLayer[0].param1 ;
  var param2 = "&param_2=";
/*現在のURLのパラメータを取得*/
  var url_param=window.location.search.substring(1,window.location.search.length);
   /* リファラのパラメータ名分をカット */
  url_param=url_param.substring(4);
  target.href= add_param1+param2+url_param;
</script>

ケース②の例

htmlのmeta refreshを使ったリダイレクト設定では、headタグ内で下記のように設定を行うことで実現できます。
5秒後に指定URLへ転送を行う場合

<meta http-equiv=”refresh” content=”5;URL=’http://www.example.identifier.com/'” />

このcontentで指定されるURLに「identifier」が含まれる場合だけパラメータを付与せよというもの。

ケース②のGTMの変数設定

ケース②のGTMのトリガ設定

ケース②のGTMタグ設定

タグタイプはカスタムhtmlです。
datalayerと、前ページのリファラーから識別子を取得しています。

<script>
var headChildren = document.head.children;
var param2 = "&param_2=";

/*リファラからパラメータを取得*/
var ref=document.referrer;
var param_id = ref.split('=');

/*headタグにmetaタグは含まれるため、パラメータ付与個所をのmetaタグを下記で探索*/
for(var i = 0; i < headChildren.length; i++) {
if(typeof headChildren[i].getAttribute('http-equiv') !== "undefined") {
    	var propertyHttpEquiv = headChildren[i].getAttribute('http-equiv');
  	  }
if(typeof headChildren[i].getAttribute('name') !== "undefined") {
    	var propertyName = headChildren[i].getAttribute('name');
  	  }

if(propertyHttpEquiv === 'refresh') {
/*リダイレクト先URLの記載個所にパラメータを追加*/
    var target = headChildren[i].content;
    headChildren[i].content = target + dataLayer[0].param1_id +param2+param_id[1];
  }
}
</script>

これで該当の箇所のリンクにだけパラメータを仕込めます。

まとめ

GTMで動的にサイトを変更できるんですね。
ものすごく強力なツールだなと思いました。
CRMとWebサイトとサーバ開発がそれぞれのことを理解していないとおかしな不具合を招く原因になるので、
このあたりの意思疎通を図りながらの運用がとても大切ですね。

あと、ココナラでGA/GTM設定のお手伝いはじめました。
見積依頼をしていただければ内容カスタマイズしますのでよろしければどうぞ。
お困りですか？ GA/GTMの設定、承ります

Tweet