🙋🏽 🙇 🖐🏿 Googleタグマネージャーを介したGoogleスプレッドシートのGoogle Analyticsペイロード 👩🏾‍🤝‍👩🏻 🛌 ⚱️

タスク： Google Analyticsのペイロードサイズを超えるイベントを特定する

ソリューション： Googleタグマネージャーを使用して、開発者なしでGoogleアナリティクスのヒット（ペイロードサイズを含む）をGoogleスプレッドシートに記録する

問題の本質

Googleタグマネージャー（GTM）を介してGoogleアナリティクス（GA）の拡張eコマースを実装し、 Googleアナリティクスデバッガーを使用してこのビジネスをデバッグしたことがある場合は、おそらくGAに到達しなかったイベントとエラーが表示されます： ペイロードサイズが大きすぎます（9000）。 最大許容数は8192です

なぜこれが起こっているのですか？

実際、analytics.jsライブラリーは8192バイトを超えるヒットを受け入れません。ヒットサイズが大きい場合、GAに到達せず、イベントレポートで空になります。

状況の例：

Webアナリストは、1回のヒットですべての製品の印象を詰め込む（または詰め込む）ように開発者に依頼します。その結果、ヒットは到達しません 1ページのリストに50以上の製品があります。または、50以上の異なる製品がバスケットに追加されます。その結果、チェックアウト手順とトランザクションイベントに問題があります。

どうする

ヒットデータの構造を常に最適化する（つまり、製品がユーザーの視野に表示されるときにヒットを送信する、不要な変数（バリアント、カテゴリ、ブランド）をヒットにプッシュしない、長い製品名を使用しないなど）-これにより、まず、ヒットの送信速度が向上します。次に、ペイロードサイズの問題を回避します。

最適化が不可能な場合、これらの制限を回避する方法がいくつかあります。

行動の準備

ヒットのカットとコンテンツの最適化を開始する前に、ペイロードサイズを超えるイベントを特定します。

ステップ1. Googleスプレッドシートを設定する

新しいテーブルを作成します。

ヘッダー（1行）に、ヒットから抽出するパラメーターの名前を記述します（指定する名前は、GTMのJSスクリプトで使用する名前とまったく同じであることに注意してください）。例として、次のデータを抽出します。

タイムスタンプ
payLoadLength
tid（追跡ID）
cid（クライアントID）
uid（ユーザーID）
t（ヒットのタイプ）
pa（製品アクション）
ni（非相互作用）
dl（ドキュメントの場所）
dp（ドキュメントパス）
dt（ドキュメントのタイトル）
ec（イベントカテゴリ）
ea（イベントアクション）
el（イベントラベル）
ti（トランザクションID）
tr（取引収益）

Googleシートでのペイロードロギングの列マッピングの例

列内のパラメーターの順序は重要ではありません（タイムスタンプを除く-最初にする必要があります）。自動フォーマットのエラーを回避するために、cidおよびtiパラメータを使用して列をプレーンテキスト （フォーマット>数値>プレーンテキスト）でフォーマットします。

必要に応じて、必要なパラメーターを追加/削除できます（GTMのJSスクリプト内の変数のリストを忘れずに変更してください）。可能なフィールドとパラメーターのリストanalytics.js

次に、スクリプトエディターを開いてコードを追加します（元のスクリプトはMartin Hawksey https://gist.github.com/mhawksey/1276293に属します）。

