メインコンテンツへスキップ

GTMでの実装方法

  • 更新

GTMでの実装方法について

Google タグ マネージャー(GTM)を利用して、DLPOタグを設置する方法を説明します。

 

はじめに

【以下ご一読の上、必要に応じてご利用ください　※設置は必須ではありません】

GTM経由でDLPOタグをご利用いただく場合、対象ページの表示時に一瞬デフォルトHTMLが表示される「フラッシング現象」が発生することがあります。
※この挙動は、各タグマネージャーの仕様によるものであり、現時点では回避策がございません。

以下のスニペットを利用することで、DLPOによる書き換えが完了するまでページ表示を行わず、デフォルトHTMLが一時的に表示される現象のみを回避できます（その間、画面は白くなります）。
※本手法は表示速度を改善するものではなく、表示タイミングは従来通りで、デフォルトHTMLの非表示に限定された処理です。

また、Safari 17以降に導入された「高度なトラッキングとフィンガープリントの保護」機能により、GTMタグがブロックされ、クリエイティブの配信や計測が行えないケースが確認されています。

2025年7月時点では、Safariの「プライベートブラウズ」ではこの保護機能がデフォルトで有効となっており、プライベートブラウズを利用しているユーザーにはDLPOキャンペーンが正常に表示・動作しない可能性があります。

なお、DLPOタグをページに直接設置している場合は、Safariのこの設定による影響は受けません。

 

■フラッシング対応方法

GTMに設定するDLPOタグとは別に、以下コードを対象ページ<head></head>内のできるだけ上部に設置してください。

<style>.adlpo-async-hide { opacity: 0 !important }</style>​
<script>!function(a,b,c,d,e){b.className+=' '+c;e=function(){b.className=b.className.replace(RegExp(' ?'+c),'')};a[c]=e;setTimeout(function(){e();a[c]=null},d);}(window,document.documentElement,'adlpo-async-hide',3000);</script>

 

設定手順

GTMでは、使用するコンテナに対して「カスタムHTMLタグ」の機能を利用しDLPOタグを設置します。

1．Googleタグマネージャーにログイン後、下記赤枠「新しいタグ」をクリックします。

mceclip0.png

 

2．続いて、下記画面から赤枠部分「タグの設定」をクリックします。

mceclip1.png

 

3．タグの種類から「カスタムHTML」をクリックします。

mceclip2.png

 

4．赤枠部分のテキストエリアにDLPO管理画面で作成した「非同期タグ」を貼り付けます。※非同期タグの「***」はアカウントID及びユーザーIDが入ります。

mceclip3.png

 

5．「トリガー」をクリックし、タグ配信するページを設定していきます。ここでは特定のページに配信する設定方法についてご案内します。トリガーの選択にて右上の「＋」マークをクリックします。（全てのページに配信する場合はAll Pagesを選択）

mceclip4.png

 

6．トリガーの種類は「ページビュー」をクリックし、このトリガーの発生場所にて、タグの配信条件を入力します。

mceclip5.png

 

7．トリガー名を入力し、「保存」ボタンをクリックします。

mceclip6.png

 

8．タグ名を入力し、「保存」ボタンをクリックします。

mceclip7.png

 

9．「公開」ボタンをクリックし、タグ情報を公開します。

mceclip8.png

以上がGoogleタグマネージャーを利用した非同期タグの設置方法になります。

※タグを配信するタイミングなど、GTM側の設定につきましては別途GTMのヘルプなどをご覧頂きますようお願い致します。

 

注意事項

  • DLPOタグを対象のページで設置したら必ず対象ページをブラウザ等で一度読み込んでください。
    (対象ページを一度読み込む事でDLPO管理画面上でタグが認識されます。)
  • DLPOタグを対象ページに設置してからDLPO管理画面で認識するまでに時間がかかる場合があります。
  • GTMを使ったDLPOタグ設定をする場合、非同期タグを利用するようにしてください。(GTMご利用時に同期タグを使用しますと、DLPOが正しく動作致しません。)