更新日: 2024 年 6 月 9 日
今回私が共有するのは、GTM を使用してユーザーのコピー行動を追跡することです。これには主に、電子メール アドレスや電話番号のコピーなど、ユーザーがページ上のテキストをコピーすることが含まれます。
原則として、カスタム HTML を介して JavaScript を挿入し、ユーザーがコピー動作を行っているかどうかを監視し、コピーされたテキストとテキストの長さがデータ レイヤー変数を介して GA4 に送信されます。
ステップ 1: JavaScript を挿入するためのカスタム HTML
GTM で、「タグ 」——「新規」——「タグタイプを選択して設定を開始…」——「カスタム HTML」をクリックし、”HTML-Copy”という名前を付けてコードを貼り付け、条件をトリガーします「All Pages」で、設定後の効果は以下の通りです。
コード：
<script>
// Declare function to get selected text from document
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
// Declare function on copy event
document.addEventListener("copy", function(e){
dataLayer.push({
"event": "textCopied",
"clipboardText": getSelectionText(),
"clipboardLength": getSelectionText().length
});
});
</script>
コピーされた電子メールまたは電話番号のみを追跡したい場合は、いくつかの制限を設け、コピーされたテキストが特定の値と等しい場合にのみイベントが送信されるようにすることができます。
ステップ 2: トリガー条件を設定する
GTMの「トリガー」——「新規」——「トリガーのタイプを選択して設定を開始…」——「カスタム イベント」をクリックし、名前を “textCopied” とし、以下のように設定します。
ステップ 3: データ層変数を設定する
GTM の「変数」——「新規」——「変数タイプを選択して設定を開始…」——「データレイヤーの変数」をクリックし、名前を “DL – Clipboard Text” とし、以下の設定を行います。
DL – Clipboard Length も同様に設定します:
ステップ 4: コードを設定する
GTMの「タグ 」——「新規」——「タグタイプを選択して設定を開始…」——「Google アナリティクス: GA4 イベント」をクリックし、名前を “GA4-Event-textCopied” とし、以下の設定を行います:
イベント名はTextCopyです
コピーされたコンテンツとコンテンツの長さを渡すために、2 つのイベント パラメーター TextCopy_text と TextCopy_length も定義されています。
ステップ 5: プレビューとデバッグ
次にプレビューデバッグです:
イベントは正常にトリガーされます。クリックして開くと、内部の値が正確かどうかを確認できます:
データは正確であり、オンラインで公開できます。
ステップ6: イベントパラメータを登録する
先ほど、イベント パラメーター TextCopy_text と TextCopy_length を設定しました。次に、TextCopy_text はテキスト タイプであるため、カスタム イベント レベルとして登録され、TextCopy_length は数値タイプです。カスタムイベントレベルとして登録されます。
カスタム ディメンションの登録 TextCopy_text
GA4の「管理」——「カスタム定義」——「カスタム ディメンションを作成 」をクリックし、以下の設定を行います。
カスタムインジケーター TextCopy_length を登録する
GA4の「管理」——「カスタム定義」——「カスタム指標 」——「カスタム指標を作成 」をクリックし、以下の設定を行います。
これで設定は完了です。
ステップ 7: レポートビュー
通常、24 時間後に、GA4 で次のような情報が表示されるようになります。
