次の手順とコード スニペットは、JavaScript 関数や onclick
トリガーなどのイベント リスナーを使用して、ユーザーの操作に基づいて同意状態を動的に更新する方法を示しています。
これを実現する唯一の方法ではなく、特定のセットアップには別の方法が必要な場合があることに注意してください。
例 1: Google タグ マネージャーの同意要件を使用してユニバーサル ピクセル火災を制御する
重要
この方法では、ユニバーサル ピクセルが同意がない場合にイベントを測定できなくなる可能性があります。 ユニバーサル ピクセルは、同意なしに個人データを使用しないように、該当する同意設定を持つページに読み込むことができます。
詳細については、「 例 3 」を参照してください。
Google の同意モード機能をサポートする同意管理プラットフォーム (CMP) を使用する場合は、ユーザーが特定の目的で同意を与えた場合にのみ、Microsoft のユニバーサル ピクセルを起動することを選択できます。
UP タグに同意シグナルを追加する
[タグ>新しい] に移動します。
[ タグの構成] を選択します。
[ カスタム HTML] を選択します。
次の JavaScript コードをコピーして貼り付け、
REPLACE_WITH_UP_PIXEL_ID
をタグ ID に置き換えます。<script> !function(e,i){if(!e.pixie){var n=e.pixie=function(e,i,a){n.actionQueue.push({action:e,actionValue:i,params:a})};n.actionQueue=[];var a=i.createElement("script");a.async=!0,a.src="//acdn.adnxs.com/dmp/up/pixie.js";var t=i.getElementsByTagName("head")[0];t.insertBefore(a,t.firstChild)}}(window,document); pixie('consent', 'default', { 'ad_storage': 'granted' }); pixie('init', 'REPLACE_WITH_UP_PIXEL_ID'); pixie('event', 'PageView'); </script> <noscript><img width="1" height="1" style="display:none;" src="https://ib.adnxs.com/pixie?pi=REPLACE_WITH_UP_PIXEL_ID&e=PageView&script=0&consent=1" /></noscript>
[ トリガー] を 選択し、[ すべてのページ] を選択します。
テンプレートを保存します。
ユニバーサル イベント トラッカーの同意設定を編集する
- GTM の [タグ] に移動し、作成したタグを選択します。
- [ タグの構成] を 選択し、既存のタグを編集します。
- [ 詳細設定] を展開します。
- [ 同意設定] セクションを展開します。
- [ タグの起動に追加の同意が必要] を選択します。
-
ad_storage
など、必要な目的を選択します。 - 変更内容を保存します。
注:
この設定により、ユニバーサル ピクセルは、ユーザーが CMP プロバイダー経由で ad_storage
に同意した場合にのみイベントを測定します。
テストとデバッグ
- GTM のプレビュー モード: GTM のプレビュー モードを使用して、トリガーとタグをテストします。
- ブラウザー コンソールを確認します。 ブラウザー コンソールを開き、同意の更新プログラムが正しくプッシュされていることを確認します。
これらの手順に従うことで、ユーザーの操作に基づいて同意設定を動的に更新し、コンプライアンスとわかりやすいエクスペリエンスを確保できます。
例 2: ボタンのクリックにトリガーを使用して同意モードを更新する
GTM でユーザー操作トリガーを作成する
ユーザーが同意バナーを操作するときに発生するトリガーを GTM で作成する必要があります (たとえば、[はい] または [いいえ] をクリックします)。
[はい] のトリガーをクリックします
- GTM の [トリガー] に移動し、新しいトリガーを作成します。
- [ クリック - すべての要素] を選択します。
- [ クリック数] を選択します。
- [ 変数 Built-In 選択 ] を選択し 、[クリック ID] を選択します。
- 同意プロンプト ボタン ID を使用して条件を定義します。
- トリガーに名前を付けます (例:
Consent Granted Click
)。
[いいえ] のトリガーをクリックします
[ いいえ ] ボタンに上記の手順を繰り返し、 Consent Denied Click
という名前を付ける。
同意バナー HTML の例
<div id="consent-banner">
<p>We use cookies to improve your experience. Do you accept?</p>
<button id="consent-yes">Yes</button>
<button id="consent-no">No</button>
</div>
トリガー Consent-Granted 例
同意の更新のためのカスタム HTML タグを作成する
許可された同意のカスタム HTML タグ
[タグ>新しい] に移動します。
[ カスタム HTML タグ] を選択します。
次のスクリプトを追加します。
<script> pixie ('consent', 'update', { 'ad_storage': 'granted' }); </script>
[トリガー] を [
Consent Granted Click
] に設定します。タグを保存して発行します。
拒否された同意のカスタム HTML タグ
上記の手順を繰り返しますが、次のスクリプトを使用します。
<script> pixie ('consent', 'update', { 'ad_storage': 'denied' }); </script>
[トリガー] を [
Consent Denied Click
] に設定します。タグを保存して発行します。
同意バナーを実装する
同意バナー HTML に、GTM トリガーの要素を識別するために使用できる ID またはクラスを含むボタンが含まれていることを確認します。
例 3: カスタム イベントを使用して同意モードを更新する
GTM のデータ レイヤーにユーザーの選択に関するカスタム イベントを送信する
ページが既にユーザーのプライバシーの選択をリッスンし、JavaScript を制御している場合は、GTM ワークスペースのカスタム イベント トリガーとして GTM のデータ レイヤーに送信されるカスタム イベントを使用できます。
同意バナー HTML の例
<div id="consent-banner">
<p>We use cookies to improve your experience. Do you accept?</p>
<button id="consent-yes">Yes</button>
<button id="consent-no">No</button>
</div>
同意バナーが上記の例と一致する場合は、次のようにカスタム GTM イベントを GTM のデータ レイヤーに送信できます。
jQuery の使用:
$('#consent-yes').click(function() {
dataLayer.push({'event': 'consent_granted'});
});
JavaScript の使用:
document.getElementById('consent-yes').addEventListener('click', function() {
dataLayer.push({'event': 'consent_granted'});
});
GTM でユーザー操作トリガーを作成する
同意バナーを使用してユーザーの操作を追跡するには、ユーザーが [はい ] または [いいえ] をクリックしたときに発生するトリガーを GTM に作成します。
"はい" のクリック トリガーを作成する
- GTM で、[ トリガー] に移動し、新しいトリガーを作成します。
- [ カスタム イベント] を選択します。
- わかりやすいイベント名を入力します。
- [ いくつかのカスタム イベント] を選択します。
- 変数型として Event を設定します。
- 条件演算子を選択し、カスタム JavaScript 関数から データ レイヤー イベント名 を入力します。
- トリガーに名前を付けます (たとえば、 同意が付与されたクリック)。
"いいえ" のクリック トリガーを作成する
[ いいえ ] ボタン (またはそれと同等のもの) に対して上記の手順を繰り返し、トリガーに名前を付けます ([ 同意拒否] クリックなど)。
同意の更新のためのカスタム HTML タグを作成する
GTM で 2 つのカスタム HTML タグを作成し、ユーザーの操作に基づいて同意の状態を更新します。
許可された同意のカスタム HTML タグ
GTM で、[ タグ ] に移動し、新しいタグを作成します。
[ カスタム HTML タグ] を選択します。
次のスクリプトを追加します。
<script> pixie('consent', 'update', { 'ad_storage': 'granted' });
- [トリガー] を、先ほど作成した "同意付与されたクリック" トリガーに設定します。
- タグを保存して発行します。
拒否された同意のカスタム HTML タグ
<script>
pixie ('consent', 'update', { 'ad_storage': 'denied' });
</script>
例 2 と同じ手順に従って、Consent Granted Click
とConsent Denied Click
のカスタム HTML タグを作成します。
これらの方法を実装することで、GTM を通じてユーザーの同意設定に動的に準拠できます。