【LWR × GA4】クリック・フォーム・滞在時間も全部計測！イベントトラッキング完全実装ガイド【応用編】

<x-oasis-script>
    (function() {

        // 安全策: gtag関数を安全に呼び出すためのラッパー関数
        function safeGtag(command, action, params) {
            if (typeof window.gtag === 'function') {
                window.gtag(command, action, params);
            }
        }
    
        // 設定エリア：ここで監視するクラス名を定義します
        const CONFIG = {
            clickClass: 'track-click',       // Example 2: ボタン計測用
            formClass: 'track-form',         // Example 3: フォーム計測用
            outboundClass: 'track-outbound'  // Example 4: 外部リンク計測用
        };

        // -------------------------------------------------------
        // 1. クリック計測 (Example 2 and 4)
        // -------------------------------------------------------
        document.addEventListener('click', function(event) {
            // Shadow DOMの境界を越えて、クリックされた要素の完全な経路を取得
            var path = event.composedPath();
            
            // 判定用フラグの初期化
            var linkElement = null;       // Aタグが見つかったら格納
            var hasOutboundClass = false; // クラスが見つかったらtrue

            // 経路を奥の要素から親の要素へ順番に全てチェック
            for (var i = 0; i != path.length; i++) {
                var node = path[i];

                // windowやdocumentなど、タグではないノードはスキップ
                if (!node.tagName) continue;

                // ---------------------------------------------------
                // A. 特定ボタンのクリック (Example 2) - 最優先
                // ---------------------------------------------------
                // ボタン計測クラスがあれば即座に送信して終了
                if (node.classList.contains(CONFIG.clickClass)) {
                    safeGtag('event', 'click_button', {
                        'event_category': 'engagement',
                        'event_label': node.innerText || 'Button'
                    });
                    return; // ボタン計測完了。ここで処理を終える
                }

                // ---------------------------------------------------
                // B. 外部リンクのクリック (Example 4) - 情報収集
                // ---------------------------------------------------
                
                // 1. リンクタグ(Aタグ)を見つけた場合、記録する
                if (node.tagName === 'A') {
                    linkElement = node;
                }

                // 2. 計測用クラスを見つけた場合、記録する
                // (Aタグ自身、親、子、どこにあってもここで検知されます)
                if (node.classList.contains(CONFIG.outboundClass)) {
                    hasOutboundClass = true;
                }
            }

            // ループ終了後、判定を行う
            // 「リンクタグ」かつ「計測クラス」の両方が経路内に存在した場合に送信
            if (linkElement && hasOutboundClass) {
                safeGtag('event', 'click_outbound', {
                    'event_category': 'outbound',
                    'event_label': linkElement.href
                });
            }
        });

        // -------------------------------------------------------
        // 2. フォーム操作の計測 (Example 3)
        // -------------------------------------------------------
        document.addEventListener('change', function(event) {
            var target = event.target;
            var form = target.closest('form');
            
            if (form && form.classList.contains(CONFIG.formClass)) {
                safeGtag('event', 'form_interaction', {
                    'event_category': 'form',
                    'event_label': 'Input Changed: ' + target.name
                });
            }
        });

        // -------------------------------------------------------
        // 3. 滞在時間の計測 (Example 5)
        // -------------------------------------------------------
        var startTime = new Date().getTime();
        window.addEventListener('beforeunload', function() {
            var endTime = new Date().getTime();
            var timeSpent = Math.round((endTime - startTime) / 1000); // 秒単位

            safeGtag('event', 'visit_duration', {
                'event_category': 'engagement',
                'value': timeSpent,
                'event_label': document.title
            });
        });
    })();
</x-oasis-script>