【SEOのGoogleアナリティクス(GA4)対応】シンプルなJavascript/HtmlのスクリプトでGoogleタグ(gtag.js)からイベントトラッキングを操作する


※ 当ページには【広告/PR】を含む場合があります。
2020/09/07
2023/02/13
【Angular】head要素内に配置したlink要素でCanonical Urlを書き換えるサービスクラスの実装方法
【Linuxコマンドでウェブサイト運営術】Alpine LinuxでGzip/Brotliを試す
蛸壺の技術ブログ|【Google Analytics(GA4)対応でSEO】シンプルなJavascript/Htmlのスクリプトでgtag.jsからイベントトラッキングを操作する

「gtag.js」を使うことで、Googleアナリティクスを使ったWebページで生じたからクリックイベントを監視・解析をJavascriptでカスタマイズすることが可能です。

現行のGoogleアナリティクス4(GA4)とgtag.jsを組み合わせて、より高度で柔軟なウェブサイトの測定を可能とする環境を構築する方法を解説します。


合同会社タコスキングダム|蛸壺の技術ブログJavascript(js)&Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍&教材の手引き

Googleタグ(gtag.js)の使い方の基本をおさらい

もともと「グローバルサイトタグ(gtag.js)」というウェブ指標の計測用としてGoogleから提供されていたツールユーティリティAPIでしたが、「Googleタグ」という名称に正式に変更になりました。

参考|Google タグについて

まずは新旧交えながらgtag.jsの基礎的な使い方などを簡単におさらいしていきましょう。

Googleアナリティクスへのgtag.jsの導入

主にindex.htmlにあたるHTMLのルートファイルへgtag.jsを導入する場合には以下のスニペットコードをhead要素に挿入するのは、公式のガイド通りです。

既に多くの人にとって馴染みが深かった旧GAこと、
ユニバーサルアナリティクス(UA)の場合には、

            
            <!-- Google Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxx-xx"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments)};
    gtag('js', new Date());
    gtag('config', 'UA-xxxxx-xx');
</script>
        
というようにルートのHTMLファイルのheadタグやbodyタグに、定型スニペットを挿入して利用していました。

これは、
Googleアナリティクス4(GA4)の場合にもほとんど変わりませんが、

            
            <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXXX');
</script>
        
というようになります。

これだけでGA4でも
gtag.jsを利用する準備が整いました。

あとはグローバル関数として
gtag関数を使用して、「トラッキングID」や「カスタムディメンション」等のページ内で起こったイベントの情報をGoogleアナリティクス側に自由に送信することが可能になります。

gtag.jsによるイベントトラッキングの基本(UA編)

まずは、旧GoogleアナリティクスのUAの書式でイベントトラッキングをどのように設定していたか、復習もかねて説明していきます。

GA4対応の書式は後述していますので、UAを使わない方はこの節の内容はスキップしても構いません

UAの場合、gtag関数では第一引数で関数のタイプ、第二引数でアクション名(イベント名)、第三引数でイベントの詳細な情報を指定して利用します。

カスタムイベントを送信するコードは
gtag('event', 'イベント名', {...})という形式の関数を利用します。

            
            gtag('event', 'アクション名', {
    'event_category': 'カテゴリ名',
    'event_label': 'ラベル名',
    'value': 'イベント値'
});
        
この場合、アクション名は任意であり縛りがないので、計測者の自由に定義しても良いものでした。

一方で、
GA4になるとアクション名の命名規則にはいくつかの縛りが設けられましたので、この点が新旧で大きく異なります。

UAのgtag関数の三つの引数のオブジェクト書式

UA時代の
gtag関数には主に3つの引数を設定して利用していました。

三つの引数ではそれぞれJSONオブジェクト内で以下の表に基づいてオブジェクトを構成します。

            
            event_category:
    イベントカテゴリ
event_label:
    イベントラベル
value:
    イベント値(オプション)
        
これらの情報は、Googleアナリティクスの管理ページ内にイベント送信後反映され、データとして整理・蓄積されるための構成です。

キー名は固定ですが、値は日本語でもOKですので、管理者の分かりやすい値に設定してくと良いでしょう。

UAでクリックイベント(onclick)でgtag関数を埋め込んで使ってみる例

上記の説明が全てですが、もっとも代表的な使い方の例として、HTML要素をクリックしたときにトリガーされるイベントを監視するために
onclickのハンドラーで仕込むことが多いでしょう。

例えばページ内のAmazonアソシエイトのリンクをクリックしたときのイベントの送信をしたい、というシチュエーションで考えてみましょう。

