Google Analytics 를 뽀개려면 살펴봐야 할 Tracking Code

>> Go to next page  USERS FLOW IN GOOGLE ANALYTICS after reading this page.

GA 를 뽀개려면 지나치지 않고 "Tracking Code" 

살펴봐야 할 것이라는 생각이 들어 아래 Source URL 을 살펴봅니다. (필요한 부분만 한글화)

 

Source URL

http://stackoverflow.com/questions/22716542/google-analytics-code-explanation

First of all, I would pass this through a beautifier, e.g. http://jsbeautifier.org/ (function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-xxxxxxxx-x', 'xxxxxx.com'); ga('send', 'pageview'); After that lets evaluate the closure (function (i, s, o, g, r, a, m) { ... })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); by replacing each of the named parameters:  i, s, o, g, r with their corresponding values  window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga' i 는 window s 는 document o 는 'script' g 는 '//www.google-analytics.com/analytics.js' r 은 'ga'  Note that a and m parameters do not have input values and are more like result variables. a and m 파라미터는 입력받는 값이 아니라 결과 변수와 같은 거라고 생각하면 된다.  This would be roughly (not bothering about variable scope, etc.) equivalent to (function (i, s, o, g, r, a, m) { window['GoogleAnalyticsObject'] = 'ga'; window['ga'] = window['ga'] || function () { (window['ga'].q = window['ga'].q || []).push(arguments) }, window['ga'].l = 1 * new Date(); a = document.createElement('script'), m = document.getElementsByTagName('script')[0]; a.async = 1; a.src = '//www.google-analytics.com/analytics.js'; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-xxxxxxxx-x', 'xxxxxx.com'); ga('send', 'pageview'); In short what this code does in essence, is that it creates a new script tag with the line: 한 마디로 이 코드는 새로운 스크립트 태그를 생성하는 것이다.  a = document.createElement('script'), Then finds the first script tag 그러고는 첫번째 스크립트 태그를 가져와 m 에 담는다.  m = document.getElementsByTagName('script')[0]; Then it sets the newly created script tag to asynchronous execution (More insight on async execution could be obtained at Understanding Asynchronous Code in Layman's terms should you need it) 새로이 만들어진 스크립트는 동기화 실행되도록 설정한다. a.async = 1; 1 in the line above is equivalent to true, it is used 1 just because it is shorter. a 가 동기화 수행되도록 설정하는 것이다.  (설정값 1 은 참(true) 즉 Asynchronouse = Yes 라는 의미이다.)  After that the src of this script tag is set a.src = '//www.google-analytics.com/analytics.js'; Note that above no protocol (http or https) is specified in the URL. This would allow for the script to be loaded in the current browser protocol. URL 에 프로토콜을 명시하지 않았기 때문에 프로토콜의 제약없이 스크립트가 로드될 수 있다. And finally it is inserted before the first script tag, so the browser could start loading it. 첫번째 스크립트 태그 전에 인서트하면 브라우저는 로딩을 시작할 수 있게 된다. m.parentNode.insertBefore(a, m) So to summarize:                                                                        간단히 말하자면 We create a script tag                                                             스크립트 태그를 만들어서 We set it to load asynchronously async=true                                동기화 되도록 설정한 후 We insert this script tag, before the first script tag in the document  document 의 제일 앞에 둔다 Specifics related to google analytics. window['ga'] = window['ga'] || function () { (window['ga'].q = window['ga'].q || []).push(arguments) }, window['ga'].l = 1 * new Date(); defines global function named ga that pushes its arguments in a queue Array (named q)  q(queue) 배열에 arguments 를 push 하는 ga 라는 글로벌 펑션(기능) 을 정의한다. Then with the lines  it pushes these "events" in the queue Array. 아래 소스 라인으로 q 배열에 '이벤트' 들을 push 한다. ga('create', 'UA-xxxxxxxx-x', 'xxxxxx.com'); ga('send', 'pageview'); When the script is loaded, it checks the value of GoogleAnalyticsObject, which earlier was set to point to the name of ga with the line 스크립트가 로딩되면 GoogleAnalyticsObject 의 값을 체크한다.  window['GoogleAnalyticsObject'] = 'ga'; Hope this helps >> Go to next page  USERS FLOW IN GOOGLE ANALYTICS after reading this page.