方法

ハウツーホーム

メニュー

アイコンバー メニューアイコン アコーディオン タブ 垂直タブ タブヘッダー フルページタブ ホバータブ トップナビゲーション レスポンシブTopnav アイコン付きのナビゲーションバー 検索メニュー 検索バー 固定サイドバー ページナビゲーション レスポンシブサイドバー フルスクリーンナビゲーション オフキャンバスメニュー Sidenavボタンにカーソルを合わせる アイコン付きサイドバー 水平スクロールメニュー 垂直メニュー ボトムナビゲーション レスポンシブボトムナビゲーション ボトムボーダーナビゲーションリンク 右揃えのメニューリンク 中央メニューリンク 等幅メニューリンク 固定メニュー スクロールでバーを下にスライド スクロールでナビゲーションバーを非表示 スクロールでナビゲーションバーを縮小 スティッキーナビゲーションバー 画像上のナビゲーションバー ホバードロップダウン ドロップダウンをクリックします カスケードドロップダウン Topnavのドロップダウン Sidenavのドロップダウン 応答ナビゲーションバーのドロップダウン サブナビゲーションメニュー ドロップアップ メガメニュー モバイルメニュー カーテンメニュー 折りたたまれたサイドバー 折りたたまれたサイドパネル ページ付け パン粉 ボタングループ 垂直ボタングループ スティッキーソーシャルバー ピルナビゲーション レスポンシブヘッダー

画像

スライドショー スライドショーギャラリー モーダル画像 ライトボックス レスポンシブ画像グリッド 画像グリッド タブギャラリー 画像オーバーレイフェード 画像オーバーレイスライド 画像オーバーレイズーム 画像オーバーレイタイトル 画像オーバーレイアイコン 画像効果 黒と白の画像 画像テキスト 画像テキストブロック 透明な画像テキスト フルページ画像 画像上のフォーム ヒーロー画像 背景画像をぼかす スクロールでBgを変更する サイドバイサイド画像 丸みを帯びた画像 アバター画像 レスポンシブ画像 中央の画像 サムネイル 画像の周りの境界線 チームに会う スティッキー画像 画像を反転する 画像を振る ポートフォリオギャラリー フィルタリングを備えたポートフォリオ 画像ズーム 画像拡大鏡ガラス 画像比較スライダー ファビコン

ボタン

アラートボタン アウトラインボタン 分割ボタン アニメーションボタン フェージングボタン 画像のボタン ソーシャルメディアボタン 続きを読む続きを読む 読み込みボタン ダウンロードボタン ピルボタン 通知ボタン アイコンボタン 次/前のボタン ナビゲーションのその他のボタン ブロックボタン テキストボタン 丸いボタン トップボタンまでスクロール

フォーム

ログインフォーム サインアップフォーム チェックアウトフォーム お問い合わせフォーム ソーシャルログインフォーム 登録フォーム アイコン付きのフォーム ニュースレター スタックフォーム レスポンシブフォーム ポップアップフォーム インラインフォーム 入力フィールドをクリア 数字の矢印を隠す テキストをクリップボードにコピーする アニメーション検索 検索ボタン フルスクリーン検索 ナビゲーションバーの入力フィールド Navbarのログインフォーム カスタムチェックボックス/ラジオ カスタム選択 トグルスイッチ チェックボックスをオンにします CapsLockを検出する Enterのトリガーボタン パスワードの検証 パスワードの可視性を切り替える マルチステップフォーム オートコンプリート オートコンプリートをオフにする スペルチェックをオフにする ファイルアップロードボタン 空の入力検証

フィルタ

フィルタリスト フィルターテーブル フィルタ要素 フィルタのドロップダウン ソートリスト スペルテーブル

テーブル

ゼブラストライプテーブル センターテーブル 全幅テーブル 並べたテーブル レスポンシブテーブル 比較表

もっと

