アクセス解析タグ実装時、HTMLソース内からパラメータ情報を取得する（CSSセレクタがダメだった場合）

アクセス解析タグ実装時、HTMLソース内からパラメータ情報を取得する（CSSセレクタがダメだった場合）:

お困りごと

アクセス解析のタグを実装する際、解析エンジニア泣かせのこんな経験はないですか？

ページ遷移するとURLから必要なパラメータが欠落してしまい、GAの目標到達プロセスが設定できない

本来このような場合は、お客さん・ディレクター・フロントエンジニアと調整を図り、ページのソースを変更することが理想です。

ただ、大抵の場合はサイトローンチ後でもうニッチもサッチも変更できないのがよくあるパターンと思います。（特にCMSからページを生成している場合）

そういうときは、解析エンジニアが唯一イジイジできるアクセス解析ツールたちを駆使して状況を打破しましょう！

注：CSSセレクタでパラメータを取得する方法の方が簡単ですが、それすらも困難なケースに当記事をお役立てください

当記事で解決可能な環境（条件面）

1. 取得したいパラメータがHTMLソース内にsetされていること
2. Google Tag Manager(GTM)タグが実装されており、公開権限、少なくとも編集権限が付与されていること
3. Google Analytics(GA)タグがGTM内に実装されており、GAの編集権限が付与されていること

2と3の権限について、自身でタグ実装時の切り分け不可なロールであった場合、パワポとかに仕様を落として編集権限のあるレイヤーの人にやってもらいましょう。

必要な道具たち

• ブラウザ：Chrome
• 拡張機能：XPath Helper
  
• XPathチートシート：Xpathまとめコマンドとその使用例
  

XPathとは

XML Path Language （XPath（エックスパス）） はXML文書中から必要な要素群（サブセット）を取り出す、などといった用途に使うもの。－ Wikipedia

要は、HTMLのソース構造から必要な情報を抜き出す言語です。厳密には違いますが、HTML版SQLのようなもの。

実装までの大きな流れ

1. 取得したいパラメータ情報がHTMLソース内に記載されていることを確認する
2. 1をXPathで表現（=記述）する
3. GTM変数画面のカスタムJavaScriptに記述する
4. カスタム変数としてGTMタグに設定する

実装方法

1. 取得したいパラメータ情報がHTMLソース内に記載されていることを確認する

Chrome利用想定ですが、ページにパラメータ情報が表示されている/表示されていないによって方法が異なります。

• 表示されている：表示されているパラメータを右クリック→「検証」
• 表示されていない：F12キー押下→「Elements」画面から探す

2. 1をXPathで表現（=記述）する

上記1のパラメータ情報の状態によって、以下2つのXPath記述方法があります。

1つ目は簡単だけど記述的に汚くなりがち、2つ目はきれい＆応用がきくけどやや難易度高めです。

1. Chromeディベロッパーツールから
   
   右クリック→「Copy」→「Copy XPath」
   
   ※かゆいとこに手が届かないのであまりおすすめしません
2. XPathのお作法を調べて記述する
   
   上述した「必要な道具たち」のチートシートをもとに、XPathを自作します。
   
   （拡張機能を使うと検証が捗ります。）

3. GTM変数画面のカスタムJavaScriptに記述する

GTMのカスタムJavaScript画面で、GAへ渡す変数を作成します。

自分はmozillaのリファレンスを参考にしました。

ページURLの整形.js

function(){ 
  // ドメイン名を取得 
  var getDomain = document.location.origin; 
  // XPathでHTML内からパラメータ情報を取得 
  var getXpath = document.evaluate([ここに上記2で調べたXPathを記述], document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null); 
  // URLにパラメータを付加 
  var concatURL = location.href.replace(getDomain + '/', ''); 
  var concatURL = concatURL + getXpath.singleNodeValue.nodeValue; 
 
  return concatURL; 
} 

注：GTMへ実装する前に、ChromeディベロッパーツールのConsole画面で、コードを実行&期待値が出力されることを検証してください

4. カスタム変数としてGTMタグに設定する

3の変数をGAへURLとして送信すべく、以下のようにGTMタグを設定します。

終わりに

GTMはいじり倒す領域もままあるためエンジニアリング的にも面白いですし、色々なデータが取得できるので分析観点からも有用と思います。

ただ、冒頭でも書いたように、ページを作るときに解析サイドの観点をもう少し反映してくれればこのようなちょっとムリ目なデータ取得はしなくてもよくなるわけで、前工程の現場の方々ともっとコミュニケーションが取れるようになれればいいなと願っています。