ホームページ > ウェブフロントエンド > jsチュートリアル > クリック イベント統計を実装するための JS コード

クリック イベント統計を実装するための JS コード

小云云
リリース: 2018-03-26 17:26:31
オリジナル
2560 人が閲覧しました

この記事では主にクリック イベント統計を実装するための JS コードを紹介します。お役に立てれば幸いです。

/** 
 * 点击事件上报,分为立即上报和延时上报,延时上报通过cookie存储。 
 *  
 * 一、配置参数,主要用于定义上报的一些配置信息。通过在外部定义_clickc对象重置参数。 
 *     参数名称       类型          默认值             说明 
 *     selector:      string        '_click_rp'        点击触发的选择器,支持ID、class 
 *     prefix:        string        '_rp_'             需要上报的参数属性名前缀,如_rp_type,表示要上报type参数的值 
 *     cookie:        string        '_click_rp'        延迟上报时的cookie名称 
 *     domain:        string        '.skye.com'    cookie存储的域名(可以通过使用的网站来获得) 
 *     delay:         boolean       false              是否延迟上报,延迟上报通过cookie实现 
 *     delay_attr:    string        _delay             标签中指定是否延迟上报,优先级最高,ture延时,其他不延时。 
 *
ログイン後にコピー

* 2. 外部パラメータ。主に報告されるパラメータを定義するために使用されます。 _clickq 配列を外部で定義してパラメータを追加します。

*

* 3. ラベル パラメーターは、接頭辞 _rp_ を使用して定義されます。レポートする場合、_rp_ で始まるすべてのパラメーターがレポートされます。パラメータには 2 つの形式があり、1 つは純粋な文字、もう 1 つはコールバック関数です。

* a、レポート時のパラメータが a=aa&b=bb であることを示します

* 1,純粋な文字。文字を直接定義し、アップロードする必要があるパラメータの値を示します。

* 2、JavaScript: で始まるコールバック関数。関数本体を定義し、関数本体内のパラメーターの値を返すだけです。

* 例: Question

*

* 4. 遅延報告は次のように分かれています。 3 つの優先度、次のように高から低まで

* 1、ラベル属性 _delay が true に指定されているかどうか、そうであれば、レポートの遅延を意味します。

* 2. ラベルなどの特定のラベルであっても、このウィンドウが開き (ターゲットが "_self" または空である)、送信ボタン。

* 3、設定パラメータで指定された遅延パラメータ。

*

* 5. サポート: jQuery プラグインに依存する必要があります。

*

* 6. ユースケース

* 1. JS の導入

 * var _clickq = _clickq || []; 
 * _clickq.push(['param1', 'value1']); 
 * var _clickc = {selector:'_click_rps'}; 
 * (function() { 
 *  var click = document.createElement("script"); 
 *  click.src = "//cache.skye.com/js/lib/stat/click.js"; 
 *  var s = document.getElementsByTagName("script")[0];  
 *  s.parentNode.insertBefore(click, s); 
 * })();
ログイン後にコピー

*

* 2. セレクターの定義とパラメータのアップロード

 * 如,<a class="_click_rp" href="" _rp_a="aa" _rp_b="bb">a</a> 
 */  
