빠른 시작

다음 간단한 단계에 따라 웹사이트에 방문자 카운터를 추가하세요:

웹사이트에 스크립트 추가하기

다음 스크립트를 HTML의 닫는 body 태그 바로 앞에 복사하여 붙여넣으세요:

<script>
(function() {
  const domain = encodeURIComponent(window.location.hostname);
  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  const page_path = window.location.pathname;
  const page_title = document.title;
  const referrer = document.referrer;
  
  // Extract search query if coming from a search engine
  let search_query = '';
  if (referrer) {
    try {
      const url = new URL(referrer);
      if (url.hostname.includes('google.com')) {
        search_query = url.searchParams.get('q') || '';
      } else if (url.hostname.includes('bing.com')) {
        search_query = url.searchParams.get('q') || '';
      } else if (url.hostname.includes('yahoo.com')) {
        search_query = url.searchParams.get('p') || '';
      } else if (url.hostname.includes('duckduckgo.com')) {
        search_query = url.searchParams.get('q') || '';
      }
    } catch (e) {
      // Invalid URL, ignore
    }
  }

  fetch('https://visitor.6developer.com/visit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ 
      domain, 
      timezone,
      page_path,
      page_title,
      referrer,
      search_query
    })
  })
  .then(response => response.json())
  .then(data => {
    console.log('Visitor count:', data);
    // You can display the count on your page
    if (document.getElementById('visitor-count')) {
      document.getElementById('visitor-count').textContent = data.totalCount;
    }
  })
  .catch(error => console.error('Error:', error));
})();
</script>

카운터 표시하기 (선택 사항)

페이지에 방문자 수를 표시하려면 카운터가 나타나길 원하는 곳에 이 HTML을 추가하세요:

<div>
  방문자: <span id="visitor-count">0</span>
</div>

대시보드 접근하기

대시보드를 방문하여 자세한 방문자 통계를 확인하세요:

대시보드로 가기

고급 설치 옵션

NPM 패키지 사용하기

JavaScript 프레임워크와 더 쉬운 통합을 위해 공식 NPM 패키지를 설치하세요:

npm install @rundevelrun/free-visitor-counter

그런 다음 코드에서 가져와 사용하세요:

// React example
import { VisitorCounter } from '@rundevelrun/free-visitor-counter';

function App() {
  return (
    <div>
      <h1>My Website</h1>
      <VisitorCounter />
    </div>
  );
}

// JavaScript example
import { trackVisit, displayCounter } from '@rundevelrun/free-visitor-counter';

// Track visit
trackVisit().then(data => {
  console.log('Visitor count:', data);
});

// Display counter in element with id "visitor-counter"
displayCounter('visitor-counter');

자세한 정보는 다음을 방문하세요 GitHub repository.

사용자 정의 구현

사용자 정의 구현을 위해 API를 직접 사용할 수 있습니다:

// Example: Custom implementation with fetch API
const recordVisit = async () => {
  const domain = window.location.hostname;
  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

  try {
    const response = await fetch('https://visitor.6developer.com/visit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ domain, timezone })
    });

    const data = await response.json();
    console.log('Visit recorded:', data);
    return data;
  } catch (error) {
    console.error('Failed to record visit:', error);
    return null;
  }
};

// Call the function
recordVisit();

문제 해결

카운터가 업데이트되지 않음

도메인이 올바르게 감지되었는지 확인하세요. 브라우저 콘솔에서 오류를 확인하세요.

콘솔의 CORS 오류

우리 API는 교차 출처 요청을 허용합니다. CORS 오류가 보인다면 네트워크 제한이나 브라우저 확장 프로그램 때문일 수 있습니다.

더 많은 도움이 필요하신가요?

다음에서 이슈를 열어주세요 GitHub repository.

설치에 관한 자주 묻는 질문

이 방문자 카운터는 정말로 무료로 설치할 수 있나요?

네, 저희 방문자 카운터는 완전히 무료로 설치하고 사용할 수 있습니다. 숨겨진 비용, 프리미엄 기능, 유료 등급이 없습니다.

카운터를 사용하기 위해 계정을 만들어야 하나요?

아니요, 계정을 만들 필요가 없습니다. 웹사이트에 스크립트를 추가하기만 하면 즉시 방문자 추적을 시작합니다.

카운터는 모든 웹사이트에서 작동하나요?

네, 저희 방문자 카운터는 사용된 플랫폼이나 기술에 관계없이 모든 웹사이트에서 작동합니다. WordPress, Shopify, Wix, 사용자 정의 HTML 사이트 등과 호환됩니다.

카운터의 외관을 어떻게 사용자 정의하나요?

카운트를 표시하는 HTML 요소의 스타일을 지정하여 카운터의 외관을 사용자 정의할 수 있습니다. CSS를 사용하여 글꼴, 색상, 크기 등을 변경할 수 있습니다.

단일 페이지 애플리케이션(SPA)에서 카운터를 사용할 수 있나요?

네, 저희 방문자 카운터는 단일 페이지 애플리케이션에서 작동합니다. React, Vue, Angular 및 기타 JavaScript 프레임워크와 더 쉬운 통합을 위해 NPM 패키지를 사용할 수 있습니다.

Visitor Counter Installation Guide - 100% Free Forever