【GA4対応|Javascript x SEO対策】シンプルなHtmlのスクリプトでgtag.jsからイベントトラッキングを操作する


2020/09/07
2021/07/07
蛸壺の技術ブログ|シンプルなHtmlのスクリプトでgtag.jsからイベントトラッキングを操作する

GoogleアナリティクスでWebページで生じたからクリックイベントを監視・解析するのに便利なgtag.jsをHTMLのみを使って構築する方法を解説します。


gtag.jsの使い方の基本

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

gtag.jsの導入

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

ユニバーサルアナリティクス(UA)の場合には、

            
            <!-- Global Site 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>
        
というスニペットをheadタグに挿入して利用します。

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>
        
というようになります。これでgtag.jsを利用する準備が整いました。

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

イベントトラッキングの基本

※こちらはUAの書式の内容で説明しています。GA4対応の書式は後述します。

gtag関数では第一引数で関数のタイプ、第二引数でアクション名(イベント名)、第三引数でイベントの詳細な情報を指定して利用します。カスタムイベントを送信するコードは
gtag('event', 'イベント名', {...})という形式の関数を利用します。

            
            gtag('event', 'アクション名', {
    'event_category': 'カテゴリ名',
    'event_label': 'ラベル名',
    'value': 'イベント値'
});
        

第三引数のオブジェクトの書式

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

            
            event_category:
    イベントカテゴリ
event_label:
    イベントラベル
value:
    イベント値(オプション)
        
これらの情報は、Googleアナリティクスの管理ページ内にイベント送信後反映され、データとして整理・蓄積されるための構成です。キー値は固定ですが、値は日本語でもOKですので管理者の分かりやすい値に設定してくと良いでしょう。

クリック型のイベントでスクリプト埋め込み

上記の説明が全てですが、例えばページ内のAmazonアソシエイトのリンクをクリックしたときのイベントの送信をしたい場合を考えてみましょう。

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

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

onclickによる関数指定

最も単純なクリック測定のイベントの発生のやり方は、ターゲットとなる要素の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で追加

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()"のようなコード直書きすることを避けられるメリットがあります。


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

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

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

ちなみにGAに慣れ親しんだ方からすると、ユニバーサルアナリティクスが普段使い慣れたダッシュボードだと思いますが、現状ではサポートはされるものの既にGA4の利用が推奨されています。

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

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

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

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

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

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

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

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

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

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

②目標の説明では、まず今回の目標に名前を付けます。ここはご自身で後々管理のしやすいような名前を設定すると良いと思います。

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

③目標の詳細は今回の設定の中では最も重要です。この設定から計測されますので、もし計測が働かないようなら誤字脱字がないか確認します。今回でいうと、上記で説明しました
gtag関数の引数に設定していた文字列を使用します。再度html内のスクリプト部分を確認しますと、以下のようになっておりました。

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

            
            カテゴリ [等しい]:
    Amazonアソシエイト
イベント [等しい]:
    アフィリエイトクリック
        
となります。

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

しばしばカテゴリとイベントを逆に設定しているのに気づかずに、いつまで経っても計測が始まらないというミスも起こりますので、その際には設定したフィールドを良く確認しましょう。

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

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

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

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


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

※2021/07/07更新

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

大幅に設定手順(参照: GA4|analytics.js 実装のアップグレード)が変わりましたが、GA4にもgtag.jsによるイベントの監視も引き続き対応しています。

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

まずGA4になってからのイベントの取扱が変更になったので少し概要を整理しておきましょう。

GA4でのイベント

前節でも述べたように、ユニバーサルアナリティクスのプロパティをクリックイベントを介して情報を取得する手段として、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でgtag.jsからイベントを測定するにはどうすれば良いのでしょうか?

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

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

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

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

4. カスタムイベント:
    ユーザーが独自設計するイベント。
    柔軟かつ高度な測定が可能となる。
        
※1) 測定機能の強化(Enhanced Measurement)はウェブデータストリームのプロパティのみが対象となるイベントです。強化測定機能を設定するためには、[管理] > [プロパティ] > [データ ストリーム] > [ウェブ] > [拡張計測機能]の順で進むと、編集画面が表示されます。

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

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

例えば自前のウェブサイトの顧客専用ページにカスタマーがサインアップする時に、サインアップボタンなどのhtml要素のクリックイベントを実装したい場合には、gtag.jsで以下のようにすることができるでしょう。

            
            gtag('event', 'sign_up', {
    method: 'カスタマー専用ページ サインイン'
});
        
カスタムイベントとは、自分でイベント名を指定して実装するイベントです。ただしGA4においてカスタムイベントを利用するのはかなり特殊な測定ケースを除き、あまり推奨されないようです。

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

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

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

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

GA4でgtag.jsでイベントを自作して使いたい場合には、
推奨イベントカスタムイベントの二択になりますが、GA4のカスタムイベントは高度な測定を設計用に提供されているものであり、通常は推奨イベントで十分対応できるはずです。

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

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

            
            gtag('event', 'purchase', {
    transaction_id: '[取引を一意に決めたID値]',
    currency: 'JPY',
    items: [
        {
            item_name: 'ホゲホゲの素麺詰め合わせセット',
            promotion_name: 'Kindle本セール',
            item_category: 'Amazonアソシ'
            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になってからは自動でクリック発生ページを
[エンゲージメント] > [ページとスクリーン]の中に表示してくれるようになりこちらが便利に感じます。

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


まとめ

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

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

参考サイト

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

Google アナリティクス 4 プロパティ(GA4)にカスタムディメンション / カスタム指標が登場!