JavaScriptでカスタムGoogle Analyticsイベント.

導入
この記事では、JavaScript APIのビルドを使用してGoogle Analyticsのプロパティにカスタムイベントを送信する方法をお見せしたいと思います.

しかし、それは何です、そして、なぜ、私は気にかけますか?
Google Analyticsはページビューのようなものを追跡するのに最適です、しかし、それを越えて、それはJavaScript駆動されたフォーム提出物のようなものを意識していません、1ページのアプリケーション、電子メールと電話リンククリックでのPageViewと他の転換/行動はそれ以降のページ見解を持っていないあなたのサイトでとられます.
カスタムイベントでは、GoogleのAnalyticsを我々のSELFSについて、あなたのウェブサイトに追加できるか、または既に追加されたトラッキングスニペットによって提供されるJavaScript APIの単純なビルドを使用することによって伝えることができます.

Google Analyticsにカスタムイベントを送る方法
私たちがカスタムイベントを送る前に、我々は我々がGA追跡断片を我々のウェブサイトの先頭に含めたことを確認しなければなりません.このトラッキングコードは、Ga Dashboardにログインしてadmin(左の小さな歯車)をクリックしてTrackingInfo＞TrackingCodeをクリックし、以下に示すようなコードスニペットを見つけることができます.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XX-YOURID-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'XX-YOURID-X');
</script>

あなたはこのスニペットをコピーして、あなたのウェブサイトの終了頭タグの前にそれをペーストします.
いくつかのWordPress SEOプラグインでは、いくつかの種類の便利な設定を介してこのスニペットを追加することができますが、これらのプラグインの一部がカスタムイベントを送信できないことに気付きました.それで、あなたが非常に理由がない限り、私は、あなたが手でこの断片を加えることを非常に推薦します.ちょうど道をいくつかの頭痛を防ぐために.

GA対GTAG追跡符号
トラッキングコードスニペットのいくつかの異なるバージョンが浮かんでいます.一つには古いバージョンがあり、代わりにgtags ()関数以外のga ()関数を使用しません.技術的にga ()のバージョンを使用することができますが、同じページにあるように、gtag ()関数を使用した最新バージョンにスニペットを追跡することを推奨します.もちろんこれは古いga ()関数に依存するカスタムコードが既にない限りです.

ページビューのコード例
JavaScriptがブラウザの代わりにコンテンツの変更を手渡しているので、1ページのアプリケーションを構築しているときに、以降のページビューは解析と登録されません.
これを修正するには、ページビューの送信を自分で処理することができます.しかし、我々がすることができる前に、我々は我々がインストールした追跡断片が何も送らないことを確認しなければなりません.これを防ぐために、以下のようにトラッキングスニペットの「config」呼び出しを変更することができます.

/* Replace this config call */
gtag('config', 'XX-YOURID-X');

/* With this call */
gtag('config', 'XX-YOURID-X', {
  send_page_view: false
});

ここでは、ルータの変更イベントハンドラーの内部にあるコードスニペットを使用するか、アプリケーションに対して意味のある場所からUSSINGを呼び出すことで、カスタムページビューを送信できます.

gtag('event', 'page_view', {
  page_title: 'Page title',
  page_location: location.href,
  page_path: location.pathname
})

あなたのページのビューをGoogle AnalyticsがあなたのGAダッシュボードにログインしてリアルタイムでの場所をクリックして登録されているかどうかを確認できます.

フォーム送信コード例
今では、いくつかの種類のAjax呼び出しでフォームの送信を処理するのは、より一般的です.しかし、我々は目標として設定することができます今“ありがとうございますページ”があるので、変換はデフォルトでAnalyticsで追跡することはできません.
これらのケースでは、カスタムformRank Submitイベントを送信できます.

const form = document.getElementById('my_form');

form.addEventListener('submit', function(event){

  gtag('event', 'form_submit', {
    event_category: 'Forms',
    event_action: 'Submit',
    event_label: 'Test form' // Name of your form.
  });

  return true;

});

このスニペットでは、フォームへの参照を行い、イベントリスナーをアタッチします.フォームを送信すると、カスタムイベントを送信します.
あなたのフォームの投稿があなたのGAダッシュボードにログインし、リアルタイムのイベントをクリックしてGoogle Analyticsに登録されているかどうかを確認できます.

接触リンククリックコード例
電子メール(mailto:)と電話(tel:)リンクも分析によって追跡することはできませんので.これらのダッシュボードには、カスタムLinkCountクリックイベントを送信することができます.

const phoneLinks = document.querySelectorAll('a[href^="tel:"]');

phoneLinks.forEach(function(phoneLink){

    phoneLink.addEventListener('click', () => {

        gtag('event', 'link_click', {
            event_category: 'Links',
            event_action: 'Click',
            event_label: 'Phone link'
        });

    }, { once: true });

});

ここでは、すべての電話/テルリンクを見つけるためにQuerysElectrallを使用します.その後、これらをループし、各リンクにイベントリスナーを接続します.リンクのいずれかをクリックすると、我々のGAダッシュボードにカスタムLinkCountクリックイベントを送信します.
以下のようなメール/mailtoリンクを扱うために、このコードスニペットを変更することができます.

const emailLinks = document.querySelectorAll('a[href^="mailto:"]');

emailLinks.forEach(function(emailLink){

    emailLink.addEventListener('click', () => {

        gtag('event', 'link_click', {
            event_category: 'Links',
            event_action: 'Click',
            event_label: 'Email link'
        });

    }, { once: true });

});

再度、あなたのフォームの投稿をGoogle AnalyticsがあなたのGAダッシュボードにログインし、リアルタイムのイベントをクリックして登録されているかどうかを確認することができます.

お問い合わせフォーム
私は個人的なフォームを作成する連絡先フォーム7 WordPressプラグインの大ファンです.これらのフォームはAjax呼び出しを行うことで送信します.あなたが望むならば、あなたは以下のスニペットをこれらの転換を追跡するために使うことができます.

document.addEventListener( 'wpcf7mailsent', function( event ) {

    var form = event.target.querySelector( 'input[name="_wpcf7"]' ).getAttribute("value");

    if( parseInt( form ) == 4839 ) {

        gtag('event', 'form_submit', {
            event_category: 'Forms',
            event_action: 'Submit',
            event_label: 'Test form'
        });

    }

}, false );

上のスニペットでは、イベントリスナーを「WPCF 7 MailSend」イベントに加え、CF 7フォームの送信を聞きます.このとき、イベントからフォームIDを取得します.次に、このIDを使用して、どのフォームを処理しているかを確認し、適切なAnalyticsイベントを送信できます.

イベントをゴールに変える方法
あなたの分析のダッシュボード内では、目標や変換にカスタムイベントを有効にすることができます.このプロセスは、両方のバージョンの解析で異なります.閉じるこの動画はお気に入りから削除されています.あなたがチェックアウトすることができます最新のGA 4でこれを行う方法を見つけるために.分析の古いバージョンの場合は、チェックアウトすることができます.

結論
あなたが見ることができるように、それは比較的簡単にこれらのカスタムイベントを実装することです、しかし、彼らはあなたが本当にあなたのユーザーふるまいへのより多くの洞察を得るのを援助することができます.

感謝
読書と滞在安全のための