フルスクリーンビデオ モーダルボックス モーダルを削除 タイムライン スクロールインジケーター プログレスバー スキルバー レンジスライダー ツールチップ 表示要素ホバー ポップアップ 折りたたみ可能 カレンダー HTMLに含まれるもの やることリスト ローダー 星評価 ユーザー評価 オーバーレイ効果 コンタクトチップ カード フリップカード プロフィールカード 製品カード アラート 叫ぶ ノート ラベル サークル スタイルHR クーポン リストグループ 箇条書きなしのリスト レスポンシブテキスト カットアウトテキスト 輝くテキスト 固定フッター スティッキーエレメ​​ント 等しい高さ Clearfix レスポンシブフロート スナックバー フルスクリーンウィンドウ スクロール図面 スムーズスクロール グラデーションBgスクロール スティッキーヘッダー スクロールでヘッダーを縮小 価格表 視差 アスペクト比 レスポンシブIframe 好き/嫌いを切り替える 非表示/表示を切り替えます ダークモードを切り替えます テキストを切り替えます トグルクラス クラスを追加 クラスを削除 アクティブクラス ツリー表示 プロパティを削除 オフライン検出 隠された要素を見つける Webページをリダイレクトする ズームホバー フリップボックス 垂直方向に中央に配置 DIVの中央ボタン ホバーでの遷移 矢印 ダウンロードリンク フルハイト要素 ブラウザウィンドウ カスタムスクロールバー スクロールバーを非表示 スクロールバーの表示/強制 デバイスルック コンテンツ編集可能な境界線 プレースホルダーの色 テキスト選択色 弾丸の色 垂直線 仕切り アイコンをアニメーション化する カウントダウンタイマー タイプライター 近日公開ページ チャットメッセージ ポップアップチャットウィンドウ 画面を分割 お客様の声 セクションカウンター スライドショーを引用 クローズ可能なリストアイテム 典型的なデバイスブレークポイント ドラッグ可能なHTML要素 JSメディアクエリ シンタックスハイライト JSアニメーション JS文字列の長さ JSべき乗 JSのデフォルトパラメータ 現在のURLを取得 現在の画面サイズを取得する Iframe要素を取得する

Webサイト

無料のウェブサイトを作成する ウェブサイトを作る 静的なWebサイトを作成する ウェブサイトを作る(W3.CSS) ウェブサイトを作る(BS3) ウェブサイトを作る(BS4) ウェブサイトを作る(BS5) Webサイトを作成して表示する リンクツリーWebサイトを作成する ポートフォリオを作成する 履歴書を作成する レストランのウェブサイトを作る ビジネスのウェブサイトを作る WebBookを作成する センターのウェブサイト 連絡先セクション ページについて ビッグヘッダー ウェブサイトの例

グリッド

2列のレイアウト 3列のレイアウト 4列のレイアウト グリッドの拡張 リストグリッドビュー 混合列レイアウト コラムカード ジグザグレイアウト ブログのレイアウト

グーグル

Googleチャート Google Fonts Googleフォントペアリング Googleセットアップアナリティクス

コンバーター

重量を変換する 温度変換 長さの変換 変換速度

ブログ

開発者の仕事を得る フロントエンド開発者になる。

GoogleAnalyticsを設定する方法

Google Analyticsは、Webトラフィックを表示および理解するために使用されます。

無料で使いやすいです。

多くのユースケースに合わせてカスタマイズできます。

それは箱から出して動作します。

セットアップは高速です。今日あなたの洞察を得てください!

私の無料のウェブサイトを作成する❯

GoogleAnalyticsについて読むのをスキップします。私を直接最初のステップに連れて行ってください。最初のステップに進みます

GoogleAnalyticsとは

GoogleAnalyticsはWeb分析ソリューションです。

これは、Googleによって開発およびサポートされています。

最新バージョンはGoogleAnalytics4と呼ばれます。

オーディエンス、ページビュー、セッション、人口統計、イベントなどのデータを表示するために使用できます。

GoogleAnalyticsを有効にする理由

より良い決定をするためにあなたのウェブトラフィックを理解してください。

セールスファネルを理解して改善します。

実験から学ぶ(たとえば、a / bテスト)。

Googleには、GoogleOptimizeと呼ばれる別のソリューションがあります。このソリューションはテスト用に作成されています。


GoogleAnalyticsは誰ですか

Google Analyticsは、Webサイトを持っている人なら誰でも便利です。

それはあなたのサイトを誰が使用し、彼らがどのようにそれと相互作用するかについての情報をあなたに与えます。

また、インターフェースもわかりやすいです。

サービスを使用およびナビゲートするために分析のバックグラウンドは必要ありません。


GoogleAnalyticsを段階的に設定する方法

Google Analyticsは、グローバルWebサイトタグ(gtag.js)またはGoogleタグマネージャーの2つの方法で設定できます

最も簡単な方法は、グローバルWebサイトタグを使用することです。

このチュートリアルでは、グローバルWebサイトタグアプローチを使用します。


準備

使用するコードエディタを決定し、環境を設定します。

W3Schoolsは、 W3SchoolsSpacesと呼ばれる使いやすいコードエディタを作成しましたサインアップして、数回クリックするだけで開始できます。

無料で始める❯

