GTMで特定のリストを「カンマ区切り文字列」で取得したいときの、カスタムJavaScript変数設定

これたまにあるんですよね。

先日、知り合いにこれを相談されたんですが、せっかくなので記事にして残しておきます。

どういうケースか

たとえば、購入する商品に複数のキャンペーンが紐づくことがあって、注文フォームに下記のようなHTMLで表示され、それぞれキャンペーンの適用回数を測りたいものとします。

HTML

<div class="applied_campaigns">
    <h3>適用済みキャンペーン</h3>
    <ul>
        <li>キャンペーンA</li>
        <li>キャンペーンB</li>
        <li>キャンペーンC</li>
    </ul>
</div>

計測はGA4イベントで行い、イベントタグを下記のように設定して、赤枠のところに適用されたキャンペーンの内容を入れたい。

ところが、キャンペーンは上記のように同時に複数適用されることもあるので、その場合「DOM要素変数」ではうまく取得することができません。複数適用されている場合は、イケてないけどまあ仕方がないので下記のように、同じ箇所にカンマ区切りで出力されるようにしたい。

GTM

キャンペーンA,キャンペーンB,キャンペーンC

この場合の正攻法は「上記の値をエンジニアに dataLayer で出力してもらい、それをデータレイヤー変数で読み取る」だと思いますが、それが難しい場合や、急いでいる、自分でやっちゃいたいという場合は、カスタムJavaScript変数で対応することになります。

カスタムJavaScriptの記述内容

下記のようになります。

JavaScript

function() {
  var target = '.applied_campaigns > ul > li';
  var nodes = document.querySelectorAll(target);
  var arr = [];
  for (var i=0; i<nodes.length; i++) {
    arr.push(nodes[i].textContent.trim());
  }
  var val = arr.join();
  return val;
}