function doGet(e){ return handleResponse(e); } function doPost(e){ return handleResponse(e); } function handleResponse(e) { var lock = LockService.getPublicLock(); lock.waitLock(30000); // wait 30 seconds before conceding defeat. try { // next set where we write the data - you could write to multiple/alternate destinations var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet = ss.getSheets()[0]; // we'll assume header is in row 1 but you can override with header_row in GET/POST data var headRow = e.parameter.header_row || 1; var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]; var nextRow = sheet.getLastRow()+1; // get next row var row = []; // loop through the header columns for (i in headers){ if (headers[i] == "timestamp"){ // special case if you include a 'timestamp' column row.push(Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "MMM d yyyy HH:mm:ss")); } else { // else use header name to get data row.push(e.parameter[headers[i]]); } } // more efficient to set values as [][] array than individually sheet.getRange(nextRow, 1, 1, row.length).setValues([row]); // return json success results return ContentService .createTextOutput(JSON.stringify({"result":"success", "row": nextRow})) .setMimeType(ContentService.MimeType.JSON); } catch(e){ // if error return this return ContentService .createTextOutput(JSON.stringify({"result":"error", "error": e})) .setMimeType(ContentService.MimeType.JSON); } finally { //release lock lock.releaseLock(); } }

スクリプトをWebアプリケーションとして展開します（[公開]> [Webアプリとして展開...]）。権限-誰でも、匿名でも。パブリッシュ。

Google Scriptエディターの設定

将来、WebアプリケーションのURL（現在のWebアプリのURL）が必要になるため、まだタブを閉じないでください。

ステップ2. GTMを構成する

2つのカスタムJavaScript変数を作成します。

v_EE_timestamp
v_EE_mimic GAペイロード

GTM JavaScript変数の例

ヒットが送信された時刻（タイムスタンプ）を決定する最初のJS変数 。この変数は、2番目のJS変数で使用されます。

 function() { // Get local time as ISO string with offset at the end var now = new Date(); var tzo = -now.getTimezoneOffset(); var dif = tzo >= 0 ? ' Timezone: +' : ' Timezone: -'; var pad = function(num) { var norm = Math.abs(Math.floor(num)); return (norm < 10 ? '0' : '') + norm; }; return now.getFullYear() + '-' + pad(now.getMonth()+1) + '-' + pad(now.getDate()) + ' Time' + pad(now.getHours()) + ':' + pad(now.getMinutes()) + ':' + pad(now.getSeconds()) + dif + pad(tzo / 60) + ':' + pad(tzo % 60); }

2番目のJS変数 、必要なヒットをキャッチしてGoogleシートに転送するため（この資料のコードに基づいて）。

 function sendHitTask(){ return function(model) { var payLoad = model.get('hitPayload'); var trackingBaseUrls = ['https://www.google-analytics.com/collect', 'https://script.google.com/macros/s/AKfycbxJLy3eYBLpPu_S_eNccxzn_GwHXkZWr-93feMuBaAZelk3fj01yB/exec']; for (i = 0; i < trackingBaseUrls.length; i++) { var baseUrl = trackingBaseUrls[i]; if (trackingBaseUrls[i].indexOf('collect') > -1) { var req = new XMLHttpRequest(); req.open('POST', baseUrl, true); req.send(payLoad); } else if (payLoad.length > 7500){ var payLoadExtract = payLoad.split('&'); var payLoadArray = {}; // Push values to array for later access for (i = 0; i < payLoadExtract.length; i++){ var splitArray = payLoadExtract[i].split('='); payLoadArray[splitArray[0].trim()] = splitArray[1].trim(); } // Specify values to be sent to Google Sheets from array var tid = 'tid=' + payLoadArray.tid, cid = '&cid=' + payLoadArray.cid, uid = '&uid=' + payLoadArray.uid, t = '&t=' + payLoadArray.t, pa = '&pa=' + payLoadArray.pa, ni = '&ni=' + payLoadArray.ni, dl = '&dl=' + payLoadArray.dl, dp = '&dp=' + payLoadArray.dp, dt = '&dt=' + payLoadArray.dt, ec = '&ec=' + payLoadArray.ec, ea = '&ea=' + payLoadArray.ea, el = '&el=' + payLoadArray.el, ti = '&ti=' + payLoadArray.ti, tr = '&tr=' + payLoadArray.tr, timestamp = '&timestamp=' + {{v_EE_timestamp}}, payLoadLength = '&payLoadLength=' + payLoad.length; var collectPayLoad = tid + cid + uid + t + pa + ni + dl + dp + dt + ec + ea + el + ti + tr + timestamp + payLoadLength; // Send Values to Google Sheets var collectUrl = baseUrl +'?'+ collectPayLoad; var myImage = new Image(); myImage.src = collectUrl; } } } }

設定する必要があるもの：

trackingBaseUrls変数に、WebアプリケーションのURL（手順1で作成）およびgoogle analyticsのURLを挿入します。
payLoad.lengthで、キャッチするヒットのサイズを決定します。例では、set> 7500、つまり 8192バイトのしきい値を潜在的に超える可能性のあるすべてをキャッチします。ログ全体が興味深い場合は、賭け金を減らすことができます。
Req.openは、ヒットを送信するためのメソッドを定義します（ヒットのサイズに応じて、POSTまたはGETになります。Googleは、より大きなペイロードを送信できるため、 POSTを使用することをお勧めします）。デフォルトでは、GAのイベントはGETを介して送信されます。拡張eコマースの場合は、送信方法をPOSTに変更することをお勧めします（FieldsのEnhance ecommerceタグに追加して設定します： transport-beakon ）

次に、コンテナ内で拡張eコマースイベントをGAに送信するタグを見つけ、対応するトリガーを参照してそれらのコピーを作成します。

タグのコピーで、GA IDをany（test / fake）に変更し、 sendHitTaskフィールドと名前JS変数（v_EE_mimic GAペイロード）を[設定するフィールド]に追加します。

この場合、sendHitTaskは変更されます。ヒットデータをテストGAに送信します（送信することはできません。このため、コード内の値'https://www.google-analytics.com/collect'を削除します）およびGoogleシート（指定されたペイロードサイズを超える場合）。

元の拡張eコマースタグに触れないように、テストGA IDのタグのコピーが保険に必要です。元のタグのsendHitTaskを（コピーを作成せずに）変更できますが、customTaskを使用することはできません（sendHitTaskを統合することで変更する必要があります）。安全にします）。

GTM拡張eコマースタグ設定

タグを保存し、GTMコンテナの新しいバージョンを公開します。

まとめ

現在、Enhance ecommerceタグがトリガーされると、v_EE_mimic GAペイロードスクリプトも機能します。指定された設定でペイロードがその値を超えると、このヒットはGoogleシートに記録されます。

ヒットごとにログを収集することにより、どの特定のイベントがGAに到達しなかったか、どこで発生したか、どのブラウザなどで特定できます。（可能なフィールドとパラメーターのリストanalytics.jsを参照してください）。

ご清聴ありがとうございました！

この資料が役に立ち、Googleアナリティクスのデバッグが楽になることを願っています。

PS GTMタグの検証を自動化する方法（タグの自動テスト）を知っている人は、返信してください！むかしむかし、Simoはそれについての記事をwww.simoahava.com/analytics/automated-tests-for-google-tag-managers-datalayerに書きましたが、理解できませんでした。たぶん誰かが他の方法を試した/知っています。私はこの問題についてアドバイスと助けを非常に感謝します。

Googleタグマネージャーを介したGoogleスプレッドシートのGoogle Analyticsペイロード