コードを入力する準備ができるように、 index.htmlファイルを作成します。

すべてのセットアップ。さあ行こう!


Google Analyticsの設定:グローバルウェブサイトタグ


ステップ1:GoogleAnalyticsアカウントを作成する

Analyticsに移動:アカウントを作成するか、Analyticsにサインインします

上記の段落のリンクをクリックすると、GoogleAnalyticsのランディングページに移動します。

「無料で開始」ボタンをクリックします。

ランディングページ

ステップ2:ウェルカムページに入る

アカウントを作成するかサインインした後、あなたは解決策に歓迎されます。

「測定開始」ボタンを押して続行します。

ウェルカムページ

ステップ3:アカウントの設定

ここで行うべき2つの決定があります。

  1. アカウント名を入力してください。
  2. 共有するデータを決定します。
  3. 「次へ」ボタンをクリックします。

1つのアカウントに複数のトラッキングIDを含めることができます。1つのアカウントで複数のWebサイトを追跡できます。

アカウント設定の概要

ステップ4:プロパティの設定

プロパティは、Webサイト、アプリケーション、リンクツリーなど、測定するサービスです。

  1. プロパティ名を入力します。
  2. タイムゾーンを入力してください。
  3. 使用する通貨を入力してください。
  4. 「次へ」ボタンをクリックします。
プロパティ設定の概要

ステップ5:ビジネス情報を追加する

Analyticsは、この情報を使用してエクスペリエンスを調整します。

  1. 業界カテゴリを選択してください。
  2. ビジネスサイズを選択します。
  3. Tick the boxes for how you are planning to use Analytics.
  4. Click the "Create" button to proceed.
ビジネス情報の詳細

Step 6: Terms of Service Agreement

Read and understand the terms of service.

Tick the GDPR box and click the "I accept" button if you agree.

利用規約の概要

Step 7: Email subscriptions

  1. Tick or uncheck all boxes.
  2. Click the "Save" button to continue.
メール通信の概要

Step 8: Select platform

Chose the platform where you are collecting data.

Then, click the relevant platform to continue.

We are continuing with "Web" as the example in this tutorial.

プラットフォームの概要を選択

Step 9: Data stream setup

Enter data stream details.

  1. The URL to your site.
  2. The name that you want to give the stream.
  3. Decide if you are to enable enhanced measurement or not.
  4. Click on the "Create stream" button to continue.
  5. The enhanced measurement can give the data more context. Improving your understanding of the traffic.

    データストリーム設定の概要

    Step 10: Web stream overview

    Here you can see a detailed overview of the web stream.

    Webストリームの詳細

    Here are the key takeaways from the overview.

    1. Stream URL.

    The Stream URL is the link to the connected site.

    ストリームURL

    2. Measurement ID

    The Measurement ID is the identifier for your data stream.

    It has a format of G-XXXXXXX.

    測定ID

    Google Analytics 4 uses Measurement ID. Older versions use Tracking ID. You can not have both.

    3. Tagging instructions

    Decide to use Global site tag (gtag.js) or Tag manager.

    This tutorial will use the Global site tag.

    Installing the Global site tag is the easiest and quickest way of getting it up and running.

    タグ付けの手順

    Step 11: Global site tag (gtag.js)

    Click the "Global site tag (gtag.js)" row.

    グローバルサイトタグ

    Here you can see a code snippet.

    The code snippet is a script to allow Google to measure data on your site.

    You can see the Measurement ID in the second last line in the code snippet.

    The code snippet

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-DNJN1PF3CS"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-XXXXXXX');
    </script>

    Step 12: Enter the code snippet

    Copy the code snippet.

    Make sure to include your Measurement ID.

    Locate the <head> tag in your HTML.

    Paste the code snippet just below the <head> tag.

    Save and publish the code.

    コードスニペットを追加

    We used W3Schools Spaces in this example.


    Step 13: Test that it works

    Ensure that you have successfully saved and published the code snippet with the correct Measurement ID.

    Open the URL for the site you have connected to the data stream.

    Click on "Real time" on the menu to the left.

    Confirm that you see yourself as an active user.

    Congrats. You have successfully enabled Google Analytics for your site!

    Analytics dashboard

    Explore Google Analytics

    Recommended related topics are Tag manager and Events

    Spend time in the service to learn about your user activity, commerce, demographics, device, and referrals.


    Tip: Ever heard of W3Schools Spaces? It is a personal space where you can make a website from scratch or use a template and host it for free.

    It has everything you need in the browser.

    Get started in a few clicks.

    Start now for free ❯

    * no credit card required