(function () {  
    // 默认参数  
    var options = {  
        selector: &#39;_click_rp&#39;,  
        prefix: &#39;_rp_&#39;,  
        cookie: &#39;_click_rp&#39;,  
        domain: &#39;.skye.com&#39;,  
        delay: false,  
        delay_attr: &#39;_delay&#39;  
    };  
    var params = {};  
    var _params = {};  
    var clickObj = null; // 当前点击对象  
    // 获得对象  
    var getObject = function(selector) {  
        if (typeof(selector) == &#39;object&#39;) {  
            return selector;  
        } else {  
            var obj = $(&#39;#&#39;+selector);  
            if (obj.length) {  
                return obj;  
            }  
            obj = $(&#39;.&#39;+selector);  
            if (obj.length) {  
                return obj;  
            }  
            return null;  
        }  
    }  
    // 获得选择器  
    var getSelector = function(selector) {  
        return &#39;#&#39; + selector + &#39;,.&#39; + selector;  
    }  
    // 操作cookie函数  
    var getCookie = function(c_name) {  
        if (document.cookie.length>0) {  
            c_start = document.cookie.indexOf(c_name + "=")  
            if (c_start!=-1) {   
                c_start=c_start + c_name.length+1   
                c_end=document.cookie.indexOf(";",c_start)  
                if (c_end==-1) c_end=document.cookie.length  
                return unescape(document.cookie.substring(c_start,c_end))  
            }  
        }  
        return "";  
    }  
    var setCookie = function(c_name,value,expiredays,path,domain) {  
        var exdate = new Date()  
        exdate.setDate(exdate.getDate()+expiredays)  
        var cookie = c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());  
        if (path) cookie = cookie + ";path=" + path;  
        if (domain) cookie = cookie + ";domain=" + domain;  
        document.cookie = cookie;  
    }  
    // 获得标签中的参数  
    var getAttrParam = function() {  
        if ( clickObj ) {  
            var attrs = clickObj.get(0).attributes;  
            $.each(attrs, function(i) {  
                var name = attrs[i].name;  
                if ( name.indexOf(options.prefix) == 0 ) {  
                    name = name.replace(options.prefix, &#39;&#39;);  
                    var value = attrs[i].value;  
                    if ( value.indexOf(&#39;javascript:&#39;) == 0 ) {  
                        // 执行js获得参数值  
                        value = value.replace(&#39;javascript:&#39;, &#39;&#39;);  
                        eval(&#39;var valFun = function() {&#39;+ value +&#39;};&#39;);  
                        value = valFun();  
                    }  
                    params[name] = value;  
                }  
            });  
        }  
    }  
    // 获得默认参数  
    var getDefaultParam = function() {  
        if(document) {  
            params.url = document.URL || &#39;&#39;;  
            params.referrer = document.referrer || &#39;&#39;;  
        }  
        // 时间  
        var date = new Date();  
        params.ltime = date.getTime() / 1000;  
        // 时间戳  
        params.t = date.getTime();  
    }  
    var getParamStr = function() {  
        getAttrParam();  
        getDefaultParam();  
        // 合并配置参数  
        for(var key in _params) {  
            params[key] = _params[key];  
        }  
        //拼接参数串  
        var args = &#39;&#39;;   
        for(var i in params) {  
            if(args != &#39;&#39;) {  
                args += &#39;&&#39;;  
            }     
            args += i + &#39;=&#39; + encodeURIComponent(params[i]);  
        }  
        return args;  
    }  
    // 清空参数  
    var clearParam = function() {  
        params = {};  
    }  
    // 是否立即上报,如果跳转页面,则计入延时上报  
    var getIsDelay = function() {  
        if ( clickObj ) {  
            // 有具体指定  
            if ( clickObj.attr(options.delay_attr) == &#39;true&#39; ) {  
                return true;  
            }  
            // 特定标签  
            // a标签  
            if ( clickObj.is(&#39;a&#39;) ) {  
                if ( clickObj.attr(&#39;href&#39;).indexOf(&#39;javascript:&#39;) == 0 ) {  
                    return false;  
                }  
                if ( clickObj.attr(&#39;target&#39;) && clickObj.attr(&#39;target&#39;) != &#39;_self&#39; ) {  
                    return false;  
                }  
                return true;  
            }  
            // submit按钮  
            if ( (clickObj.is(&#39;input&#39;) || clickObj.is(&#39;button&#39;)) && clickObj.attr(&#39;type&#39;) == &#39;submit&#39; ) {  
                return true;  
            }  
        }  
        return options.delay;  
    }  
    // 加入cookie,下次上报  
    var setDelayCookie = function() {  
        // 获得参数  
        var args = getParamStr();  
        var cookieStr = getCookie(options.cookie);  
        if ( cookieStr == &#39;&#39; ) {  
            cookieStr = args;  
        } else {  
            cookieStr = cookieStr + &#39;,&#39; + args;  
        }  
        setCookie(options.cookie, cookieStr, 7, &#39;/&#39;, options.domain);  
        clearParam();  
    }  
    // 上报cookie  
    var rpCookie = function() {  
        // 获得cookie,循环操作  
        var cookieStr = getCookie(options.cookie);  
        if ( cookieStr ) {  
            var cookieArr = cookieStr.split(&#39;,&#39;);  
            for(var key in cookieArr){    
                rpClick(cookieArr[key]);  
            }    
            setCookie(options.cookie, &#39;&#39;, 7, &#39;/&#39;, options.domain);  
        }  
    }  
    // 上报  
    var rpClick = function(args) {  
        if ( args == undefined ) {  
            args = getParamStr();  
        }  
        var img = new Image(1, 1);  
        img.src = &#39;http://data.skye.com/stat/click?&#39; + args;  
        console.info(img.src);  
        clearParam();  
    }  
    // js上报函数  
    var rpComm = function(obj) {  
        console.info(&#39;click&#39;);  
        clickObj = obj;  
        if ( getIsDelay() ) {  
            setDelayCookie();  
        } else {  
            rpClick();  
        }  
    }  
    //解析外部配置  
    if(_clickc) {  
        for(var i in _clickc) {  
            options[i] = _clickc[i];  
        }     
    }  
    //解析外部参数  
    if(_clickq) {  
        for(var i in _clickq) {  
            _params[_clickq[i][0]] = _clickq[i][1];  
        }  
    }  
    // 提供外部js函数  
    $.rpComm = function(obj) {  
        rpComm(obj);  
    }  
    $.fn.rpComm = function() {  
        rpComm($(this));  
    }  
    // cookie中的上报  
    rpCookie();  
    // 初始化信息  
    var _time = new Date().valueOf();  
    var selector = getSelector(options.selector);  
    $(&#39;body&#39;).delegate(selector,&#39;click&#39;,function() {  
        // 连续点击限制  
        if(new Date().valueOf() - _time < 300) {  
            return;  
        }  
        _time = new Date().valueOf();  
        rpComm($(this));  
    });  
})();
ログイン後にコピー


以上がクリック イベント統計を実装するための JS コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート