Help & Tips

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

Ptengine Xでユーザーに合わせてウェブサイトを表示させる場合にサイト編集を編集する機能を利用します。しかし、オリジナルのHTMLやCSSなどを編集するわけではなく、オリジナルのコードを書き換えることでユーザーに対して編集された状態で表示される仕組みになっています。そこで、オリジナルページがはじめに表示され時間差で書き換えられる現象も想定されます。(Google Optimizeなどの全てのA/Bテストツールも同じ問題を抱えています)、この現象を軽減するための方法を以下で紹介します。

Ptengine Xの新規作成したプロファイルに適用されます 

注:Ptengineのプロファイルを接続し且つ最新タグを設置している場合は、以下タグの実装は不要です。 

下記のアンチフリッカータグをサイト編集対象ページ内の<head>で、Ptengine Xの” 基本タグ直後にそのまま直接埋め込み “してください、ご注意いただきたい点は、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>
Show More
Back to top button