クイックスタート

次の簡単な手順に従って、ウェブサイトに訪問者カウンターを追加してください：

ウェブサイトにスクリプトを追加する

次のスクリプトを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