英語からAIを使って翻訳されました
この記事はAI技術を使用して翻訳されています。正確性を保つよう努めていますが、一部の詳細が元のテキストと完全に一致しない場合があります。情報に不明点がある場合は、英語版をご参照ください。
この記事では、CS Liveと共にChromeのDeveloper Toolを使用してモバイルウェブサイトを分析する方法を説明します。モバイル形式でサイトを表示しながらCS Liveの指標を見ることで、モバイルユーザーがコンテンツとどのようにやり取りしているかを正確に把握できます。
始める前に
必要なもの:
- Google Chromeブラウザ(Developer ToolはCS LiveでMicrosoft Edgeでは動作しません)
- CS Live拡張機能が既にインストールされていること(まだインストールしていない場合はCS Liveのセットアップ方法を参照)
- Contentsquareのトラッキングタグがインストールされたウェブサイト
- 信頼できる指標のために少なくとも30日分のモバイルトラフィックデータ
段階的な指示
ステップ1:Developer Toolsを開く
Developer Tools(DevToolsとも呼ばれます)は、Chromeに組み込まれた機能で、ウェブサイトの検査やテストができます。
Developer Toolsを開く方法は2つあります:
右クリック方法
- ページ上で右クリックします。
-
表示されるメニューから「検証」を選択します。
- Developer Toolsがブラウザの下部または側面に開きます。
キーボードショートカット
- Mac:Command + Option + J
- Windows/Linux:Control + Shift + J
ステップ2:Developer Toolsを右側に配置する
-
Developer Toolsパネルの右上隅にある「縦に並んだ3つの点(⋮)」をクリックします。
-
右側ドックアイコン(右側にバーがある長方形)をクリックします。
- Developer Toolsが画面の右側に表示されます。
ステップ3:CS Liveタブを見つけて開く
-
開発者ツールの上部メニューを見てください(「Elements」、「Console」、「Sources」などのタブが表示されます)。
- 「Contentsquare - CS Live タブ」を探してください。
- それをクリックしてCS Liveをアクティベートします。
メニューに「Contentsquare - CS Live」が表示されない場合:
-
タブメニューの右側にある「>>」矢印をクリックしてください。
-
ドロップダウンからContentsquare - CS Liveを選択します。
ステップ4:CS Liveを開いて開始する
- Contentsquare プラットフォームにログインしていることを確認してください。
-
「CS Live」アイコンをクリックします。
CS Liveアイコンが見当たらない場合は、「拡張機能」(パズルのアイコン)をクリックし、ドロップダウンリストからCS Liveを探してください。
- 「分析を開始」をクリックします。
ステップ5:モバイルビューに切り替える
-
開発者ツールの左上隅にあるデバイスをクリックします。
- ウェブサイトが左側にモバイル形式で表示されます。
-
CS Liveパネルが右側に表示されます。
ステップ6:モバイルデバイスを選択する
-
ウェブサイトビューの上部にあるデバイスのドロップダウンをクリックします(「Responsive」またはデバイス名が表示されている場合があります)。
- 特定のデバイスを選択します。
- サイトがそのデバイスの画面サイズに合わせてリサイズされます。
ステップ7:分析の設定
-
「カレンダー」アイコンをクリックして、日付範囲を設定します。例:過去30日間。
- 「適用」をクリックします。
- デバイスは自動的にMobileに設定されます(必要に応じてTabletに変更可能です)。
-
分析に適用したい指標を選択します。
ステップ8:コンテンツを分析する
-
「ゾーンを編集」をクリックします。
- 編集モードを選択します:
- シングルゾーン:単一のゾーンまたは関連性のないゾーンのグループを作成します。
- マルチゾーン:HTMLの同じレベルにあるゾーングループを作成します。要素をクリックして日付を表示します。
- ゾーンを作成する要素をクリックします(ゾーンを作成できる場合、色付きの枠が表示されます)。
- 分析したいすべての要素について繰り返します。
ステップ9:ゾーンを保存する
ゾーンを作成したら、保存できます。
-
「その他のアクション」をクリックします。
- 「Contentsquareに保存」をクリックします。
- 新しいゾーニングを作成し、名前を付けます。
- 「保存」をクリックします。