웹사이트에 Yandex Metrica를 추가하는 방법: 단계별 설치, Webvisor 및 Informer 배지 복구
인디 게임 스튜디오나 콘텐츠 크리에이터로서 웹사이트 방문자가 어떤 글을 읽고, 페이지의 어느 부분을 클릭하며, 스토어 배지와 어떻게 상호작용하는지 측정하는 것은 매우 중요합니다. Google Analytics가 널리 사용되는 표준이지만, **Yandex Metrica(Yandex.Metrika)**는 무료 Webvisor(세션 리플레이 / Session Replay), 클릭맵(Clickmap), 스크롤 맵(Scroll Map) 및 시각적 카운터 배지(Informer) 기능을 통해 개발자에게 매우 강력한 분석 도구를 제공합니다.
Arar Games에서는 2011년부터 운영 중인 게임 개발 포털 **Mayhem Corporation (mayhemcorporation.com)**을 모바일 반응형(responsive)으로 개선하던 중, 왼쪽 메뉴에 있던 2012년도의 Yandex Metrica 카운터와 시각적 배지가 깨진 이미지로 표시되고 있음을 발견했습니다.
bs.yandex.ru 주소를 사용하는 Yandex Metrica 배지가 최신 브라우저에서 깨진 아이콘으로 표시되는 모습.
이 가이드에서는 새로운 Yandex Metrica 태그(Tag)를 처음부터 생성하고, 최신 tag.js 코드를 웹사이트에 연동하며, 이전 bs.yandex.ru에서 비롯된 깨진 Informer 배지를 AdBlocker 보호 기능을 적용하여 복구하는 방법을 단계별로 공유합니다.
1. Yandex Metrica에서 새 태그(Tag) 생성하기
Yandex 계정으로 metrica.yandex.com에 로그인한 후, 새로운 웹사이트 카운터를 추가하기 위해 Add tag(metrica.yandex.com/add) 화면으로 이동합니다. 설치는 크게 3단계로 진행됩니다:
1단계: Create Tag (태그 정보 및 Webvisor 설정)
첫 번째 화면에서 사이트의 기본 식별 정보와 지역 설정을 구성합니다:
- Tag name: 대시보드에서 프로젝트를 쉽게 식별할 수 있는 이름을 입력합니다 (예:
Mayhem Corporation). - Website URL: 프로토콜(
https://)을 제외한 사이트의 메인 도메인을 입력합니다 (예:mayhemcorporation.com). - Accept data only from the specified addresses: 다른 사이트에서 카운터 ID를 복사하여 통계를 왜곡하는 것(스팸 트래픽)을 방지하려면 이 체크박스를 반드시 선택 상태로 유지하세요.
- Including subdomains:
blog.yoursite.com과 같은 서브도메인을 동일한 카운터로 집계하려는 경우 체크할 수 있습니다. - Time zone & Currency: 일일 방문자 수 초기화 기준 시간에 맞는 적절한 표준 시간대(예:
(GMT+03:00) Istanbul)와 통화로TRY(또는USD)를 선택합니다. - Session Replay, scroll map, form analysis (Webvisor):
💡 가장 핵심적인 기능: 이 옵션을 활성화하면 Yandex Metrica는 방문자의 마우스 움직임, 스크롤 깊이, 어떤 게임/기사 카드를 클릭했는지를 익명화된 동영상 녹화본처럼 재생하여 확인할 수 있게 해줍니다.
2단계: Fill Out the Profile (사이트 프로필 구성)
두 번째 단계에서 Yandex Metrica는 사이트의 정확한 업계 벤치마크(benchmark) 보고서를 생성하기 위해 5가지 간단한 프로필 질문을 제시합니다:
1. Site Type (사이트 유형)
기사, 기술 가이드, 뉴스 또는 문서 중심의 포털을 운영하는 경우 **Informational website (Website with text content)**를, 앱이나 게임의 직접적인 홍보 페이지인 경우 **Promo website**를 선택합니다:
2. Industry (산업 분야)
웹사이트 콘텐츠에 따라 기술, 미디어, 문화/예술을 선택하거나 목록에 정확한 항목이 없는 경우 맨 아래의 Other 옵션을 선택합니다:
3. CMS (콘텐츠 관리 시스템)
사이트가 WordPress, Drupal, Joomla, Wix와 같은 기성 플랫폼을 사용하는 경우 목록에서 선택할 수 있습니다. 저희 Mayhem Corporation 포털처럼 자체 개발한 PHP/MySQL 또는 .NET 아키텍처를 사용하는 경우 목록 하단의 **Other**를 선택하세요:
4. CRM 시스템
엔터프라이즈 CRM을 사용하지 않는 경우 이 필드에서도 Other(또는 Without CRM)를 선택하고 진행할 수 있습니다:
5. Your Role in the Project (프로젝트 내 역할)
인디 개발자이거나 스튜디오 설립자인 경우 Business management 또는 **Product management**를 선택하고 Continue 버튼을 클릭합니다:
3단계: 코드 스니펫 설치 (tag.js)
마지막 단계에서 Yandex Metrica는 웹사이트의 <head> 또는 <body> 태그 사이에 삽입할 최신 **JavaScript 카운터 코드(tag.js)**를 생성합니다:
생성된 최신 카운터 코드의 구조는 다음과 같습니다 (YOUR_TAG_ID 대신 본인의 카운터 번호가 들어갑니다):
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function(m,e,t,r,i,k,a){
m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
})(window, document,'script','https://mc.yandex.ru/metrika/tag.js?id=YOUR_TAG_ID', 'ym');
ym(YOUR_TAG_ID, 'init', {
ssr:true,
webvisor:true,
clickmap:true,
ecommerce:"dataLayer",
referrer: document.referrer,
url: location.href,
accurateTrackBounce:true,
trackLinks:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/YOUR_TAG_ID" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
코드를 웹사이트의 메인 템플릿(index.php 또는 header.php)에 추가하여 서버에 업로드한 후, 화면의 "Check tag" 버튼을 눌러 카운터가 정상 작동하는지 확인하고 **"Get started"**를 클릭하여 분석 대시보드로 이동합니다.
2. 깨진 Yandex Metrica 시각적 배지(Informer) 복구 및 AdBlocker 보호
2011~2014년경 구축된 웹사이트에서는 Yandex Metrica의 상징적인 88x31 픽셀 청록색 통계 배지(Informer)가 다음의 이전 주소로 호출되었습니다:
//bs.yandex.ru/informer/OLD_TAG_ID/3_1_3FFEEFFF_1FDECFFF_1_pageviews
수년 동안 Yandex가 bs.yandex.ru 서버와 구형 watch.js 스크립트를 지원 중단함에 따라 이 주소는 현재 **HTTP 404 Not Found**를 반환하며 페이지에 깨진 이미지 아이콘을 생성합니다.
해결책 1: 업데이트된 informer.yandex.ru 엔드포인트
시각적 배지를 정상 작동시키기 위해 이미지 소스를 Yandex의 현재 Informer 서비스(https://informer.yandex.ru/informer/...)로 변경합니다.
해결책 2: AdBlocker 사용자를 위한 로컬 폴백(onerror)
오늘날 많은 게이머와 개발자가 브라우저에서 **AdBlocker(uBlock Origin, Brave Shield 등)**를 사용합니다. 광고 차단기가 분석 관련 도메인을 차단하면 배지 이미지가 여전히 로드되지 않을 수 있습니다. 어떤 환경에서도 디자인 레이아웃이 깨지지 않도록 배지의 88x31 픽셀 사본을 자체 서버(images/yandex_metrica_badge.png)에 호스팅하고 onerror 속성을 통해 자동으로 폴백되도록 적용합니다:
<!-- Yandex.Metrika informer -->
<a href="https://metrica.yandex.com/stat/?id=YOUR_TAG_ID&from=informer"
target="_blank" rel="nofollow">
<img src="https://informer.yandex.ru/informer/YOUR_TAG_ID/3_1_3FFEEFFF_1FDECFFF_1_pageviews"
onerror="this.onerror=null;this.src='images/yandex_metrica_badge.png';"
style="width:88px; height:31px; border:0; border-radius:3px;"
alt="Yandex.Metrica"
title="Yandex.Metrica: bugünün verileri (gösterimler, ziyaretler ve tekil ziyaretçiler)"
class="ym-advanced-informer" data-cid="YOUR_TAG_ID" data-lang="tr" />
</a>
<!-- /Yandex.Metrika informer -->
이 작업을 완료하면 Mayhem Corporation 왼쪽 메뉴의 Yandex Metrica 배지는 일반 브라우저에서는 실시간 통계와 함께 표시되며, AdBlocker가 활성화된 브라우저에서도 깨진 아이콘 없이 깔끔하게 표시됩니다:
mayhemcorporation.com/mayhem/index.php 왼쪽 메뉴에서 정상 작동 중인 Yandex Metrica Informer 배지.
3. 웹사이트 및 출시 게임 소개 (Arar Games)
공식 웹사이트
- Mayhem Corporation: 게임 개발 및 XNA / MonoGame 관련 기술 게시글을 다루는 웹 포털.
mayhemcorporation.com
출시 게임
- Blocked: Pixel Panzer: 2D 픽셀 탱크 액션 및 아케이드 게임.
Google Play | Microsoft Store - Paint Trek: 2D 우주 테마 아케이드 및 퍼즐 게임.
Google Play | Microsoft Store - Space Dodger: 순발력 중심의 2D 우주 아케이드 게임.
Google Play
소셜 미디어
- TikTok: @arargamesstudio
- Instagram: @arargamesstudio
- X (Twitter): @arargamesstudio
- YouTube: @koreaaria
- Threads: @arargamesstudio
- Facebook: arargamesstudio
Hiç yorum yok:
Yorum Gönder