Adobe Experience Cloud

Adobe Target: at.jsの「チラつき」を手っ取り早く回避する

こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。

Adobe Targetのat.jsをDynamic Tag Manager(DTM)を使って導入すると、ページを開いた時に一瞬画面が真っ白になる「チラつき」が発生する事があります。
これをDTM設定で回避する小技を紹介します。

Adobeの公式ドキュメントにはat.jsの仕様について記述があります。
How at.js Manages Flicker | Adobe Experience Cloud Help

If you enable the Auto Create Global Mbox setting when configuring at.js, at.js will set HTML BODY style opacity to 0. After a response from Target is received, at.js resets HTML BODY opacity to 1.

at.jsをロードした時にbodyのopacityを0にして画面を一瞬真っ白にして、その後at.jsのコンテンツレンダリングが終わったタイミングでopacityを1に戻す。と書いてます。

これがお節介で、爆速ページならDTMがat.jsをロード始める前にすでにページのレンダリングが始まっており、at.jsがあとから非同期でやって来て画面を一瞬真っ白にするんですね。
それで、at.jsの仕事が終わったら再び画面を表示するのです。
なんという事でしょう。

というわけで、at.jsがopacityを0にするのを回避する方法です。

1. DTMのAdobe Target設定を開き、[ライブラリ管理] > [エディタを開く]

2. at.jsコード内の opacity:0 という文字列を検索する。

3. 該当箇所を opacity:1 に置換する。

4. 設定を保存してステージングモードで動作確認後、画面が一瞬真っ白になるチラつきが起きなければ、本番発行。

以上です。

本日はDTMでat.jsを配信した際に画面が一瞬真っ白になってチラつく問題が回避する小技についてでした。

弊社ではAdobe TargetなどのABテストツールの導入支援も行っております。
お問い合わせはこちらからどうぞ

ブログへの記事リクエストはこちらまで

関連記事

  1. Adobe Experience Cloud

    Adobe Summit 2020レポート: 5 Marketing Trends That Wil…

    こんにちは。エクスチュアインターン生の畝川(せがわ)です。今回…

  2. Adobe Experience Cloud

    Adobe Summit 2020レポート: Experience Cloud Strategy

    こんにちは。インターン生の中野です。本記事では、バーチャル開催とな…

  3. Adobe Analytics

    Adobe新タグ登場って本当?AEP Web SDKって何だ?

    こんにちは、エクスチュアの権泳東(コン・ヨンドン)です。Ado…

  4. Adobe Analytics

    Adobe Analytics:ワークスペース:セグメント比較機能の紹介

    Adobe Summitで発表されていたSegment IQ機能が実は…

  5. Adobe Analytics

    Adobe Analytics:セグメントの落とし穴:滞在時間がおかしくなる

    Adobe Analyticsの持つ機能の中でも特に強力で便利な機能の…

  6. Adobe Analytics

    Adobe AnalyticsとGoogle Analyticsの違い② サンプリングの有無

    こんにちは。CEOの原田です。AAとGAの違いの2段目にいきます。…

最近の記事

  1. ELB (ALB・NLB・CLB) をサクッと学ぶ
  2. Direct Connect vs Site to Site…
  3. パブリックサブネット vs プライベートサブネット
  4. セキュリティグループ vs ネットワークACL
  5. IAM (Identity and Access Manag…
  1. Web解析

    コラム:Web解析から顧客体験分析(CXA)に
  2. Adobe Analytics

    Adobe AnalyticsとGoogle Analyticsの違い② サンプ…
  3. Adobe Analytics

    Adobe Analytics: DWHレポートの日付列をBigQueryのDa…
  4. Mouseflow

    Mouseflow: MouseflowタグをWebサイトに導入する
  5. Tableau

    Tableau 2021.1 新機能紹介
PAGE TOP