CINXE.COM
Installing counter on AJAX, SPA, Flash sites — Top Mail.Ru
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <link rel="stylesheet" href="/css/blocks.css?v18" type="text/css" /> <link rel="stylesheet" href="/help/vs.css" type="text/css" /> <link rel="stylesheet" href="/help/help.css" type="text/css" /> <script src="/help/highlight.min.js" type="text/javascript"></script> <script src="/js/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="/help/jquery.collapse.js" type="text/javascript"></script> <script src="/help/jquery.collapse_storage.js" type="text/javascript"></script> <script src="/help/jquery.collapse_cookie_storage.js" type="text/javascript"></script> <script src="/help/help.js" type="text/javascript"></script> <title>Installing counter on AJAX, SPA, Flash sites — Top Mail.Ru</title> </head> <body> <script type="text/javascript"> var _tmr = window._tmr || (window._tmr = []); _tmr.push({id: "36383", type: "pageView", start: (new Date()).getTime()}); (function (d, w, id) { if (d.getElementById(id)) return; var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id; ts.src = "https://top-fwz1.mail.ru/js/code.js"; var f = function () {var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s);}; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "topmailru-code"); </script><noscript><div> <img src="https://top-fwz1.mail.ru/counter?id=36383;js=na" style="border:0;position:absolute;left:-9999px;" alt="Top.Mail.Ru" /> </div></noscript> <style>.portal-menu{position:relative;z-index:1;display:block;-webkit-font-smoothing:antialiased}.portal-menu_width{display:block;margin:0 auto;position:relative;z-index:2}.w-pm-menu{position:relative;z-index:3;display:block;width:100%;height:56px}.w-pm-menu,.w-pm-menu_submenu{-webkit-box-shadow:0 2px 0 0 rgba(0,0,0,.04);box-shadow:0 2px 0 0 rgba(0,0,0,.04)}.w-pm-menu_submenu{z-index:2;height:40px}.pm-menu{display:table;width:100%;margin:0 auto;height:56px;font:15px/18px Helvetica Neue Light,Arial,Tahoma,sans-serif}.pm-menu_submenu{height:40px}.pm-menu__left{text-align:left;width:1%;padding-right:20px}.pm-menu__left,.pm-menu__center{display:table-cell;vertical-align:top}.pm-menu__center{text-align:center}.pm-menu__center__inner{visibility:hidden}.pm-menu__left__inner,.pm-menu__center__inner{display:block;position:relative;height:56px;white-space:nowrap}.pm-menu__left__inner__leg,.pm-menu__center__inner__leg{display:inline-block;height:0;overflow:hidden;visibility:hidden}.pm-menu__left__inner_submenu,.pm-menu__center__inner_submenu{height:40px}.w-pm-menu{background:#005ff9}.w-pm-menu_submenu{background:#333}.pm-menu{background:#005ff9;color:#333}.pm-menu_submenu,.pm-menu__left__inner_submenu,.pm-menu__center__inner_submenu{background:#333}</style> <style>.pm-uh-tmr_lang_ru {width:21px;height:21px;background:url('/img/langs.png') 0 0 no-repeat;}.pm-uh-tmr_lang_ru-i {width:21px;height:21px;background:url('/img/langs.png') 0 -24px no-repeat;}.pm-uh-tmr_lang_en {width:21px;height:21px;background:url('/img/langs.png') -24px 0 no-repeat;}.pm-uh-tmr_lang_en-i {width:21px;height:21px;background:url('/img/langs.png') -24px -24px no-repeat;}</style> <style>.pm-toolbar__dropdown__item[data-lang-switcher] .pm-toolbar__dropdown__item__text {position:relative;margin-left:-5px;padding-left:27px;}.pm-toolbar__dropdown__item[data-lang-switcher] .pm-toolbar__dropdown__item__text:before {content:'';position:absolute;top:0;left:0;display:block;width:21px;height:17px;background:url('/img/langs.png') 100% 100% no-repeat;}.pm-toolbar__dropdown__item[data-lang-switcher="ru"] .pm-toolbar__dropdown__item__text:before {background-position: 0 -26px;}.pm-toolbar__dropdown__item[data-lang-switcher="en"] .pm-toolbar__dropdown__item__text:before {background-position: -24px -26px;}</style> <div id="portal-menu" class="portal-menu"> <div class="pm-css-checker" id="pm-css-checker" style="display: none;"></div> <div id="portal-menu__toolbar" class="portal-menu__toolbar w-pm-menu"> <div class="portal-menu_width"> <div class="pm-menu"> <div class="pm-menu__left"> <div class="pm-menu__left__inner"> </div> </div> <div class="pm-menu__center"> <div class="pm-menu__center__inner"> <i class="pm-menu__center__inner__leg" style="visibility: hidden">s</i> </div> </div> </div> </div> </div> <div id="portal-menu__submenu" class="portal-menu__submenu w-pm-menu w-pm-menu_submenu" style="display: none;"> <div class="portal-menu_width"> <div class="pm-menu pm-menu_submenu"> <div class="pm-menu__center pm-menu__center_submenu"> <div class="pm-menu__center__inner pm-menu__center__inner_submenu"> <i class="pm-menu__center__inner__leg pm-menu__center__inner__leg_submenu" style="visibility: hidden">s</i> </div> </div> </div> </div> </div> </div> <script type="application/javascript">(function(){function a(a){a=a||{};for(var b=1,c=arguments.length;c>b;b++){var d=arguments[b];for(var e in d)d.hasOwnProperty(e)&&(a[e]=d[e])}return a}function b(a){return document.getElementById(a)}function c(a){return a.bind.apply(a,G.call(arguments,1))}function d(a,b,c){function d(){a(),f||(e=D(d,b))}var e,f;return c&&a(),e=D(d,b),function(){f=!0,E(e)}}function e(a){a.stopPropagation?a.stopPropagation():a.cancelBubble=!0,a.preventDefault?a.preventDefault():a.returnValue=!1}function f(a){a.preventDefault?a.preventDefault():a.returnValue=!1}function g(a,b,c,d){b&&(b.addEventListener?b[a?"addEventListener":"removeEventListener"](c,d,!1):b[a?"attachEvent":"detachEvent"]("on"+c,d))}function h(a){return a&&1==a.nodeType}function i(a,b){var c=[],d=0;if("string"==typeof a)c.push([a,b]),d+=b;else for(var e in a)a.hasOwnProperty(e)&&(c.push([e,a[e]]),d+=a[e]);for(var f=0,g=c.length;g>f;f++)c[f]=c[f].join(":")}function j(a){function b(a){var b,c,d=parseInt(1e9*Math.random(),10);(b=a.match(/^(?:cl([bn])|([adgin]))(\d+)(?:sz(\d+))?/))&&(b[1]?c="s"+b[1]:"n"==b[2]?c="nc":"i"==b[2]?(d=null,c=b[2]):c=b[2],c+=b[3]+".gif?",b[4]&&(c+="sz="+b[4]),d&&(c+="&rnd="+d),(new Image).src="//r.my.com/"+c)}for(var c=a.split(","),d=c.length;d--;)b(c[d])}function k(a){g(1,a,"mousedown",function(a){a||(a=window.event);for(var b=a.target||a.srcElement;b;)b.getAttribute&&b.getAttribute("xname")&&j(b.getAttribute("xname")),b=b.parentNode})}function l(a,b){var c;c=h(b)?function(a,b){return a==b}:function(a,b){return n(a,b)};for(var d=a.parentNode;d;){if(c(d,b))return d;d=d.parentNode}return!1}function m(a){for(;a.firstChild;)a.removeChild(a.firstChild)}function n(a,b){return h(a)&&H?a.classList.contains(b):!!~(" "+a.className+" ").indexOf(" "+b+" ")}function o(a,b){h(a)&&(H?a.classList.add(b):!n(a,b)&&(a.className+=" "+b))}function p(a,b){h(a)&&(H?a.classList.remove(b):a.className=a.className.replace(new RegExp("(^|\\s)"+b+"(\\s|$)","g"),"$1"))}function q(a,b){return h(a)?H?a.classList.toggle(b):n(a,b)?(p(a,b),!1):(o(a,b),!0):void 0}function r(a,b){for(var c in b)Object.prototype.hasOwnProperty.call(b,c)&&!Object.prototype.hasOwnProperty.call(a,c)&&(a[c]=b[c]);return a}function s(a,b,c){function d(e){(c&&e.propertyName===c||!c)&&(g(0,a,B.Modernizr.transitionend,d),b())}var e;return c&&(c=B.Modernizr.prefixedCss(c)),B.Modernizr.csstransitions?g(1,a,B.Modernizr.transitionend,d):e=B.setTimeout(function(){b()},0),{prop:c,callback:b,node:a,cancel:function(){e?clearTimeout(e):g(0,a,B.Modernizr.transitionend,d)}}}function t(a){return a||(a={}),"function"!=typeof a.fn?!1:a}function u(a,b,c){function d(b){if(k&&(b.propertyName||b.originalEvent.propertyName)===k||!k){if(h)return;h=!0,clearTimeout(f),B.$(a).unbind(B.Modernizr.transitionend,d),j.fn()}}function e(){n||(clearTimeout(g),clearTimeout(f),B.$(a).unbind(B.Modernizr.transitionend,d),n=!0)}c||(c={});var f,g,h,i=c.before&&(c.before=t(c.before)),j=c.after&&(c.after=t(c.after)),k=j&&j.prop&&B.Modernizr.prefixedCss(j.prop),l=B.Modernizr.prefixed("transitionDuration"),m=l&&B.$(a).css(l);m&&(m=m.indexOf("ms")>-1?parseFloat(m):1e3*parseFloat(m)),i&&i.fn(),g=setTimeout(function(){b()},B.Modernizr.csstransitions?20:0),j&&(B.Modernizr.csstransitions?(B.$(a).bind(B.Modernizr.transitionend,d),m&&(f=setTimeout(function(){d(k?{propertyName:k}:void 0)},m))):f=setTimeout(function(){j.fn()},0));var n=!1;return{cancel:e}}function v(){this._invocations=[],this._fn=null,this._context=null}function w(){}function x(){function a(){c.appendChild(b)}var b=document.createElement("script"),c=document.getElementsByTagName("head")[0];b.async="async",b.defer="defer",b.type="text/javascript",b.charset="utf-8";var d=-1==location.href.indexOf("PMDebug")?".min":"";b.src=A.settings.staticDir+(A.settings.noCss?"nocss":"external")+d+".js","opera"in window&&"complete"!==document.readyState?window.addEventListener("DOMContentLoaded",function(){a()},!1):a()}var y=window.__PH&&__PH.cookie&&"1"===__PH.cookie.s.getGlobal("s_debug"),z=y&&window.console||{};if(z.log=y&&z.log||function(){},z.time=y&&z.time||function(){},z.timeEnd=y&&z.timeEnd||function(){},z.time("portal-menu.inline.js"),!window.__PM){var A=window.__PM={},B={};A.settings=window.__PMS||{},A.settings.staticDir="//img.imgsmail.ru/pm/1.0.6/",A.settings.noCss=!1,A.settings.rootClass="portal-menu",A.settings.cssPrefix="pm",A._=B,function(a,b,c){function d(a,b){return typeof a===b}function e(){var a,b,c,e,f,g,h;for(var i in u){if(a=[],b=u[i],b.name&&(a.push(b.name.toLowerCase()),b.options&&b.options.aliases&&b.options.aliases.length))for(c=0;c<b.options.aliases.length;c++)a.push(b.options.aliases[c].toLowerCase());for(e=d(b.fn,"function")?b.fn():b.fn,f=0;f<a.length;f++)g=a[f],h=g.split("."),1===h.length?w[h[0]]=e:(!w[h[0]]||w[h[0]]instanceof Boolean||(w[h[0]]=new Boolean(w[h[0]])),w[h[0]][h[1]]=e),t.push((e?"":"no-")+h.join("-"))}}function f(a){var b=y.className,c=w._config.classPrefix||"";if(z&&(b=b.baseVal),w._config.enableJSClass){var d=new RegExp("(^|\\s)"+c+"no-js(\\s|$)");b=b.replace(d,"$1"+c+"js$2")}w._config.enableClasses&&(b+=" "+c+a.join(" "+c),z?y.className.baseVal=b:y.className=b)}function g(a,b){if("object"==typeof a)for(var c in a)D(a,c)&&g(c,a[c]);else{a=a.toLowerCase();var d=a.split("."),e=w[d[0]];if(2==d.length&&(e=e[d[1]]),"undefined"!=typeof e)return w;b="function"==typeof b?b():b,1==d.length?w[d[0]]=b:(!w[d[0]]||w[d[0]]instanceof Boolean||(w[d[0]]=new Boolean(w[d[0]])),w[d[0]][d[1]]=b),f([(b&&0!=b?"":"no-")+d.join("-")]),w._trigger(a,b)}return w}function h(a){return a.replace(/([a-z])-([a-z])/g,function(a,b,c){return b+c.toUpperCase()}).replace(/^-/,"")}function i(){return"function"!=typeof b.createElement?b.createElement(arguments[0]):z?b.createElementNS.call(b,"http://www.w3.org/2000/svg",arguments[0]):b.createElement.apply(b,arguments)}function j(){var a=b.body;return a||(a=i(z?"svg":"body"),a.fake=!0),a}function k(a,c,d,e){var f,g,h,k,l="modernizr",m=i("div"),n=j();if(parseInt(d,10))for(;d--;)h=i("div"),h.id=e?e[d]:l+(d+1),m.appendChild(h);return f=i("style"),f.type="text/css",f.id="s"+l,(n.fake?n:m).appendChild(f),n.appendChild(m),f.styleSheet?f.styleSheet.cssText=a:f.appendChild(b.createTextNode(a)),m.id=l,n.fake&&(n.style.background="",n.style.overflow="hidden",k=y.style.overflow,y.style.overflow="hidden",y.appendChild(n)),g=c(m,a),n.fake?(n.parentNode.removeChild(n),y.style.overflow=k,y.offsetHeight):m.parentNode.removeChild(m),!!g}function l(a,b){return!!~(""+a).indexOf(b)}function m(a,b){return function(){return a.apply(b,arguments)}}function n(a,b,c){var e;for(var f in a)if(a[f]in b)return c===!1?a[f]:(e=b[a[f]],d(e,"function")?m(e,c||b):e);return!1}function o(a){return a.replace(/([A-Z])/g,function(a,b){return"-"+b.toLowerCase()}).replace(/^ms-/,"-ms-")}function p(b,d){var e=b.length;if("CSS"in a&&"supports"in a.CSS){for(;e--;)if(a.CSS.supports(o(b[e]),d))return!0;return!1}if("CSSSupportsRule"in a){for(var f=[];e--;)f.push("("+o(b[e])+":"+d+")");return f=f.join(" or "),k("@supports ("+f+") { #modernizr { position: absolute; } }",function(a){return"absolute"==getComputedStyle(a,null).position})}return c}function q(a,b,e,f){function g(){k&&(delete I.style,delete I.modElem)}if(f=d(f,"undefined")?!1:f,!d(e,"undefined")){var j=p(a,e);if(!d(j,"undefined"))return j}for(var k,m,n,o,q,r=["modernizr","tspan"];!I.style;)k=!0,I.modElem=i(r.shift()),I.style=I.modElem.style;for(n=a.length,m=0;n>m;m++)if(o=a[m],q=I.style[o],l(o,"-")&&(o=h(o)),I.style[o]!==c){if(f||d(e,"undefined"))return g(),"pfx"==b?o:!0;try{I.style[o]=e}catch(s){}if(I.style[o]!=q)return g(),"pfx"==b?o:!0}return g(),!1}function r(a,b,c,e,f){var g=a.charAt(0).toUpperCase()+a.slice(1),h=(a+" "+F.join(g+" ")+g).split(" ");return d(b,"string")||d(b,"undefined")?q(h,b,e,f):(h=(a+" "+C.join(g+" ")+g).split(" "),n(h,b,c))}function s(a,b,d){return r(a,c,c,b,d)}var t=[],u=[],v={_version:"3.0.0",_config:{classPrefix:"pm-",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(a,b){var c=this;setTimeout(function(){b(c[a])},0)},addTest:function(a,b,c){u.push({name:a,fn:b,options:c})},addAsyncTest:function(a){u.push({name:null,fn:a})}},w=function(){};w.prototype=v,w=new w;var x=v._config.usePrefixes?" -webkit- -moz- -o- -ms- ".split(" "):[];v._prefixes=x;var y=b.documentElement,z="svg"===y.nodeName.toLowerCase(),A="Moz O ms Webkit",C=v._config.usePrefixes?A.toLowerCase().split(" "):[];v._domPrefixes=C;var D;!function(){var a={}.hasOwnProperty;D=d(a,"undefined")||d(a.call,"undefined")?function(a,b){return b in a&&d(a.constructor.prototype[b],"undefined")}:function(b,c){return a.call(b,c)}}(),v._l={},v.on=function(a,b){this._l[a]||(this._l[a]=[]),this._l[a].push(b),w.hasOwnProperty(a)&&setTimeout(function(){w._trigger(a,w[a])},0)},v._trigger=function(a,b){if(this._l[a]){var c=this._l[a];setTimeout(function(){var a,d;for(a=0;a<c.length;a++)(d=c[a])(b)},0),delete this._l[a]}},w._q.push(function(){v.addTest=g});var E=function(){var b=a.matchMedia||a.msMatchMedia;return b?function(a){var c=b(a);return c&&c.matches||!1}:function(b){var c=!1;return k("@media "+b+" { #modernizr { position: absolute; } }",function(b){c="absolute"==(a.getComputedStyle?a.getComputedStyle(b,null):b.currentStyle).position}),c}}();v.mq=E;var F=(v.testStyles=k,v._config.usePrefixes?A.split(" "):[]);v._cssomPrefixes=F;var G=function(b){var d,e=x.length,f=a.CSSRule;if("undefined"==typeof f)return c;if(!b)return!1;if(b=b.replace(/^@/,""),d=b.replace(/-/g,"_").toUpperCase()+"_RULE",d in f)return"@"+b;for(var g=0;e>g;g++){var h=x[g],i=h.toUpperCase()+"_"+d;if(i in f)return"@-"+h.toLowerCase()+"-"+b}return!1};v.atRule=G;var H={elem:i("modernizr")};w._q.push(function(){delete H.elem});var I={style:H.elem.style};w._q.unshift(function(){delete I.style}),v.testAllProps=r;var J=v.prefixed=function(a,b,c){return 0===a.indexOf("@")?G(a):(-1!=a.indexOf("-")&&(a=h(a)),b?r(a,b,c):r(a,"pfx"))};w.addTest("requestanimationframe",!!J("requestAnimationFrame",a),{aliases:["raf"]}),v.testAllProps=s,w.addTest("backgroundsize",s("backgroundSize","100%",!0)),w.addTest("boxshadow",s("boxShadow","1px 1px",!0)),w.addTest("csstransitions",s("transition","all",!0)),e(),f(t),delete v.addTest,delete v.addAsyncTest;for(var K=0;K<w._q.length;K++)w._q[K]();B.Modernizr=w}(window,document);var C="{{ project {{",D=window.setTimeout,E=window.clearTimeout,F=b(A.settings.rootClass);Array.isArray||(Array.isArray=function(a){return"[object Array]"===Object.prototype.toString.call(a)});var G=Array.prototype.slice;void 0===Function.prototype.bind&&(Function.prototype.bind=function(a){var b=G.call(arguments,1),c=this;return function(){return c.apply(a,b.concat(G.call(arguments,0)))}});var H=B.Modernizr.classlist;Array.prototype.indexOf||(Array.prototype.indexOf=function(a){for(var b=this,c=0,d=b.length;d>c;c++)if(b[c]==a)return c;return-1}),a(B,{extend:a,animate:u,project:C,setTimeout:function(a,b){return D(a,b)},clearTimeout:function(a){return E(a)},rootNode:F,byId:b,bind:c,radar:i,setIntervalByTimeout:d,eventCancel:e,eventPreventDefault:f,event:g,isNode:h,emptyNode:m,count:j,countEl:k,hasParent:l,hasClass:n,removeClass:p,addClass:o,toggleClass:q,animateEnd:s,append:r}),B.Modernizr.prefixedCss=function(){var a=B.Modernizr.prefixed.apply(this,arguments);return a&&a.replace(/([A-Z])/g,function(a,b){return"-"+b.toLowerCase()}).replace(/^ms-/,"-ms-")},B.Modernizr.addTest("transitionend",function(){var a,b=document.createElement("fakeelement"),c={OTransition:"otransitionend",MSTransition:"msTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd",transition:"transitionend"};for(a in c)if(void 0!==b.style[a])return b=null,c[a]}),B.Modernizr.addTest("dpr",function(){return window.devicePixelRatio}),B.Modernizr.addTest("retina",function(){return B.Modernizr.dpr>1&&B.Modernizr.backgroundsize}),B.Modernizr.addTest("ie",function(){return navigator.userAgent.indexOf("MSIE")>0}),B.Modernizr.addTest("requestAnimationFrame",function(){return B.Modernizr.prefixed("requestAnimationFrame",window)}),B.extend(B,{}),B.SCookie=window.__PH&&window.__PH.cookie&&window.__PH.cookie.s,v.prototype={getQuery:function(){var a=B.bind(this.invoke,this);return a.replace=B.bind(this.replace,this),a},invoke:function(){this._fn?this._fn.apply(this._context,arguments):this._invocations.push(arguments)},replace:function(a,b){if(!this._fn){b=b||window;for(var c=0,d=this._invocations.length;d>c;c++)a.apply(b,this._invocations[c]);delete this._invocations,this._fn=a,this._context=b}}},B.DeferredQuery=v,w.prototype={emit:function(a,b,c){function d(){--g||c&&c()}void 0==b&&(b={});var e=this.listeners(a);if(!e)return void(c&&c());e=e.slice();for(var f=new w.Event(a,b),g=e.length,h=0,i=g;i>h;h++){var j=e[h];if("function"==typeof j)try{j.call(this,f,d)}catch(k){d()}}},listeners:function(a){return this._events&&this._events[a]&&this._events[a].length&&this._events[a]},addListener:function(a,b){if("function"!=typeof b)throw new Error("invalid argument");return this._events||(this._events={}),this._events[a]||(this._events[a]=[]),this._events[a].push(b),this.emit("newlistener",{type:a,listener:b}),this},once:function(a,b){function c(){this.removeListener(a,c),b.apply(this,arguments)}if("function"!=typeof b)throw new Error("invalid argument");return this.on(a,c),this},removeListener:function(a,b){if("function"!=typeof b)throw new Error("invalid argument");if(!this._events[a])return this;var c=this._events[a],d=c.indexOf(b);return 0>d?this:(c.splice(d,1),0===c.length&&delete this._events[a],this)}},w.prototype.on=w.prototype.addListener,w.Event=function(a,b){this.type=a,this.data=b},w.relay=function(a,b,c){for(var d=0,e=a.length;e>d;d++){var f=a[d];b.on(f,function(a){return function(){c.emit(a)}}(f))}},B.EventEmitter=w,B.extend(A,B.EventEmitter.prototype,{}),A.isLoaded=function(){return A._loaded||!1},A.whenLoaded=function(a){A.isLoaded()?a():A.on("load",a)},B.SCookie=window.__PH&&window.__PH.cookie&&window.__PH.cookie.s,A.regionSelector=new B.EventEmitter,B.extend(A.regionSelector,{show:(new B.DeferredQuery).getQuery(),hide:(new B.DeferredQuery).getQuery(),enabled:function(){return A.settings.regionsSelectorEnabled}}),A.draw=(new B.DeferredQuery).getQuery(),A.getItems=(new B.DeferredQuery).getQuery(),A.batchActions=(new B.DeferredQuery).getQuery(),B.initInline=function(){B.SCookie=window.__PH&&window.__PH.cookie&&window.__PH.cookie.s,B.addClass(B.rootNode,A.settings.rootClass+"_boxshadow-"+(B.Modernizr.boxshadow?"yes":"no")),A.settings.regionsSelectorEnabled=!!window.__PortalRegions,B.SCookie||(A.settings.regionsSelectorEnabled=!1),A.settings.submenu&&(document.getElementById(A.settings.rootClass+"__submenu").style.display=""),B.rootNode.className=B.rootNode.className},B.rootNode?B.initInline():A.init=(new B.DeferredQuery).getQuery(),x(),z.timeEnd("portal-menu.inline.js")}}).call(window);</script> <script type="text/javascript"> var prefix = "\/help\/en"; var filename = "\/help\/en\/code\/ajax"; var urlRu = filename.replace('en', 'ru') + window.location.search + window.location.hash; var urlEn = filename.replace('ru', 'en') + window.location.search + window.location.hash; var menu = { title: "English", name: "langSwitcher", alwaysVisible: true, type: "button", dropdown: { items: [ { text: "Русский", href: urlRu, attrs: {'data-lang-switcher': 'ru'} }, { text: "English", href: urlEn, attrs: {'data-lang-switcher': 'en'} } ] } }; var urlLang = filename.split('/')[2]; menu.dropdown.items[urlLang === "ru" ? 0 : 1].current = true; menu.iconCls = "pm-uh-tmr_lang_" + urlLang; var oPortalHeadline = { logo: { image: '\/img\/32_@top_eng_w.png', image_x2: '\/img\/32_@top_eng_w@2.png', width: 87 , title: 'Рейтинг Mail.Ru', href: '/' }, toolbar: { items: [ { type: 'spacer', flex: 1 }, { type: 'group', collapsible: true, name: 'mainMenu', items: [ menu ] } ] } }; __PM.draw(oPortalHeadline); </script><div class="help-body"> <div class="columns"> <div class="main_column"> <div class="inner2 help-content"><blockquote id="nolang-block" data-lang="en" style="display: none" > <p><b>Извините, русская версия еще не доступна. Вы можете прочитать английскую версию ниже.</b></p> </blockquote><h1>Installing counter on AJAX-, SPA-, Flash sites</h1> <p>To make counter work properly you should do several steps:</p> <ol> <li><p>Get and install the counter code on the site as described in other help articles.</p></li> <li><p>Identify the cases and events needed to be treated as a separate page view or goal achievement.</p></li> <li><p>You also need to define url and referer for this view. By default will be used default url and referer from <code>location.href</code> and <code>document.referrer</code>.</p></li> <li><p>Insert additional code into places where a new view is initiated. You should call <code>pageView</code> or <code>reachGoal</code> method for <code>_tmr</code> object to send new pageview or target reach respectively.</p></li> </ol> <p>Calling a method for AJAX sites (you need to take only one option depending on the sending url or referer):</p> <pre><code class="language-js">_tmr.pageView({ id: "counter ID" }); </code></pre> <p>or with url</p> <pre><code class="language-js">_tmr.pageView({ id: "counter ID", url: "URL" }); </code></pre> <p>or with url and referrer</p> <pre><code class="language-js">_tmr.pageView({ id: "counter ID", url: "URL", referrer: "REFERRER" }); </code></pre> <p>If you are not sure is this counter code already inserted on the page and loaded, you can use a safer version of pageview sending:</p> <pre><code class="language-js">var _tmr = window._tmr || (window._tmr = []); _tmr.push({ id: "36383", type: "pageView", url: "URL" }); </code></pre> <p>For SPA sites you can often find a method in which you can insert code similar to the code for AJAX sites. For example in AngularJS you can use the <code>$viewContentLoaded</code> or <code>$routeChangeSuccess</code></p> <pre><code class="language-js">function MyCtrl($scope, $location, $window) { $scope.$on('$viewContentLoaded', function(event) { $window._tmr.push({id:"counter ID", type: "pageview", url: $location.url() }); }); } </code></pre> <p>or</p> <pre><code class="language-js">app.run(function ($rootScope, $location) { $rootScope.$on('$routeChangeSuccess', function(){ _tmr.push({id:"counter ID", type: "pageview", url: $location.url() }); }); }); </code></pre> <blockquote> <p>If you use GTM to insert the code and your AJAX, SPA site changes the URL of the page on new view, then instead of inserting the above code you can specify the “Change in History” trigger in addition to the “Page View” trigger.</p> </blockquote> <p>Calling a method for Flash sites with ActionScript2 (Flash version is less than 9.0):</p> <pre><code class="language-js">getURL("javascript:_tmr.pageView({id: \"counter ID\", url: \"URL\" })"); </code></pre> <p>Calling a method for Flash sites with ActionScript3 (Flash 9.0 or later):</p> <pre><code class="language-js">navigateToURL(new URLRequest("javascript:_tmr.pageView({id: \"counter ID\", url: \"URL\" })"), "_self"); </code></pre> </div> </div> <div class="left_column"> <div class="inner"> <div class="overlay-wrapper"> <div id="menu-overlay" class="blank-overlay"> <div class="menu-border"><div class="help-header noselect"> <a href="/help/en/">Help — Top Mail.Ru</a> </div> <div class="menu-separator"></div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/rating">What is Top?</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/registration">Website registration</a> </div><div id="collapse-code" data-collapse="persist"> <div class="menu-element expandable noselect"> <a class="menu-link" href="/help/en/code">Install counter on your website</a> </div> <div class="submenu"><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/code/receive">Getting and installing code</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link active" href="/help/en/code/ajax">Installing counter on AJAX, SPA, Flash sites</a> </div><script type="text/javascript">openExpandable('\/help\/en\/code\/ajax')</script><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/code/gtm">Code Installation via GTM</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/code/https">Counter for HTTPS site</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/code/cdn">Alternative CDN</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/code/wordpress">Installing counter on WordPress site</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/code/ucoz">Installing counter on Ucoz site</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/code/bitrix">Installing counter on 1C-Bitrix</a> </div></div> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/data">Tracked data</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/passremind">Password recovery</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/mycounters">My counters</a> </div><div id="collapse-realtime" data-collapse="persist"> <div class="menu-element expandable noselect"> <a class="menu-link" href="/help/en/realtime">Real-Time reports</a> </div> <div class="submenu"><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/realtime/main">General information</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/realtime/informer">Informer on your site</a> </div></div> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/genderages">Demography</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/keywords">Search Queries</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/complex">Complex Reports</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/entrypoints">Entry Points</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/soclanding">Entry Points from Social Networks</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/returns">Returns</a> </div><div id="collapse-settings" data-collapse="persist"> <div class="menu-element expandable noselect"> <a class="menu-link" href="/help/en/settings">Counter settings</a> </div> <div class="submenu"><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/settings/permissions">Permissions</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/settings/goals">Goals</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/settings/sources">Sources</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/settings/slices">Slices</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/settings/domainlist">List of domain mirrors of the site</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/settings/changeurl">Changing website address</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/settings/processing">Processing</a> </div></div> </div><div id="collapse-api" data-collapse="persist"> <div class="menu-element expandable noselect"> <a class="menu-link" href="/help/en/api">API</a> </div> <div class="submenu"><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/api/modules">Python and PHP modules</a> </div></div> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/legal">License agreement</a> </div><div class="menu-element menu-leaf noselect"> <a class="menu-link" href="/help/en/policy">Privacy policy</a> </div></div> </div> </div> </div> </div> </div> </div> </body> </html>