HTMLスニペットをどこかのscriptタグにスクリプトコードとして以下のようなgtag関数を仕込ませておきます。

            
            <!-- 引数label ... 何か商品を識別できる情報 -->
<script>
    function gtagClick(label) {
        gtag('event', 'アフィリエイトクリック', {
            event_category: 'Amazonアソシエイト',
            event_label: label
        });
    }
</script>
        
この関数により、クリックできる要素と紐付けする利用することで利用できるようになります。

最も単純なクリック測定のイベントの発生のやり方は、ターゲットとなる要素の
onclick属性にgtag関数をセットしてしまうことです。

            
            <input type="button" value="クリック" onclick="gtagClick('リンク1の商品の情報')">
<!-- もしくは -->
<input type="button" value="クリック" id="リンク1の商品の情報" onclick="gtagClick(this.id)">
        
先程定義していたgtagClick関数に引数を直接渡すか、thisから要素を取得して、設定してたidなどの属性値を読み取るなどの方法が考えられます。

ただこの場合、idやvalueなどのような重要度の高い属性にリンクのラベル情報を入れて利用するのは好ましくないので、
data-*属性を利用したほうがベターです。

その場合には、

            
            <input type="button" value="クリック" data-value="リンク1の商品の情報" onclick="gtagClick(this.dataset.value)">
        
といったように柔軟性のある値が要素に仕込めます。

data-valueの値を参照したい場合には、this.dataset.valueというように、要素のもつdatasetオブジェクト以下にセットされている値を引き出すことが可能です。

データ属性の詳細は
こちらのリファレンスを参考にしてみてください。

addEventListenerでgtag関数を追加する方法

HTML内のscriptタグが動的に書き換え可能にしたい場合、
addEventListenerでクリックイベントを追加するほうがコーディングとして楽な場合もあります。

例えばページ内のクリックできる要素にidを設定して、スクリプト内で
getElementByIdから取得してからクリックイベントを追加します。

            
            <input type="button" id="link1" value="クリック">
<script>
    const link1 = document.getElementById("link1");
    link1.addEventListener("click", gtagClick('リンク1の商品の情報'));
</script>
        
先程のonclick属性ので関数指定では、要素内にonclick="hoge()"のようなコード直書きすることを避けられるメリットがあります。


合同会社タコスキングダム|蛸壺の技術ブログJavascript(js)&Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍&教材の手引き

Googleアナリティクスのコンバージョンを設定する〜【旧GA編】

※この節の内容は2020/11/21更新しました。

現在はGA4の利用が推奨されていますので、
GA4でのgtag.jsの設定方法に関してだけ知りたい場合はこの節をスキップして次の節をご覧ください

ちなみに旧GAに慣れ親しんだ方からすると、普段使い慣れたユニバーサルアナリティクス(UA)から離れたくないという方もいまだ多くいらっしゃるでしょう。

現状ではサポートは継続されるものの、既にGA4の利用が推奨されています。

旧GAはトラッキングIDが
UA-から始まるものが、ユニバーサルアナリティクスで生成されたプロパティです。

では上記で折角jsスクリプトでクリックイベントを仕込んだので、Googleアナリティクスでサイトのクリックイベントを計測できるように設定してみましょう。

UAのダッシュボード画面から、左下の歯車のアイコンで
管理のタブを開き、右側の目標の項目を選びます。

合同会社タコスキングダム|蛸壺の技術ブログ

新しい目標の項目をクリックして、前節で設定したようなページ内のAmazonアソシエイトのリンクをクリックしたときのイベントを計測させるようにしてみます。

合同会社タコスキングダム|蛸壺の技術ブログ

クリックすると新しい目標の設定項目が以下のように大きく3つ設定する必要があります。

            
            ①目標設定
②目標の説明
③目標の詳細
        
今回の下の図は設定の手順の一例を表したものです。

合同会社タコスキングダム|蛸壺の技術ブログ

まず、①目標設定では既に用意されたいくつかのテンプレートも利用できるのですが、今回は
カスタムを選択して続行ボタンを押し次に進みます。

②目標の説明では、まず今回の目標に名前を付けます。

ここはご自身で後々管理のしやすいような名前を設定すると良いと思います。

タイプの項目に
イベントを選択します。

これは今回の計測をクリックイベントと連動させるためです。これを設定したら
続行を押してさらに次へ進みます。

③目標の詳細は今回の設定の中では最も重要です。

この設定を有効した直後から計測が開始されます。

もし計測を開始しても働かないようなら誤字脱字がないか確認します。

今回でいうと、上記で説明しました
gtag関数の引数に設定していた文字列を使用します。

再度html内のスクリプト部分を確認しますと、以下のように設定していました。

            
            <script>
    function gtagClick(label) {
        gtag('event', 'アフィリエイトクリック', {
            event_category: 'Amazonアソシエイト',
            event_label: label
        });
    }
</script>
        
ここでいうカテゴリはgtag関数の第三引数のevent_categoryのフィールド値、イベントはgtag関数の第2引数の文字列なので、今回の目標の詳細に設定すべきなのは、

            
            カテゴリ [等しい]:
    Amazonアソシエイト
イベント [等しい]:
    アフィリエイトクリック
        
と設定するのが正しいことになります。

なお、文字列の検索方法は
等しい以外に先頭が一致/正規表現なども選べます。

しばしばカテゴリとイベントを逆に設定しているのに気づかずに、いつまで経っても計測が始まらないというミスも起こります。

メトリクスエラーが起こってしまう場合には、その際には設定したフィールドを良く確認しましょう。

最後に
コンバージョンの目標値としてイベント値を使用で、いいえに設定し、大体のクリック単価を設定しておきます。

コンバージョン単価を設定するときに、デフォルトの米ドル設定から日本円に単位を切り替える場合には、同じく
[管理]タブ > [ビューの設定] > [通貨]から日本円を選びます。

合同会社タコスキングダム|蛸壺の技術ブログ

通貨を選んだら、変更を反映するために、下部の
保存ボタンを押したら完了です。


合同会社タコスキングダム|蛸壺の技術ブログJavascript(js)&Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍&教材の手引き

Googleアナリティクスのeコマース測定を設定する〜【GA4編】

※2021/07/07更新

新GAこと
「GA4」は去年2020年10月からベータリリースされて、そのときは既存のユニバーサルアナリティクスモードとどちらのプロパティで生成するか選択できましたが、正式リリースとなった現在ではGA4を利用することが推奨されています。

大幅に設定手順(参照: GA4|analytics.js 実装のアップグレード)が変わりました。

とはいえ、GA4でもgtag.jsによるイベントの監視も引き続き対応していて、同じような感覚で利用することができます。

利用上の違いとして、前節のユニバーサルアナリティクス(UA)でもgtag.jsの利用の手順をおさらいしましたが、
UA-...から始まるトラッキングIDとは別に、GA4プロパティのウェブデータ・ストリームでは、G-...という形式の測定IDという名称に変わっています。

UAからGA4へ移行した際に、ツール利用者にとって大きなメリットと言えるのが、
UA時代で煩わしい作業だった手動による”目標”設定の作業を簡略化できるということです。

なお、先程のパートでも説明したように、UAではイベントごとの「目標設定」をユーザーが正しく明記する必要がありました。

GA4ではあらかじめ用意されたイベントを利用することで、この
「目標設定」をユーザー側が決めなくてもある程度自動で計測・集計を行ってくれるようになります。

GA4になってからのイベントの取扱規則が大幅に変更になったので、概要から整理しておきましょう。

GA4からイベントを利用する

前節でも述べたように、ユニバーサルアナリティクス(UA)のプロパティをクリックイベントを介して情報を取得する手段として、gtag.jsを以下のように使う必要がありました。

            
            gtag('event', 'イベント名', {
    'event_category': 'カテゴリ名',
    'event_label': 'ラベル名',
    'value': 'イベント値'
});
        
UAを使い慣れていた方には馴染みの深い、イベントアクション(イベント)イベントカテゴリラベルという4値を使って、一つのイベントを個別に「イベントのヒットタイプ」を定義して利用するスタイルでもあります。

これがGA4の仕様では全面的に見直され、すべてのヒットタイプ(イベント)が
“ユーザー定義の野良イベント(=カスタムイベント)”の扱いになりました。

クリックやページ閲覧などかつては様々なヒットタイプが有りましたが、そのヒットタイプという概念がなくなり全てイベントとして取り扱われます。

何も知らずにUAからGA4に移行してしまうと、gtag.jsの実装の仕様と大きく変わっているので多くの人が面食らってしまうのはこのためです。

つまり、UAでは利用者が何もしなければ一切ウェブサイト内で起こる様々な
「イベントの情報を勝手に記録はしない」ような消極的な仕様だったのが、GA4になってからはウェブサイトのすべてのイベントが「必要最小限で勝手に自動的に収集される」という仕様になったわけです。

GA4の場合、左側のペインで
[レポート] > [エンゲージメント] > [イベント]をクリックすると、ストリームにデフォルトで設定されているfirst_visit/page_view/scroll/sesstion_startなどのデフォルトのイベントが確認出来ます。

