워드프레스에 구글 애널리틱스 코드를 효과적으로 추가하는 방법

구글 애널리틱스 추적 코드를 추가하는 간편한 방법

이전 글에서 구글 애널리틱스 코드를 워드프레스에 추가하는 방법을 살펴보았습니다.

가장 편리한 방법은 테마 또는 SEO 플러그인에서 제공하는 옵션을 사용하여 Google Analytics 코드를 추가하는 것입니다.

가령 Avada를 비롯한 대부분의 유료 테마에서는 구글 애널리틱스 코드를 추가할 수 있는 옵션을 제공합니다.  또, 많은 사용자가 SEO(검색엔진최적화)를 위해 설치할 수 있는 All in One SEO나 Yoast SEO 같은 플러그인에서도 추적 코드를 추가할 수 있는 옵션이 제공됩니다.

하지만 이런 방법으로 코드를 추가할 경우 테마에 따라 사이트 속도가 미세하나마 느려질 수 있습니다. 그리고 구글 애널리틱스 코드가 페이지 소스에서 확인이 가능해집니다.

사이트에 방문자 수가 많아지면 구글 애널리틱스에 리퍼러 스팸이 통계에 잡혀서 통계가 부정확해질 수 있습니다. 이런 Referrer spam(혹은 Referrral spam이라고도 함)을 차단하려면 필터 규칙을 추가하여 통계에서 제외시킬 수 있습니다.

이런 필터를 적용해도 최근에는 다음 그림과 같이 이 블로그에 없는 페이지가 통계에 잡혔습니다.

워드프레스에 구글 애널리틱스 코드를 효과적으로 추가하는 방법 5

대부업등록 요건이라는 생뚱맞은 페이지를 누가 방문하고 있는 것처럼 통계에 잡혔습니다. 이뿐만 아니라 대부업, 보험 등과 관련된 키워드로 계속 바꾸어가면서, 그것도 생전 들어본 적이 없는 이상한 표현으로 표시되는 것이었습니다. 이런 문제를 혹시 겪고 계시다면 다음 글에 제시된 방법을 따라 하면 문제가 해결될 것입니다.

근본적으로는 페이지 소스에 구글 애널리틱스 코드가 표시되지 않으면 더 안전하지 않을까 개인적으로 추측해봅니다.

구글 애널리틱스를 플러그인을 사용하지 않고 추가하는 방법

조금 번거롭더라도 js 파일을 enqueue하는 방법을 사용하면 속도와 보안면에서 도움이 되지 않을까 생각됩니다. (순전히 개인적인 생각입니다.)

방법은 구글 애널리틱스 코드를 js 파일로 저장한 후에 테마의 함수 파일에서 js 파일을 로드(enqueue)하는 것입니다. 기본적인 단계는 다음과 같습니다.

  1. FTP나 File Manager를 사용하여 테마 폴더로 접속합니다.
  2. js 파일을 만들고 구글 애널리틱스 추적 코드를 추가합니다.
  3. 함수 파일에서 js 파일을 enqueue합니다.

먼저 FTP를 통해 FTP 서버에 접속하여 테마 폴더로 이동합니다. 차일드 테마를 만들어서 작업하시기 바랍니다. 차일드 테마를 만드는 방법은 여러 가지가 있는데, 간단히 플러그인을 사용할 수 있습니다("원클릭으로 간편하게 차일드 테마 만들기" 참고).

블루호스트나 Siteground 같은 해외 호스팅을 사용하는 경우 cPanel에서 File Manager를 사용하여 웹호스팅 서버에 접속하여 작업할 수 있습니다.

워드프레스에 구글 애널리틱스 코드를 효과적으로 추가하는 방법 6

File Manager를 클릭한 후에 테마 폴더(차일드 테마가 설치된 폴더)로 이동한 후에 메뉴에서 New File(새 파일 만들기)을 클릭하여 파일을 만들 수 있습니다.

워드프레스에 구글 애널리틱스 코드를 효과적으로 추가하는 방법 7

파일 매니저를 사용하면 많은 파일을 압축하여 업로드한 후에 압축을 해제하거나 폴더를 압축하여 다운로드할 수 있습니다. 잘 활용하면 시간을 절약할 수 있습니다.

FTP나 파일 매니저에서 새로운 파일을 만들었으면 파일 이름을 원하는 대로 지정합니다. 예를 들어, analyticstracking.js와 같이 지정할 수 있습니다.

그리고 구글 애널리틱스 페이지에서 추적 코드를 확인하여 이 파일에 복사해 넣습니다. 추적 코드를 확인하는 방법은 워드프레스에 Google 애널리틱스 추가하기에서 "구글 애널리틱스 추적 ID 확인하기" 부분을 참고해보세요.

추적 코드는 다음과 비슷합니다.

<script>
(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','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-xxxxxxx-1', 'auto');
ga('send', 'pageview');

</script>

여기에서 <script>와 </script>를 삭제하고 저장합니다.

다음으로 테마 함수 파일(functions.php)에 다음과 같은 코드를 추가합니다.

// Function to add analyticstracking.js to the site
function add_google_analytics() {
// Register analyticstracking.js file (Google Analytics)
wp_register_script(
'google-analytics', // handle name referred to in the "wp_enqueue_script" call below
get_stylesheet_directory_uri() . '/analyticstracking.js', // location of your file
false, // no dependencies
'1.0', // version number
true // if true, the script is placed before the end tag
);
// Enqueue the registered script file
wp_enqueue_script('google-analytics');
}
add_action('wp_enqueue_scripts', 'add_google_analytics');
// Reference: HOW TO ADD GOOGLE ANALYTICS TRACKING CODE TO YOUR WORDPRESS SITE WITHOUT A PLUGIN (플러그인을 사용하지 않고 구글 애널리틱스 코드를 워들프레스에 추가하는 방법)

이제 페이지 소스를 확인해보면 구글 애널리틱스 추적 코드가 소스에 포함되어 있지 않을 것입니다. 페이지 소스를 보려면 구글 크롬의 경우 페이지에서 오른쪽 마우스 버튼을 클릭하여 "페이지 소스 보기"를 선택하면 됩니다.

워드프레스에 구글 애널리틱스 코드를 효과적으로 추가하는 방법 8

그런 다음 Ctrl + F를 눌러 검색해볼 수 있습니다. 가령 UA-로 검색해보면 구글 애널리틱스 코드가 소스에 포함되어 있는지 여부를 확인해볼 수 있습니다.

위와 같은 작업에 익숙하지 않는 경우에는 테마나 플러그인에서 제공하는 옵션을 사용하면 됩니다.

참고:


4개 댓글

      1. 저보다 훨씬 크신 것 같은데요ㅎㅎ

        Chris Mok님처럼 워드프레스에 대해 잘 알고 있는 개발자가 우리나라에서는 별로 없을 것 같습니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.