Carrdart
CarrdサイトでGA4を活用するための包括的マニュアル。Pro Standard以上のプラン加入が必須条件で、測定IDの設定からカスタムイベント追跡、Cookie同意バナーの実装まで、技術的な手順を詳しく解説。gtag.jsを活用した高度な分析手法と、GDPR等のプライバシー法令に準拠したコンプライアンス対応も網羅。初心者から上級者まで、データに基づくサイト運営を実現するための実践的ガイド。
Listen to the audio commentary
Googleアナリティクスとの連携を成功させるためには、技術的な手順を開始する前に、いくつかの重要な前提条件を満たしている必要があります。特に、Carrdのプランに関する制約は、後続のすべての分析活動の可否を決定する重要な要素です。このセクションでは、連携に必要な基盤を固め、ユーザーが時間を無駄にすることなくスムーズに作業を進められるようにします。
結論から言うと、CarrdでGoogleアナリティクスを連携させる機能は、有料の「Pro」プラン限定の機能です 1。具体的には、
Pro Standard以上のプランへの加入が必須となります。これは、Carrdが提供するネイティブなGoogleアナリティクスID設定フィールドを利用するためだけでなく、後述する高度な追跡やコンプライアンス対応ツールに不可欠な「埋め込み(Embeds)」機能を利用するためでもあります 1。
Carrdの公式ドキュメントでは、「Google Analytics」はカスタムドメイン、フォーム、ウィジェット+埋め込み機能と並んで、Proプラン限定の機能として明確に記載されています 1。これにより、この機能がCarrdの有料サービス階層に位置づけられていることがわかります。
Proプランが必要である理由は、単なる機能制限以上の技術的な背景に基づいています。
ネイティブ連携機能: Carrdの編集画面で「Publish」をクリックした後に表示される設定パネル内の「Google Analytics ID」入力フィールドは、Proプランでなければ利用できません 5。これは最も簡単で基本的な連携方法です。
高度なイベント追跡: サイト訪問者の具体的な行動(例:ボタンのクリック、フォームの送信)を追跡するには、カスタムのJavaScriptスニペットが必要です。これらのスニペットは、Proプランで利用可能になる「埋め込み(Embed)」要素を使ってのみCarrdサイトに追加できます 1。
法的コンプライアンス: GDPR(EU一般データ保護規則)などのプライバシー法を遵守するために不可欠なCookie同意バナーを設置するには、通常、サードパーティ製のツールを利用します。これらのツールは、サイトに埋め込むためのコードスニペットを提供しますが、この埋め込みにもProプランの「埋め込み」機能が必須となります 3。
これらの点を踏まえると、CarrdのProプランは、単に人気のある機能を有料化しているだけでなく、分析とコンプライアンスのエコシステム全体を技術的に有効にするための「ゲートウェイ」として機能していることが理解できます。基本的なアクセス解析から、コンバージョンを測定する高度なイベント追跡、そして法的に準拠したデータ収集まで、意味のあるサイト分析を行う上でProプランは避けて通れない技術的な基盤なのです。無料プランのユーザーは、単一の機能が使えないだけでなく、基本的な追跡、高度な追跡、そして法的に準拠した追跡という、分析活動のすべての段階から締め出されていることになります。
表1:Carrdプラン別機能比較(アナリティクス関連)
ここでは、連携のもう一方の主役であるGoogleアナリティクス側の設定を、順を追って詳細に解説します。Googleアナリティクス4(GA4)を初めて利用するユーザーを想定し、ゼロの状態からCarrdへの設定に必要な「測定ID」を取得するまでを網羅します。
Googleアナリティクスの公式サイトにアクセスし、「測定を開始」をクリックします 7。
アカウントの設定: まず、アカウント名を入力します(例:「自社事業アカウント」)。データ共有設定は、必要に応じて調整します 8。
プロパティの設定: 次に「プロパティを作成」をクリックします 9。分析対象サイトを識別できる「プロパティ名」(例:「Carrdポートフォリオサイト」)を入力し、「レポートのタイムゾーン」を「日本」に、「通貨」を「日本円(JPY)」に正しく設定します。特にタイムゾーンは、日次レポートの正確性に直結するため重要です 10。
ビジネスの詳細: 業種とビジネスの規模を選択します 10。
ビジネス目標: サイトの目的に最も合致する目標を選択します(例:「見込み顧客の獲得」)。この選択により、GA4がデフォルトで表示するレポートがカスタマイズされます 10。
利用規約に同意し、作成を完了します 12。
次に、データの収集元である「データストリーム」を設定します。Carrdサイトの場合は、「ウェブ」ストリームを選択します 13。
プロパティ作成後、プラットフォームの選択画面が表示されるので、「ウェブ」を選択します 7。
サイトのURL(例:yourname.carrd.coやカスタムドメイン)と、「ストリーム名」(例:「Carrdウェブサイトストリーム」)を入力します 7。
「拡張計測機能」が有効になっていることを確認します。この機能をオンにしておくと、ページビュー、スクロール、離脱クリックといった主要なユーザー行動が自動的に計測され、設定後すぐに有益なデータを得られます 7。
「ストリームを作成」をクリックします 7。
ストリームを作成すると、「ウェブストリームの詳細」ページが表示されます。この画面の右上に表示される「G-」から始まる文字列(例:G-XXXXXXXXXX)が、Carrdとの連携に必要な「測定ID」です 7。
後から測定IDを確認する必要が生じた場合は、以下の方法で簡単に見つけることができます。
管理画面から: GA4の管理画面(歯車アイコン)に移動し、対象のプロパティを選択後、「データストリーム」をクリックし、該当のウェブストリームを選択します。詳細ページの上部に測定IDが表示されます 15。
検索バーを利用: GA4画面上部の検索窓に「測定ID」と入力するだけでも、迅速に見つけることが可能です 15。
この測定IDは、Carrd側の設定で必要になるため、コピーして安全な場所に保管しておきましょう。なお、Carrdのドキュメントでは旧式のユニバーサルアナリティクス(UA)の「トラッキングID」(UA-XXXXXX-X)にも言及がありますが、現在はGA4が標準であるため、必ず「G-」から始まる測定IDを使用してください 5。
この一連のプロセスは、単なる手続きではありません。GA4の「アカウント > プロパティ > データストリーム」という階層構造を理解することが重要です。「プロパティ」はウェブサイトというビジネス資産のデータを格納するコンテナですが、それ自体はデータ収集方法を知りません。「データストリーム」は、そのプロパティに対して「このURLのウェブサイトからデータを受け取る」と指示する具体的な接続ポイントの役割を果たします。そして「測定ID」は、その特定のデータストリームを識別するための固有の鍵です。したがって、Carrdに測定IDを貼り付ける行為は、Carrdサイトからの全てのトラッキングデータを、特定のデータストリームを通じて、特定のGA4プロパティに送信するよう指示する、ということに他なりません。
GA4側で測定IDを取得したら、次はいよいよCarrd側で設定を行います。ここでは、Carrdのネイティブ機能を利用した、最も簡単で標準的な連携手順を解説します。
Carrdのダッシュボードにログインし、追跡したいサイトの編集画面を開きます。
画面右上のメニューにある「公開(Publish)」アイコン(ディスクや雲の形)をクリックします 5。
表示されたダイアログボックスで、「設定(Settings)」タブ(歯車のアイコン)をクリックします 5。
「設定」タブ内をスクロールすると、「Google Analytics ID」という入力フィールドが見つかります 5。ここに、前のセクションでGoogleアナリティクスからコピーした「G-」で始まる測定IDを貼り付けます 5。
IDを貼り付けたら、「変更を公開(Publish Changes)」ボタンをクリックします 5。この操作により、設定が保存され、CarrdのシステムがGoogleアナリティクスのトラッキングスクリプトをサイトのコードに自動的に埋め込みます。
データがGA4のレポートに反映されるまでには、少し時間がかかる場合があります。Carrdの公式ドキュメントでは、トラッキングが完全に初期化されるまでに24〜48時間かかる可能性があると記載されていますが、多くの場合、より早くデータが表示され始めます 5。
このCarrdのネイティブな連携方法は、技術的な複雑さをユーザーから見えなくする「抽象化」の好例です。通常、Googleアナリティクスを導入するには、ウェブサイトのすべてのページのHTMLコードを直接編集し、<head>セクション内に特定の<script>タグ(gtag.jsスニペット)を挿入する必要があります 14。これは、技術に不慣れなユーザーにとってはハードルの高い作業です。
しかしCarrdでは、ユーザーは測定IDをペーストするだけで、その後の複雑なコード実装は全てCarrdのバックエンドが自動的に処理します。サイトが公開される際、提供されたIDを用いて正しいgtag.jsスニペットが動的に生成され、サイトのHTMLに挿入されるのです。このシンプルな設計は、Carrdの価値提案の中核をなすものです。また、このネイティブ連携では、プライバシー保護の観点から重要なIPアドレスの匿名化がデフォルトで有効になるという利点もあります 5。
設定が完了したら、それが正しく機能しているかを確認する作業が不可欠です。このセクションでは、連携が成功したかを確かめる方法と、問題が発生した場合に体系的に原因を特定し、解決するためのフレームワークを提供します。
設定が正しく行われたかを即座に確認するための最も効果的なツールは、GA4のリアルタイムレポートです 14。
リアルタイムレポートでの確認手順:
Carrdサイトに測定IDを設定し、公開した後、新しいブラウザタブ(キャッシュの影響を避けるため、シークレットモードやプライベートウィンドウを推奨)を開きます。
公開された自身のCarrdサイトのURLにアクセスします。
Googleアナリティクスのダッシュボードで、左側のメニューから「レポート」 > 「リアルタイム」へと進みます 20。
数分以内に、「過去30分間のユーザー」の数が「1」以上に変わるはずです。また、地図上に自分のアクセス地点が表示されたり、「ページタイトル別の表示回数」のカードに閲覧中のページが表示されたりします 19。
この視覚的なフィードバックが、基本的な接続が正常に機能していることを示す最も確実な証拠となります 14。
設定後しばらく待ってもGA4のダッシュボードに「ウェブサイトからまだデータを受信していません」というメッセージが表示され続けるのは、よくある問題です 23。以下に、考えられる原因と解決策をまとめたチェックリストを示します。
表2:一般的な連携問題のトラブルシューティング
ここからは、単なるアクセス数の計測から一歩進み、ユーザーの具体的な行動を追跡する専門的な応用へと進みます。Carrdのシンプルなインターフェースの裏側で、強力なgtag.jsライブラリが動作しているという事実を活用し、カスタムイベントの追跡を実装します。
GA4における「イベント」とは、ボタンのクリック、フォームの送信、ファイルのダウンロードなど、ユーザーがサイトコンテンツに対して行う特定のインタラクションを指します 25。ページビューは訪問者が「来た」ことを教えてくれますが、イベントは訪問者が「何をしたか」を教えてくれます。これは、コンバージョンを測定し、ユーザー行動を深く理解するために不可欠です。
Carrdで高度なイベント追跡を可能にする鍵は、各ボタン要素に備わっている「On Click」設定にあります 6。この入力フィールドは、ボタンがクリックされた際に指定したJavaScriptコードを実行するためのものです。
重要なのは、第3章で解説した標準的な連携を行うと、Carrdサイトにはすでにgtag.jsライブラリが読み込まれているという点です。これにより、「On Click」フィールド内でgtag()コマンドを直接呼び出し、カスタムイベントをGoogleアナリティクスに送信することが可能になります 6。
具体的な例として、ニュースレター登録ボタンのクリックを追跡する手順を解説します。
Carrdエディタで、ニュースレター登録用の「フォーム(Form)」要素を追加します。
フォーム内のボタンをクリックして、設定パネルを開きます。
設定パネル内で「On Click」フィールドを探します(フォームの設定タブ内の「Events」などにある場合があります)6。
このフィールドに、以下のJavaScriptスニペットを貼り付けます:
gtag('event', 'signup_newsletter', { 'event_category': 'engagement', 'event_label': 'Header Signup Form' });
コードの解説:
gtag('event',...):イベントを送信するためのコマンドです 27。
'signup_newsletter':カスタムイベント名です。この名前がGA4のレポートに表示されます 29。
{...}:イベントに関する追加情報(パラメータ)を格納するオブジェクトです 30。
サイトを公開します。
検証: 公開したサイトで登録ボタンをクリックし、GA4のリアルタイムレポートや管理画面の「DebugView」で、signup_newsletterというイベントがリアルタイムで記録されることを確認します 30。
この方法は、複雑なイベント追跡の業界標準であるGoogleタグマネージャー(GTM)を導入することなく、高度な分析を実現できるという点で非常に優れています 25。Carrdのネイティブ連携が
gtag.jsを自動で読み込み、さらに「On Click」というJavaScript実行のフックを提供しているため、ユーザーはGTMの学習コストをかけることなく、gtag.jsの強力な機能を直接利用できます。これは、シンプルさと効率性を重視するCarrdユーザーにとって大きな利点です。
表3:Carrd用 gtag.js イベントスニペットのサンプル
最後に、分析ツールを利用する上で避けて通れない、法的かつ倫理的な責任について解説します。コンプライアンス対応は、単なる義務ではなく、ユーザーの信頼を構築し、合法的にサイトを運営するための重要なステップです。
GDPR(EU一般データ保護規則)やCCPA(カリフォルニア州消費者プライバシー法)といったデータプライバシー法について、簡潔に理解することが重要です。これらの法律の核心は、ユーザーのプライバシー保護にあります。
Googleアナリティクスは、訪問者のブラウザに「Cookie」という小さなテキストファイルを保存することで機能します。多くの国の法律では、このような追跡目的のCookie(必要不可欠なものを除く)を使用する前に、ユーザーから明確な同意を得ることが義務付けられています 3。これが、Cookie同意バナーとプライバシーポリシーが必要となる理由です。
Carrdには、Cookie同意バナーを設置する組み込み機能はありません。そのため、サードパーティ製のツールを導入する必要があります 3。これらのツールを実装するには、Pro Standard以上のプランで利用可能になる「埋め込み(Embed)」要素が必須です 2。
実装手順(Common Ninjaを例に):
Common Ninjaなどのサードパーティ製Cookieバナーサービスに登録します 4。
サービスの管理画面で、バナーのデザインや表示テキストをカスタマイズします。
サービスから提供されるJavaScriptの埋め込みコードをコピーします 4。
Carrdエディタで、「埋め込み(Embed)」要素を追加します。この要素のスタイルを「Hidden」(非表示)かつ「Body End」(ページの末尾に配置)に設定し、ページのレイアウトに影響を与えないようにします。
埋め込み要素のコードブロックに、コピーしたコードを貼り付けます 4。
サイトを公開します。これで、新規訪問者に対してCookie同意バナーが表示されるようになります。
他にも、Cookiebot、Cookie Script、Elfsightなど、無料プランを提供しているサービスも多数存在します 3。
プライバシーポリシーは、どのようなデータを、何の目的で収集しているかをユーザーに透明性をもって伝えるために不可欠です。サイトのプライバシーポリシーページに、Googleアナリティクスの利用に関する以下の文例を参考に追記してください。
文例テンプレート:
当サイトでは、サービス向上のためGoogle, Inc.のGoogleアナリティクスを利用してサイトの計測を行っております。これに付随して生成されるテキストファイル「Cookie」を通じて分析を行うことがありますが、この際、IPアドレス等のユーザー情報の一部が、Google, Inc.に収集される可能性があります。サイト利用状況の分析、サイト運営者へのレポートの作成、その他のサービスの提供目的に限りこれを使用します。利用者は、当サイトを利用することで、上記方法および目的においてGoogleが行うこうしたデータ処理につき許可を与えたものとみなします。なお、「Cookie」は、お使いのブラウザの設定で拒否することが可能です。
また、必要に応じて、免責事項やコメント投稿時のIPアドレス収集に関する記述なども含めると、より包括的なプライバシーポリシーとなります 35。
CarrdサイトでGoogleアナリティクスを機能的かつ合法的に設定するプロセスは、単一の作業ではなく、相互に依存する要素からなるシステムです。
その全ての基盤となるのがCarrd Proプランです。Proプランは、最も基本的な測定IDの設定フィールドを有効にし、高度なイベント追跡に不可欠な「埋め込み」機能を解放し、さらに法的コンプライアンスに必要なCookie同意バナーの実装も可能にします。つまり、分析を始めたいという最初の動機が、技術的、費用的、そして法的な要件の連鎖を引き起こします。
したがって、成功への道筋は、「アナリティクスを追加する」という単純なタスクとしてではなく、**「Carrd Proプラン + Googleアナリティクス4 + Cookie同意ツール」**というソリューションスタックを導入する戦略的な実装として捉えるべきです。この全体像を理解することが、Carrdサイトの価値をデータに基づいて最大化するための、最も確実な第一歩となるでしょう。