YTMでの実装方法について
Yahoo!タグマネージャー(YTM)を利用して、DLPOワンコードタグを設置する方法を説明します。
はじめに
【以下ご一読の上、必要に応じてご利用ください ※設置は必須ではありません】
YTM及びGTM経由でワンコードタグをご利用時は、対象ページ表示の際に一瞬デフォルトHTMLが表示されるフラッシングが発生いたします。
→この処理については各タグマネージャーの仕様となり現状回避策がありません。
ただし、以下スニペットを利用することでDLPOによる書き換えが完了するまで画面表示を実行させず、デフォルトHTMLが一瞬表示される事象のみ回避可能です。(その間、画面は白くなります)
※画面表示が早まるわけではなく、表示時間は変わらずデフォルトHTMLを非表示にする処理となります。
■フラッシング対応方法
YTMもしくはGTMに設定するワンコードタグとは別に、以下コードを対象ページ<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>
設置手順
1．Yahoo!タグマネージャー管理画面にて「サービスタグ管理」をクリックし、その後「サービスタグを追加」をクリックします。
2．「サービスタグを追加」にて、「スマートカスタムタグの追加」をクリックします。
3．「サービスタグ名」「サービス提供元(社名)」に任意の情報を入力します。「サービスタグ情報」にはDLPO管理画面で作成した「ワンコードタグ」を貼り付けます。※ワンコードタグの「***」にはアカウントID及びユーザーIDが入ります。
上記設定後、「サービスタグの作成」をクリックしてください。
4．サービスタグを実行するインプット（ページ等）を設定します。「新しいインプットを設定」をクリックします。※既にインプットが存在する場合は対象インプットを設定し、「保存して次へ」をクリックします。（手順6へ進んでください）
5．「ページ名」に任意の情報を入力します。「URLパターン」にはサービスタグを設置するページのURLを入力し、「保存してページを設定」をクリックします。
6．「サービスタグ詳細」の右上のプルダウンより、「有効」を選択し、サービスタグを有効化します。
以上がYahoo!タグマネージャーを利用したワンコードタグの設置方法になります。
※タグを配信するタイミングなど、YTM側の設定につきましては別途YTMのヘルプなどをご覧頂きますようお願い致します。
注意事項
- ワンコードを対象のページで設置したら必ず対象ページをブラウザ等で一度読み込んでください。
(対象ページを一度読み込む事でDLPO管理画面上でタグが認識されます。) - ワンコードを対象ページに設置してからDLPO管理画面で認識するまでに時間がかかる場合があります。