サイト編集するためのアンチフリッカータグ実装方法

コンテンツ

Ptengine Experienceでユーザーに合わせてウェブサイトを表示させる場合にサイト編集を編集する機能を利用します。

しかし、オリジナルのHTMLやCSSなどを編集するわけではなく、オリジナルのコードを書き換えることでユーザーに対して編集された状態で表示される仕組みになっています。

そこで、オリジナルページがはじめに表示され時間差で書き換えられる現象も想定されます。（Google Optimizeなどの全てのA/Bテストツールも同じ問題を抱えています）、この現象を軽減するための方法を以下で紹介します。

タグの実装方法 #

Note：Ptengineからプロジェクトを接続されている場合は、こちらの文書を参考し手動でPtengine Experienceの基本タグを設置して頂ければ以下タグの実装は不要です。
下記のアンチフリッカータグをサイト編集対象ページ内の<head>で、Ptengine Experienceの基本タグ直後にそのまま直接埋め込み してください、ご注意いただきたい点は、GTMなどのようなタグマネージャーを経由せず直接貼り付けていただく必要があります。(GTMで設定する場合、タグを読み込むとページの点滅などの問題が発生する可能性があり、エンドユーザーの体験としてはよくないためお勧めしません) 

<style>
    .pt-async-hide {opacity: 0 !important}
</style> 
<script>
(function (win, doc, className, dataLayer, timer) { 
    var obj = { 
        start: 1 * new Date(), 
        end: function () { 
            doc.className = doc.className.replace(RegExp(' ?' + className), ''); 
        } 
    }; 
    doc.className += ' ' + className; 
    (win[dataLayer] = win[dataLayer] || []).hide = obj; 
    setTimeout(function () { 
        obj.end(); 
        obj.end = null; 
    }, timer); 
    obj.timeout = timer; 
})(window, document.documentElement, 'pt-async-hide', '_pt_data_layer', 4000);
</script>

この記事についてどう思いますか？

  • いいですね！
  • よくないです

評価いただきありがとうございました

  申しわけありません！理由を教えてください。

    サポートチームに直接問合せたい場合、こちらをクリックしてチャットしましょう。