同期タグ・非同期タグの違いについて
ワンコードタグには、同期タグと非同期タグの2種類のタグがあります。
■同期タグ
同期タグは、関数や構文をHTMLに記述された順番に従って順次処理します。同期タグの読み込み時にエラーが起きた場合、それ以降の処理をブロックし、ページの読み込み時間に影響がでます。
■非同期タグ
非同期タグは、ページの読み込みと並行して行われるため、読み込み時間に影響しません。タイマーにて設定された時間内にページが読み込まれない場合は、処理を中止し、デフォルトページを代わりに表示します。
下記のメリット、デメリットを踏まえどちらを使用するかご検討ください。
表１：同期タグ・非同期タグの比較
| 同期タグ | 非同期タグ | |
|---|---|---|
| メリット | ・フラッシングを防ぐことができる | ・ページの読み込み速度に影響がない |
| デメリット | ・ページの読み込み速度に影響がある ・エラーが起きたときに、ページが表示されないことがある |
・フラッシングが発生することがある |
※フラッシングとは、テストパターンが表示される前に、一瞬デフォルトパターンが見える現象のことです。
■フラッシングの回避策（アンチフリッカースニペット）
以下コード（アンチフリッカースニペット）を設置することでDLPOによる書き換えが完了するまで、画面表示を実行させずデフォルトHTMLが一瞬表示される事象のみ回避可能です。必要に応じて設置下さい。
<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>
※対象ページ<head></head>内のできるだけ上部に設置して下さい。
■動作検証サイト
同期タグ、非同期タグの違いを確認できるサンプルサイトを用意しております。
サンプルサイトでは、同じ条件のキャンペーンを作成し稼働しております。違いは設置するタグだけです。下記リンクをクリックし、動作の違いをご確認ください。
なお、非同期タグを設置した場合に、フラッシングの回避策としてアンチフリッカースニペットを設置したサンプルサイトも用意しております。併せてご確認ください。
また、Google タグ マネージャー(GTM)を利用し、非同期タグを設置したサンプルサイトも用意しております。GTMのご利用に関しては「GTMでの実装方法」をご覧ください。
【サンプルサイト設定条件】
メインビジュアルに対し、特定のクリエイティブを表示するキャンペーンを稼働させています。
メインビジュアルのデフォルト表示と、指定したクリエイティブへの表示の切り替わりを体感することが可能です。
図１：メインビジュアルのデフォルト表示（左）と切り替え対象クリエイティブ（右）
【サイトリンク】
- サンプルサイト１（同期タグ検証）
- サンプルサイト２（非同期タグ検証）
- サンプルサイト３（非同期タグ検証 アンチフリッカースニペット設置バージョン）
- サンプルサイト４（GTM版非同期タグ検証）
- サンプルサイト５（GTM版非同期タグ検証 アンチフリッカースニペット設置バージョン）
■注意事項
- アンチフリッカースニペットは、画面表示が早まるわけではなく、表示時間は変わらずデフォルトHTMLを非表示にする処理となり、その間は画面が白い状態になります。
- スプリットランによるABテストを実施する場合は、同期タグのご利用を推奨します。スプリットランによるABテストの場合、各テストパターンへのリダイレクト処理中にデフォルトページが読み込まれて、見えてしまうことと、Google Analytics等のウェブ解析ツールと連携している場合、DLPOより先にウェブ解析ツールのタグが読み込まれると、両方のページにてカウントされる可能性がある為です。