고객 지원 문의

이메일로 답장드리며, 보통 이틀 안에 회신합니다.

Google reCAPTCHA가 이 제출을 악용 여부에 대해 확인하며, 이 과정에서 데이터가 Google로 전송됩니다. 스크립트는 이 양식을 열 때만 불러옵니다.

← 전체 글

구글 태그 관리자로 Stats4U 카운터 넣기

· Lukas Wojcik

콘텐츠와 검토에 관하여

이 글의 내용

블로그에 2015년에 쓴 안내가 있습니다. 그 화면 사진 속 태그 관리자는 이제 그렇게 생기지 않았고, 일곱 단계 가운데 하나인 document.write 표시는 아예 필요 없어졌습니다. 이 글이 그것을 대신합니다.

옛 안내가 포기했던 물음에도 답합니다. 그 글은 Stats 그림의 위치를 제어할 수 없다는 이유로 태그 관리자에서 보이지 않는 카운터를 권했습니다. 제어할 수 있습니다. 이 글 아래쪽에 있습니다.

짧은 판본

태그 관리자에서 태그 → 새로 만들기 → 맞춤 HTML을 고르고, HTML 칸에 한 줄을 붙여 넣습니다:

20157 — 단계오늘3 — 칸과 트리거document.write 단계는 사라졌습니다 — 스크립트가 더는 쓰지 않습니다 
<script src="https://www.stats4u.net/s4u.js"
        data-id="YOUR-ID" data-style="981" async></script>

트리거는 모든 페이지로 둡니다. 그다음 컨테이너를 저장하고 게시합니다. data-id 속성에는 카운터 번호가 들어가며, 그 번호는 통계 페이지에 적혀 있습니다.

그것이 일의 전부입니다. 2015년에는 일곱 단계가 필요했던 곳에 이제 칸 셋과 트리거 하나입니다. document.write에 대해 표시할 것은 없습니다. 스크립트가 더는 쓰지 않기 때문입니다.

그것이 실제로 하는 일, 그리고 왜 맞는 선택이 아닐 수도 있는지

스크립트는 카운터를 페이지 안에서 자기 바로 뒤에 놓습니다. 손으로 쓴 HTML에 곧바로 붙여 넣었다면 그것이 딱 맞습니다. 코드가 있는 자리에 카운터가 나타납니다.

태그 관리자를 거치면 사정이 다릅니다. 놓이는 자리가 더는 자유로운 선택이 아니기 때문입니다. 컨테이너가 정하고, 그것은 대개 문서의 head 안이나 컨테이너 코드를 설치한 자리에 있습니다. 그래서 카운터는 거기에 끼워집니다. 바닥글도, 옆칸도 아니고, 태그 관리자가 태그를 밀어 넣은 자리입니다.

한편 보이지 않는 카운터라면 그것이 조금도 문제되지 않고, 그래서 옛 안내가 그것을 권했습니다. 디자인 980 은 아무것도 보여 주지 않고, 디자인 981 은 통계 페이지로 가는 작은 아이콘만 보여 줍니다. 그 경우 위의 짧은 판본으로 충분하고 이 글의 나머지는 선택 사항입니다.

보이는 카운터를 특정한 자리에 놓으려면 조금 더 필요합니다.

카운터가 나타날 자리 정하기

스크립트에는 옛 안내가 결코 언급하지 않은 두 번째 방식이 있습니다. data-id 속성 대신 목록을 받고, ID로 자리표시 요소를 찾습니다.

1단계 — 페이지에 자리표시자를, 카운터가 있어야 할 곳에 둡니다. 태그 관리자가 아니라 사이트 서식 자체에 넣습니다. 이 결정에서 빼내려는 것이 바로 태그 관리자이기 때문입니다:

<div id="s4u_cp0"></div>

2단계 — 태그 관리자에서 이것이 한 줄짜리를 대신합니다. 같은 맞춤 HTML 태그 종류입니다:

<script>
(function () {
  // No placeholder on this page? Then no counter, and no request either.
  if (!document.getElementById('s4u_cp0')) { return; }

  window.s4uid         = ['YOUR-ID'];
  window.s4u_paramsarr = [{ s4ustyleid: '100' }];

  var s = document.createElement('script');
  s.src = 'https://www.stats4u.net/s4u.js';
  document.head.appendChild(s);
})();
</script>

3단계 — 트리거를 바꿉니다. 여기서 사람들이 걸려 넘어집니다. 모든 페이지는 태그 관리자가 할 수 있는 한 이르게 실행되고, 그것은 자리표시자가 문서에 아직 없을 때인 경우가 많습니다. 내장 트리거 DOM Ready가 여기서 맞습니다. 카운터는 div 앞이 아니라 뒤에 도착해야 합니다.

이제 카운터는 그 div 안에, 그리고 다른 어디에도 나타나지 않습니다.

어느 페이지에 나타날지 정하기

여기에는 서로 독립된 손잡이가 둘 있고, 따로 이해해 둘 값어치가 있습니다.

자리표시자가 그 하나입니다. 함수 안 첫 줄이 그 일을 합니다. 페이지에 s4u_cp0가 없으면 멈추고, 스크립트는 내려받지조차 않습니다. 그러니 div가 든 서식은 카운터를 얻고 없는 서식은 얻지 못합니다. 사이트 서식 안에서 정해지며, 태그 관리자를 고칠 일도 게시할 일도 없습니다.

트리거가 다른 하나입니다. 같은 결정을 태그 관리자에서 내릴 수도 있습니다. 트리거에 조건을 걸어 Page Path가 맞는 곳에서만 DOM Ready에 실행되게 하는 것입니다. 트리거는 URL에 관한 규칙에 맞고, 자리표시자는 서식에 관한 규칙에 맞습니다.

한 페이지에 카운터가 둘 이상일 때

목록은 필요한 만큼 받습니다. 목록에서의 자리가 자리표시자 ID의 번호가 됩니다:

window.s4uid         = ['ID-ONE', 'ID-TWO'];
window.s4u_paramsarr = [{ s4ustyleid: '981' }, { s4ustyleid: '100' }];

첫 번째는 s4u_cp0로, 두 번째는 s4u_cp1로 들어갑니다. 이 글을 쓰면서 브라우저에서 둘 다 확인했습니다. 첫 번째는 20 × 20 아이콘으로, 두 번째는 162 × 25 띠로 그려졌고, 각각 자기 자리표시자 안에만 있었으며 페이지의 다른 어디에도 없었습니다.

물리는 네 가지

  • 두 방식은 섞이지 않습니다. 태그에 data-id 속성이 있고 동시에 목록을 설정하면 카운터가 둘 생기고, 두 조회가 따로 세어집니다.
  • 목록에는 언제나 s4ustyleid가 필요합니다. 없을 때 data-style 속성은 조용히 디자인 30으로 되돌아갑니다. 목록 방식에는 그런 되돌림이 없어 빈 디자인을 요청하게 됩니다.
  • 자리표시자가 없으면 소리 없이 실패합니다. 카운터도, 오류도, 콘솔의 무엇도 없습니다. 아무것도 나타나지 않으면 첫 번째 용의자는 ID입니다. s4u_cp0, 알파벳 O가 아니라 숫자 0입니다.
  • 보이지 않는 카운터에 링크가 없는 것은 일부러입니다. 디자인 980은 링크 없이 그려집니다. 남의 페이지에 놓인 투명한 1픽셀 클릭 대상은 기능이 아니라 덫이기 때문입니다. 링크가 필요하면 작은 아이콘이 있는 디자인 981이 그 일을 합니다.

제대로 되었는지 확인하기

태그 관리자의 미리보기 모드는 컨테이너가 켜진 채로 페이지를 불러옵니다. 태그는 DOM Ready 이벤트의 실행된 태그 아래에 나타나야 합니다. 그다음 통계 페이지가 확인해 줍니다. 미리보기를 통한 방문도 다른 방문과 똑같이 세어지므로 숫자가 몇 초 안에 움직여야 합니다.

태그는 실행되는데 아무것도 나타나지 않는다면, 가능성이 높은 순서로 자리표시자 아니면 트리거입니다.

광고