合同会社タコスキングダム|蛸壺の技術ブログ

GA4が用意しているデフォルトイベントに関しては
こちらのページが参考になります。

GA4のカスタムイベントはどうしようも無いときだけ(オススメしない)

ではGA4でgtag.jsからイベントを測定するにはどうすれば良いのでしょうか?

GA4のリファレンスなどを見ていると、GA4のイベントは以下の4つで構成されているようです。

            
            1. 自動的に収集されるイベント(デフォルトイベント):
    ユーザーが何もしなくてもアナリティクスに常時自動で収集されているイベント。
    例)session_startなど

2. 測定機能の強化(※1):
    デフォルトイベントの内、GA4プロパティの管理画面からオンオフする測定用に特化したイベント。
    例)page_viewなど

3. 推奨イベント(※2):
    ユーザーが手動で実装できるイベント。
    ただし、使用には事前に定義されたイベント名とパラメータ名の規約に従う必要がある。
    例)purchaseなど

4. カスタムイベント:
    デフォルトイベントや推奨イベントで対応できない場合に利用するユーザーが独自設計するイベント。
    柔軟かつ高度な測定が可能となる。
        
※1) 測定機能の強化(Enhanced Measurement)はウェブデータストリームのプロパティのみが対象となるイベントです。

強化測定機能を設定するためには、
[管理] > [プロパティ] > [データ ストリーム] > [ウェブ] > [拡張計測機能]の順で進むと、編集画面が表示されます。

合同会社タコスキングダム|蛸壺の技術ブログ

※2) 推奨イベント使用の際の実装に関しては
こちらのリファレンスに従う必要があります。

例えば自前のウェブサイトの顧客専用ページにカスタマーがサインアップする時に、サインアップボタンなどのhtml要素のクリックイベントを実装したい場合には、推奨イベントから
sign_upを選択して、必要な必須フィールド等を確認してから、gtag関数で以下のようにすることができるでしょう。

            
            gtag('event', 'sign_up', {
    method: 'カスタマー専用ページ サインイン'
});
        
一方で、デフォルトイベントや推奨イベントで対応できない特殊なケースが存在する場合に、「カスタムイベント」で対応することになります。

カスタムイベントとは、自分でイベント名を指定して実装するイベントです。

ただしGA4においてカスタムイベントを利用するのはかなり特殊な測定ケースを除き、推奨されていません。

カスタムイベントの導入ガイドにも、

            
            (1) イベントを自分で実装するのではなく、可能な限り
    自動的に収集されるイベント(デフォルトイベント)と測定機能の強化イベントを使用する

(2) 必要なイベントが自動的に収集されていない、
    もしくは測定機能の強化の一部として提供されていない場合は推奨イベントを利用する

(1)と(2)で実装が困難な場合にのみ、カスタムイベントを実装する
        
と指針が明記されてあります。

GA4でgtag.jsでイベントを自作して使いたい場合には、
「推奨イベント」「カスタムイベント」の二択になります。

GA4で特殊なイベントとしての位置付けの
「カスタムイベント」は高度な測定を設計用に提供されているものであり、通常は推奨イベントで十分対応できると思います。

ということでGA4でgtag.jsを使うときの基本方針は、推奨イベントを積極的に活用していくことにあります。

ウェブページから商品が購入されたときのpurchaseイベント

ではここからは実際のgtag関数の実装イメージだけ簡略的に説明していきましょう。

例えば、アソシエイトAのリンクをクリックされるイベントを計測したい場合、1クリック単価10円だと仮定すると、ユーザーからの購入されたイベントとみなして
purchaseイベントを実装します。

            
            gtag('event', 'purchase', {
    transaction_id: '[取引を一意に決めたID値]',
    currency: 'JPY',
    items: [
        {
            item_name: '激安うまか棒一本',
            promotion_name: '訳あり品セール',
            item_category: 'アソシA'
            price: 10,
            currency: 'JPY',
            quantity: 1
        }
    ]
});
        
推奨イベントのpurchaseをgtag.jsで設計するには、gtag関数の第三引数のpurchaseオブジェクトの中身が重要です。

このオブジェクトの第一レベルのプロパティで必須指定なのは
transaction_idcurrencyです。

transaction_idは空にはできないのですが、会社で取引コード名を決める厳密なルール等がない場合に適当に取引時間などを入れておく程度でも良いと思います。

currencyは'JPY'としておくと、日本円での通貨換算とみなして貰えます。

purchaseイベントの実装で大事なのが
itemsプロパティです。

このitemsの内容がアナリティクスの
収益化の内容に反映されます。

