釣りとキャンプとコーヒーが好きなサラリーマンの趣味サイト。釣り場やキャンプ場とかの見てきたことや、Webの仕事で困ったことを記録していきます。

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

DOMツリー

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

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

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

ケース①

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

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

ケース②

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

  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の変数設定

変数の種類 DOM要素
選択方法 ID
要素セレクタ test_id
属性名 href

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

トリガーの種類 DOM Ready
トリガーの発生場所 ケース②で設定した変数に指定文字列(identifier)を含む

ケース①の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の変数設定

変数の種類 DOM要素
選択方法 CSSセレクタ
要素セレクタ meta[http-equiv="refresh"]
属性名 content

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

トリガーの種類 DOM Ready
トリガーの発生場所 ケース②で設定した変数に指定文字列(identifier)を含む

ケース②の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サイトとサーバ開発がそれぞれのことを理解していないとおかしな不具合を招く原因になるので、
このあたりの意思疎通を図りながらの運用がとても大切ですね。


コメントを残す

メールアドレスが公開されることはありません。