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

            <!-- 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>

        

            <!-- 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('event', 'アクション名', {
    'event_category': 'カテゴリ名',
    'event_label': 'ラベル名',
    'value': 'イベント値'
});

        

            event_category:
    イベントカテゴリ
event_label:
    イベントラベル
value:
    イベント値(オプション)

        

            <!-- 引数label ... 何か商品を識別できる情報 -->
<script>
    function gtagClick(label) {
        gtag('event', 'アフィリエイトクリック', {
            event_category: 'Amazonアソシエイト',
            event_label: label
        });
    }
</script>

        

            <input type="button" value="クリック" onclick="gtagClick('リンク１の商品の情報')">
<!-- もしくは -->
<input type="button" value="クリック" id="リンク１の商品の情報" onclick="gtagClick(this.id)">

        

            <input type="button" value="クリック" data-value="リンク１の商品の情報" onclick="gtagClick(this.dataset.value)">

        

            <input type="button" id="link1" value="クリック">
<script>
    const link1 = document.getElementById("link1");
    link1.addEventListener("click", gtagClick('リンク１の商品の情報'));
</script>

        

            ①目標設定
②目標の説明
③目標の詳細

        

            <script>
    function gtagClick(label) {
        gtag('event', 'アフィリエイトクリック', {
            event_category: 'Amazonアソシエイト',
            event_label: label
        });
    }
</script>

        

            カテゴリ [等しい]:
    Amazonアソシエイト
イベント [等しい]:
    アフィリエイトクリック

        

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

        

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

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

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

4. カスタムイベント:
    デフォルトイベントや推奨イベントで対応できない場合に利用するユーザーが独自設計するイベント。
    柔軟かつ高度な測定が可能となる。

        

            gtag('event', 'sign_up', {
    method: 'カスタマー専用ページ サインイン'
});

        

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

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

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

        

            gtag('event', 'purchase', {
    transaction_id: '[取引を一意に決めたID値]',
    currency: 'JPY',
    items: [
        {
            item_name: '激安うまか棒一本',
            promotion_name: '訳あり品セール',
            item_category: 'アソシA'
            price: 10,
            currency: 'JPY',
            quantity: 1
        }
    ]
});

        

            gtag('event', 'view_item', {
    currency: 'JPY',
    value: 1000,
    items: [{
        item_name: '商品A',
        item_id: '[商品のID値]'
    }]
});

        

            <a href="[商品購入先へのリンク]">
    <img src="dummy.png" border="0" width="1" height="1" onload="gtag('event','view_item',{...});">
    商品A
</a>

        

            <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>
...