合同会社タコスキングダム|蛸壺の技術ブログ

itemsは配列型なので、複数の商品オブジェクトを定義できますが、基本的に1クリック1商品で使うことが多いでしょう。

この商品オブジェクトの必須プロパティとしては、商品名にあたる
item_nameかitem_idと販売タイトルにあたるpromotion_nameかpromotion_idを仕込む必要があります。

必須項目ではないですが、UAの旧イベントカテゴリーにあたるものを
item_categoryに割り当てると以前のgtag.jsと同じように利用することができるように思います。

これでクリックされるhtml要素にこのスクリプトを仕込んで、クリックされた際にアナリティクス側へeコマースの情報としてデータが送信されるようになりました。

なお、
purchaseがクリックされたページを確認したい場合には、以前のUAの場合、gtag.jsにクリックページの情報も仕込む必要がありましたが、GA4になってからは自動でクリック発生ページを[レポート] > [エンゲージメント] > [ページとスクリーン]の中と、[レポート] > [収益化] > [eコマース購入数]に表示してくれるようになります。

合同会社タコスキングダム|蛸壺の技術ブログ

ウェブページの商品アイテムが閲覧されたときのview_itemイベント

やはりeコマースの集客解析でぜひとも知っておきたい指標の一つに、サイト上に設置した
「商品」が何回表示されているのかを示す「表示回数」があります。

このような計測の目標を集計したい場合、以下のGoogleタグのディベロッパーガイトにもある通り、
view_itemイベントを選択することになります。

参考|商品 / アイテムの詳細表示回数とインプレッションを測定する

例えば、ウェブページに設置した1,000円の商品Aのアイテムカードを顧客が閲覧しているイベントを計測したい場合、
view_itemイベントの必須フィールドを考慮しながら実装します。

必要最低限のフィールドで
view_itemイベントを作るとなると以下のような感じです。

            
            gtag('event', 'view_item', {
    currency: 'JPY',
    value: 1000,
    items: [{
        item_name: '商品A',
        item_id: '[商品のID値]'
    }]
});
        
gtag関数はこれで良いのですが、あとはHTML上でユーザーが閲覧しているときにイベントを発生させるのをどのように設定するか、は開発者によって異なります。

もっともシンプルで昔から目にするテクニックでいうと、
img要素onloadイベントでも良いでしょう。

            
            <a href="[商品購入先へのリンク]">
    <img src="dummy.png" border="0" width="1" height="1" onload="gtag('event','view_item',{...});">
    商品A
</a>
        
これで閲覧者がウェブページ内に設置した商品カードやHTML要素を表示させたときに、ここではダミーとして仕込んだdummy.pngの画像が読み込まれたときに発生するonloadイベントからview_itemが呼び出されます。

ダミーの画像には、1px✕1pxの1ドット画像が使われるのを見かけますが、なんだか実装に気持ち悪さも感じます。

もっと気の利いた実装を目指すなら少し上級者向けですが、最近のブラウザでもほとんど対応して使えるようになった
IntersectionObserverを使うことも出来ます。

            
            <script>
    //...
    document.addEventListener("DOMContentLoaded", () => {
        let lazyMeasurement = [...document.querySelectorAll("計測したい商品のHTML要素")];
        if ("IntersectionObserver" in window) {
            let obs = new IntersectionObserver((entries, observer) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        gtag('event','view_item',{...})
                        obs.unobserve(entry.target);
                    }
                });
            });
            lazyMeasurement.forEach((_lazy) => { obs.observe(_lazy); });
        }
    });
</script>
...
        
いずれの方法にせよ、発生したイベントを取りこぼさずに計測を確実に行わせることが重要です。

view_itemイベントが正しく設定されると、
[レポート] > [収益化] > [eコマース購入数]で自動での計測が開始されていることが確認できます。

合同会社タコスキングダム|蛸壺の技術ブログ


合同会社タコスキングダム|蛸壺の技術ブログJavascript(js)&Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍&教材の手引き

まとめ

以上、html内のscriptタグに仕込んで利用するだけでgtag.jsをUAとGA4の場合に分けてGoogleアナリティクスに送信するためのシンプルな実装方法を解説しました。

Webページをhtmlからカスタマイズできる方は、Googleタグマネージャーでイベントを設定・管理するより断然早いしシンプルですので、今回の生産性の高いSEOテクを身につけておくのも一考に値するものと思います。

参考サイト

gtag.js を使用して analytics.js からユニバーサル アナリティクス イベントを実装する

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。

合同会社タコスキングダム|蛸壺の技術ブログJavascript(js)&Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍&教材の手引き