1

訪問者の4番目のページビューの後にファンシーボックスポップアップを表示するようにjavascriptcookieを設定する方法を見つけようとしています。

これが私がFancyboxポップアップを表示するために使用しているコードですが、ご覧のとおり、これは最初のページビューでのみコードを表示し、1日後に期限切れになります

function setCookie(c_name,value,exdays)
 {
     var exdate=new Date();
     exdate.setDate(exdate.getDate() + exdays);
     var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
     document.cookie=c_name + "=" + c_value + ";domain=.mysite.net;path=/";
 }

function getCookie(c_name)
 {
     var i,x,y,ARRcookies=document.cookie.split(";");
     for (i=0;i<ARRcookies.length;i++)
  {
     x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
     y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
     x=x.replace(/^\s+|\s+$/g,"");
      if (x==c_name)
       {
       return unescape(y);
       }
  }
 }

jQuery(document).ready(function() {
     var show = getCookie("fancyreg");
     if(show==null || show=="") {
       $.fancybox(
 {
        'type' : 'iframe',
        'href' : 'http://www.mysite.net/popup/', //URL to popup page or image
        'autoDimensions' : false,
        'width' : 480,
        'height' : 260,
        'transitionIn' : 'none',
        'transitionOut' : 'none'
 }
);

  setCookie('fancyreg','1',1); 

 }
 });

また、既存のコードに遅延を追加して、3秒（3000ミリ秒）後にポップアップが表示されるようにする方法を教えていただければ幸いです。

以下のようにsetTimeout（function（）で試してみました

    <script type="text/javascript"> 
jQuery(document).ready(function() {
    setTimeout(function() {
        $.fancybox({
            'type' : 'iframe',
        'href' : 'http://www.mysite.net/popup/', //URL to popup page or image
        'autoDimensions' : false,
        'width' : 480,
        'height' : 260,
        'transitionIn' : 'none',
        'transitionOut' : 'none'
        })
    }, 4000); 
});
</script>

しかし、それは機能しません。

ページビューの制御に関しては、設定方法がわからず、これを支援するリソースも見つかりませんでした。

どうもありがとう

4

1 に答える 1

6

2019年4月2日更新

@Gregdebrickのコメントで述べたように、答えは、非推奨のjQueryCookieプラグインの代わりにJavaScriptCookieプラグインhttps://github.com/js-cookie/js-cookieを使用するように更新されています。

したがって、ページのCDNからJSCookieプラグインをロードした後：

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

次のスクリプトを使用します。

$(document).ready(function () {
    // if the cookie is undefined, create it
    if(typeof Cookies.get('visited') === "undefined"){
        Cookies.set("visited", 0);
    }
    // Cookies.get('visited') returns a string
    if (parseInt(Cookies.get('visited')) >= 3) {
        // open fancybox after 3 secs on 4th visit
        setTimeout(function () {
            $.fancybox.open({
                // your fancybox API options here
            });
        }, 3000);
    } else {
        let increase = parseInt(Cookies.get('visited')) + 1;
        Cookies.set('visited', increase, { expires: 1 });
        return false;
    }
}); // ready

更新された動作中のデモを参照してください

jQuery Cookieプラグインを使用しているとすると、次のコードを使用して、3秒後にfancyboxを起動できます。同じ日に4ページ目にアクセスします。

$(document).ready(function () {
    // create cookie
    var visited = $.cookie('visited'); // visited = 0
    if (visited >= 3) {
        // open fancybox after 3 secs on 4th visit or further on the same day
        setTimeout(function () {
            $.fancybox.open({
                // your fancybox API options here
            });
        }, 3000);
    } else {
        visited++; // increase counter of visits
        // set new cookie value to match visits
        $.cookie('visited', visited, {
            expires: 1 // expires after one day
        });
        return false;
    }
}); // ready

動作中のデモを参照してください

于 2013-01-24T21:02:53.083 に答える