記事をつくる
シナリオを組む
計測タグ設置
その他の設定
タグHead内
<!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-M7LQWJK');</script> <!-- End Google Tag Manager -->
タグBody開始直後
<!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M7LQWJK" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <script> // URLから?fbclid=値を取得する関数 function getFbclidParam() { const url = window.location.href; const fbclidMatch = url.match(/[?&]fbclid=([^&#]*)/); if (fbclidMatch && fbclidMatch[1]) { return fbclidMatch[1]; } return null; } // 全てのaタグのhrefにfbclidパラメータを追加する関数 function appendFbclidToLinks() { const fbclidValue = getFbclidParam(); // fbclidパラメータが存在しない場合は何もしない if (!fbclidValue) { return; } // ページ内の全てのaタグを取得 const links = document.querySelectorAll('a'); links.forEach(link => { let href = link.getAttribute('href'); // hrefが存在し、JavaScriptのコードでない場合(javascript:で始まらない場合) if (href && !href.startsWith('javascript:')) { // 既にfbclidパラメータが含まれている場合は置き換える if (href.includes('fbclid=')) { href = href.replace(/([?&])fbclid=[^&]*/, `$1fbclid=${fbclidValue}`); } else { // URLにクエリパラメータが既に含まれているかチェック const separator = href.includes('?') ? '&' : '?'; href += `${separator}fbclid=${fbclidValue}`; } // 更新したhrefを設定 link.setAttribute('href', href); } }); } // DOMが完全に読み込まれた後に実行 document.addEventListener('DOMContentLoaded', appendFbclidToLinks); // fetch APIをオーバーライドして、動的に読み込まれるコンテンツにも対応 (function() { // オリジナルのfetch関数を保存 const originalFetch = window.fetch; // fetchをオーバーライド window.fetch = function() { // オリジナルのfetch関数を呼び出す return originalFetch.apply(this, arguments).then(response => { // レスポンスのクローンを作成(streamは一度しか読めないため) const clonedResponse = response.clone(); // テキストとして読み込める場合のみ処理を続行 if (clonedResponse.headers.get('content-type') && clonedResponse.headers.get('content-type').includes('text/html')) { // レスポンス処理後に少し遅延させてDOM更新を待つ setTimeout(appendFbclidToLinks, 300); } return response; }); }; })(); // MutationObserverを使用してDOM変更を監視 (function() { // DOM変更を監視する設定 const config = { childList: true, // 子ノードの変更を監視 subtree: true // すべての子孫ノードの変更も監視 }; // DOM変更時のコールバック const callback = function(mutationsList, observer) { let hasNewLinks = false; // 変更を調べ、新しいaタグが追加されたかチェック for (const mutation of mutationsList) { if (mutation.type === 'childList' && mutation.addedNodes.length > 0) { for (const node of mutation.addedNodes) { if (node.nodeType === 1) { // 要素ノードの場合 if (node.tagName === 'A' || node.querySelectorAll('a').length > 0) { hasNewLinks = true; break; } } } } if (hasNewLinks) break; } // 新しいリンクが追加された場合のみ処理を実行 if (hasNewLinks) { appendFbclidToLinks(); } }; // オブザーバーのインスタンスを作成 const observer = new MutationObserver(callback); // DOM読み込み完了後にオブザーバーを開始 document.addEventListener('DOMContentLoaded', function() { observer.observe(document.body, config); }); })(); </script>
タグBody終了直前
<!--タグBody終了直前-->