구글 문서에 의하면 구글 태그 관리자는 웹사이트 또는 모바일 앱에서 코드 및 태그라고 통칭되는 관련 코드 조각을 쉽고 빠르게 업데이트할 수 있는 태그 관리 시스템입니다(참고). 이 글에서는 워드프레스에 구글 태그 관리자 코드 추가 방법에 대해 살펴보겠습니다.
특히 구글 애드센스 무효 트래픽 때문에 IP 주소를 추적하고자 하는 분들이 계십니다. 구글 애드센스 무효 트래픽 IP 추적을 위해서는 구글 태그 관리자와 구글 애널리틱스를 연동해야 한다고 하네요. 관련 문서를 살펴보니 <head> 부분에 추가할 코드와 여는 <body> 태그 바로 뒤에 추가할 코드가 생성되는 것 같습니다. 그런 경우에도 아래의 방법으로 코드를 추가할 수 있을 것입니다.
워드프레스에 구글 태그 관리자 코드 추가하기
쉬운 방법: 플러그인 사용 - Google Tag Manager for WordPress
Google Tag Manager for WordPress 플러그인을 사용하면 GTM (Google Tag Manager) 컨테이너 코드 스니펫을 워드프레스 사이트에 배치하므로 수동으로 코드를 추가할 필요가 없습니다.
이 플러그인의 이름이 GTM4WP로 변경되었으며 2023년 10월 현재 70만 개가 넘는 워드프레스 사이트에 설치되어 사용되고 있고, 이 플러그인을 사용하려면 PHP 7.4 이상이 필요합니다.
이 플러그인은 페이지 메타 데이터와 사용자 정보를 데이터 레이어(Data Layer)에 푸쉬하여 GTM 설정을 보완한다고 합니다. Data Layer에 대한 자세한 정보는 구글의 공식 도움말 페이지를 참고해보세요.
이 플러그인의 일부 부분을 이용하기 위해서는 PHP 5.6 이상이 필요하며 PHP 7.0 이상을 권장합니다.
이 무료 플러그인은 현재 40만 개가 넘는 사이트에 설치되어 사용되고 있으며 사용자 평가도 좋은 편입니다. 워드프레스 관리자 페이지 > 플러그인 > 새로 추가하기에서 'Google Tag Manager for WordPress'를 검색하여 설치할 수 있습니다.
또는 WPCode 플러그인을 사용하여 코드는 헤더 부분과 푸터 부분에 추가할 수 있습니다.
수동으로 코드 추가하기
플러그인을 설치하지 않고 코드를 직접 추가하고 싶은 경우 워드프레스에서 제공하는 훅(Hook)을 이용할 수 있습니다.
구글 태그 관리자를 설정할 때 두 가지 코드가 생성될 것입니다. 하나는 <head>...</head> 사이트에 추가하고, 다른 하나는 여는 <body> 태그 바로 뒤에 추가합니다. <head>에 추가하는 코드는 wp_head 액션을 사용하여 <head> 부분에 추가할 수 있고, 여는 <body> 태그에 추가하는 코드는 wp_body_open 액션을 사용할 수 있습니다.
wp_body_open 후크는 워드프레스 5.2(2019년 5월)에서 도입되었습니다. 현재 워드프레스의 최신 버전이 5.6.2이므로 대부분의 사이트에서 작동할 것입니다. 만약 워드프레스 버전이 5.2 미만이라면 워드프레스, 테마, 플러그인을 최신 버전으로 업데이트하는 것을 고려하시기 바랍니다. 워드프레스 업데이트를 소홀히 하면 보안 문제가 발생하고 멀웨어에 감염되거나 사이트 해킹을 당할 수 있습니다.
워드프레스에 구글 태그 매니저 코드를 추가하려면 차일드 테마 내의 함수 파일(functions.php)에 다음과 같은 형식으로 코드를 추가하시기 바랍니다.
// Add Google Tag Manager code snippets before closing head tag
// head 부분에 구글 태그 매니저 추가
function ns_google_tag_manager_head() { ?>
<!-- Google Tag Manager -->
// 구글 태그 매니저 코드
<!-- End Google Tag Manager -->
<?php
}
add_action( 'wp_head', 'ns_google_tag_manager_head', 10 );
// Add Google Tag Manager no script support code snippets to body tag
// 여는 <body> 태그 바로 뒤에 구글 태그 매니저 no script 추가
function ns_google_tag_manager_body() { ?>
<!-- Google Tag Manager (noscript) -->
// 구글 태그 매니저 (noscript) 코드
<!-- End Google Tag Manager (noscript) -->
<?php
}
add_action('wp_body_open', 'ns_google_tag_manager_body', 1);반드시 차일드 테마를 만들어 작업해야 추후에 테마 업데이트 시 코드가 사라지지 않습니다. 테마 폴더는 /wp-content/themes/ 아래에 위치합니다(예: 아바다 테마의 경우 /wp-content/themes/Avada-child/).
마치며
이상으로 워드프레스에 구글 태그 매니저 코드 스니펫을 추가하는 방법에 대해 살펴보았습니다. FTP로 접속하여 테마 함수 파일에 코드를 추가하는 작업이 부담스러운 경우 위에서 소개하는 플러그인을 사용하면 쉽게 코드를 추가할 수 있을 것입니다.
경쟁이 치열한 키워드를 포스팅하는 블로그의 경우 무효 트래픽 공격을 많이 당하는 것 같습니다. 그런 경우 구글 애널리틱스와 구글 태그 매니저를 연동하여 IP 추적이 가능할 것입니다. 구글에 검색해보면 이와 관련된 글들을 찾아볼 수 있습니다. 이 블로그는 수익형 블로그가 아니기 때문에 무효 트래픽 공격을 당한 적은 없지만 무효 트래픽 공격 때문에 애드센스 광고 게재가 자주 중지되는 문제를 겪고 있다면 IP 주소 추적 조치를 고려해볼 수 있을 것 같습니다.
워드프레스에서는 무효 트래픽을 방지하는 플러그인이 있습니다. 부정 클릭이 염려되는 경우 "워드프레스용 애드센스 부정 클릭 방지 플러그인"에서 소개하는 플러그인을 설치하여 테스트해보시기 바랍니다. 다행히 플러그인이 활발히 업데이트되고 있고 사용자 평가도 괜찮네요.
플러그인을 설치하지 않고 코드를 직접 추가하고 싶은 경우 워드프레스에서 제공하는 훅(Hook)을 이용할 때, 외모에서 엘리먼트 추가해서 head와 body를 위한 후크를 추가하는 것을 한 다음에,
추가로, 차일드 테마 내의 함수 파일(functions.php)에 위의 형식의 코드 넣는 것도 같이 하는 건가요?
두 가지가 같은 기능을 하는 것 같기도 해서요.
엘리먼트 추가로 2가지 후크를 추가하는 것과,
차일드 테마에 위의 형식의 코드를 넣는 것을
둘 다 해줘야 하나요? 하나만 하면 되나요?
2가지의 차이는 뭔가요?
수동으로 하는 경우 테마 함수 파일에 코드를 추가하시면 됩니다. 코드는 두 가지가 있으므로 두 가지 모두를 추가해 주세요.
감사합니다
블로그를 방문해주셔서 감사합니다.정보가 도움이 되셨기를 바랍니다.