名前が、開かなくても分かる形になっていた

広告リンクのクリックを数えるために、タグマネージャーに5つのものを足しました。変数が3つ、トリガーが1つ、タグが1つです。

作っている途中で、足そうとしていた変数の1つが、すでにあることに気づきました。一覧を眺めただけで分かりました。

3種類のものが、別々の一覧に並んでいる#

タグマネージャーには、役割の違うものが3種類あります。

画面上は別々の一覧になっていますが、お互いを名前で参照し合っています。タグの設定を開くと、こう書かれています。

article_slug    {{DLV - article_slug}}

左が送るときの名前、右が値の取り出し元です。右側は変数の名前をそのまま書いた形で、ここに出てくるのは名前だけです。中身は書かれていません。

前置きが、2つのことを伝えている#

このサイトでは、3つの前置きを使っています。

どれも、設定画面に出てくる言葉をそのまま縮めたものです。変数を作るときに選ぶ種類が「データレイヤーの変数」、トリガーを作るときに選ぶ種類が「カスタム イベント」。画面の言葉と一致しているので、覚え直す必要がありません。

実際の名前は、前置きと元の名前をハイフンでつないだ形になります。

DLV - article_slug
CE - affiliate_click
GA4 - affiliate_click

伝えているのは2つです。何の種類かと、値がどこから来るか。

変数には他にも作り方があります。URLから取る、ページの要素から取る、JavaScriptを書いて計算する。DLV - と書いてあれば、サイト側が明示的に渡した値だと分かります。開いて確かめる必要がありません。

気づけたのは、一覧が読めたから#

今回、変数を4つ作るつもりでいました。実際に作ったのは3つです。

一覧に DLV - article_slug が並んでいました。前置きで種類が分かり、後半でデータレイヤーのどのキーを読むかが分かるので、中身を見るまでもなく同じものだと判断できました。

これが 記事のスラッグ や slug変数 のような名前だったら、開いて確かめるか、面倒で作り直していたと思います。

名前は、設定の一部になっている#

ここが普通の「分かりやすい名前を付けよう」と違うところでした。

タグマネージャーでは、タグが変数を名前で参照します。{{DLV - article_slug}} という文字列が、そのまま結びつきです。

実際には画面側が参照を追いかけてくれるので、名前を変えても壊れません。ただ、後から読む人にとっては名前がすべてです。設定の一覧に並ぶのも、タグの中に出てくるのも、名前だけだからです。

コードならコメントを書けますが、ここには書けません。名前が説明を兼ねています。

送る側の名前と、分ける#

もうひとつ気をつけたのが、GA4へ送るときの名前には前置きを付けないことです。

affiliate_network    {{DLV - affiliate_network}}

左は送信先であるGA4で見える名前なので、DLV - のような手元の都合を混ぜません。右は手元の名前です。

同じ文字が2回出てきて冗長に見えますが、役割が違う2つがたまたま同じ名前なだけです。GA4側だけ名前を変えたくなる日が来るので、最初から別物として扱っておきます。

今回の学び#

まず、一覧に並ぶものは、一覧で判断できる名前にするということ。開いて確かめないと分からない名前だと、確かめるのが面倒で作り直してしまいます。重複は、名前が読めないところから生まれていました。

次に、前置きは、種類と出どころを兼ねられること。3文字で「変数である」と「データレイヤーから来る」の2つを伝えています。どちらも、後ろの名前だけでは分かりません。

そして、コメントが書けない場所では、名前が説明になること。設定画面にはコメント欄がありません。半年後の自分が読むのは名前だけなので、そこに意味を載せておく必要がありました。