어떻게

하우투 홈

메뉴

아이콘 바 메뉴 아이콘 아코디언 세로 탭 탭 헤더 전체 페이지 탭 호버 탭 상위 탐색 반응형 Topnav 아이콘이 있는 탐색 모음 검색 메뉴 검색 창 고정 사이드바 페이지 탐색 반응형 사이드바 전체 화면 탐색 캔버스 외 메뉴 호버 사이드 내비 버튼 아이콘이 있는 사이드바 가로 스크롤 메뉴 세로 메뉴 하단 탐색 반응형 하단 탐색 하단 테두리 탐색 링크 오른쪽 정렬 메뉴 링크 중앙 메뉴 링크 동일한 너비 메뉴 링크 고정 메뉴 스크롤 시 아래로 슬라이드 바 스크롤 시 Navbar 숨기기 스크롤 시 Navbar 축소 끈끈한 Navbar 이미지의 Navbar 마우스 오버 드롭다운 드롭다운 클릭 계단식 드롭다운 Topnav의 드롭다운 Sidenav의 드롭다운 Resp Navbar 드롭다운 하위 탐색 메뉴 드롭업 메가 메뉴 모바일 메뉴 커튼 메뉴 접힌 사이드바 접힌 측면 패널 쪽수 매기기 빵 부스러기 버튼 그룹 수직 버튼 그룹 스티커 소셜 바 알약 탐색 반응형 헤더

이미지

슬라이드쇼 슬라이드쇼 갤러리 모달 이미지 라이트박스 반응형 이미지 그리드 이미지 그리드 탭 갤러리 이미지 오버레이 페이드 이미지 오버레이 슬라이드 이미지 오버레이 줌 이미지 오버레이 제목 이미지 오버레이 아이콘 이미지 효과 흑백 이미지 이미지 텍스트 이미지 텍스트 블록 투명 이미지 텍스트 전체 페이지 이미지 이미지에 양식 영웅 이미지 배경 이미지 흐림 스크롤 시 Bg 변경 나란히 이미지 둥근 이미지 아바타 이미지 반응형 이미지 중앙 이미지 썸네일 이미지 주변 테두리 팀을 만나다 스티커 이미지 이미지 뒤집기 이미지 흔들기 포트폴리오 갤러리 필터링이 포함된 포트폴리오 이미지 줌 이미지 돋보기 유리 이미지 비교 슬라이더 파비콘

버튼

경고 버튼 개요 버튼 분할 버튼 애니메이션 버튼 페이딩 버튼 이미지의 버튼 소셜 미디어 버튼 더 읽기 덜 읽기 로딩 버튼 다운로드 버튼 알약 버튼 알림 버튼 아이콘 버튼 다음/이전 버튼 탐색의 추가 버튼 차단 버튼 텍스트 버튼 둥근 버튼 맨 위로 스크롤 버튼

양식

로그인 양식 가입 양식 결제 양식 문의 양식 소셜 로그인 양식 등록 양식 아이콘이 있는 양식 뉴스 레터 스택 형태 반응형 팝업 양식 인라인 양식 입력 필드 지우기 숫자 화살표 숨기기 클립보드에 텍스트 복사 애니메이션 검색 검색 버튼 전체 화면 검색 Navbar의 입력 필드 Navbar의 로그인 양식 사용자 정의 확인란/라디오 사용자 지정 선택 토글 스위치 체크박스 체크 Caps Lock 감지 입력 시 트리거 버튼 비밀번호 확인 비밀번호 가시성 전환 다단계 양식 자동 완성 자동 완성 끄기 맞춤법 검사 끄기 파일 업로드 버튼 빈 입력 유효성 검사

필터

필터 목록 필터 테이블 필터 요소 필터 드롭다운 정렬 목록 철자표

테이블

얼룩말 줄무늬 테이블 센터 테이블 전폭 테이블 나란히 놓인 테이블 반응형 테이블 비교표

전체 화면 비디오 모달 박스 모달 삭제 타임라인 스크롤 표시기 진행률 표시줄 스킬 바 범위 슬라이더 툴팁 디스플레이 요소 호버 팝 업 접을 수 있는 달력 HTML 포함 할 일 목록 로더 별점 매기기 사용자 평가 오버레이 효과 연락처 칩 카드 플립 카드 프로필 카드 제품 카드 경고 호출 노트 라벨 서클 스타일 HR 쿠폰 목록 그룹 글머리 기호 없는 목록 반응형 텍스트 컷아웃 텍스트 빛나는 텍스트 고정 바닥글 끈끈한 요소 동일한 높이 클리어픽스 반응형 플로트 스낵바 전체 화면 창 스크롤 그리기 부드러운 스크롤 그라디언트 Bg 스크롤 스티커 헤더 스크롤 시 헤더 축소 가격표 시차 종횡비 반응형 Iframe 좋아요/싫어요 전환 숨기기/표시 전환 다크 모드 전환 텍스트 토글 토글 클래스 수업 추가 수업 제거 활성 클래스 트리 뷰 속성 제거 오프라인 감지 숨겨진 요소 찾기 웹페이지 리디렉션 확대/축소 호버 플립 박스 수직으로 중앙 DIV의 가운데 버튼 마우스 오버 시 전환 화살표 모양 다운로드 링크 전체 높이 요소 브라우저 창 사용자 정의 스크롤바 스크롤바 숨기기 스크롤바 표시/강제 장치 모양 콘텐츠 편집 가능한 테두리 자리 표시자 색상 텍스트 선택 색상 총알 색상 수직선 분할기 애니메이션 아이콘 카운트 다운 타이머 타이프라이터 출시 예정 페이지 채팅 메시지 팝업 채팅 창 분할 화면 사용후기 섹션 카운터 인용 슬라이드쇼 닫을 수 있는 목록 항목 일반적인 장치 중단점 드래그 가능한 HTML 요소 JS 미디어 쿼리 구문 형광펜 JS 애니메이션 JS 문자열 길이 JS 지수 JS 기본 매개변수 현재 URL 가져오기 현재 화면 크기 가져오기 Iframe 요소 가져오기

웹사이트

무료 웹사이트 만들기 웹사이트 만들기 정적 웹사이트 만들기 웹사이트 만들기(W3.CSS) 웹사이트 만들기(BS3) 웹사이트 만들기(BS4) 웹사이트 만들기(BS5) 웹사이트 생성 및 보기 링크 트리 웹 사이트 만들기 포트폴리오 만들기 이력서 작성 레스토랑 웹사이트 만들기 비즈니스 웹사이트 만들기 웹북 만들기 센터 웹사이트 연락처 섹션 페이지 정보 큰 헤더 웹사이트 예시

그리드

2열 레이아웃 3열 레이아웃 4 열 레이아웃 그리드 확장 그리드 보기 나열 혼합 열 레이아웃 기둥 카드 지그재그 레이아웃 블로그 레이아웃

Google

구글 차트 구글 폰트 Google 글꼴 페어링 구글 애널리틱스 설정

변환기

무게 변환 온도 변환 길이 변환 속도 변환

블로그

개발자 취업 프론트엔드 개발자가 되십시오.

구글 애널리틱스 설정 방법

Google Analytics는 웹 트래픽을 보고 이해하는 데 사용됩니다.

그것은 무료이며 사용하기 쉽습니다.

많은 사용 사례에 맞게 사용자 지정할 수 있습니다.

기본적으로 작동합니다.

설정하는 것이 빠릅니다. 오늘 통찰력을 얻으십시오!

내 무료 웹사이트 만들기 ❯

Google Analytics에 대한 읽기를 건너뛰십시오. 첫 번째 단계로 바로 안내해 주세요. 첫 번째 단계로 이동

구글 애널리틱스란?

Google Analytics는 웹 분석 솔루션입니다.

Google에서 개발 및 지원합니다.

최신 버전은 Google 애널리틱스 4입니다.

잠재고객, 페이지 조회수, 세션, 인구 통계 및 이벤트와 같은 데이터를 보는 데 사용할 수 있습니다.

Google 애널리틱스를 활성화해야 하는 이유

웹 트래픽을 이해하여 더 나은 결정을 내리십시오.

판매 유입경로를 이해하고 개선합니다.

실험을 통해 배우십시오(예: a/b 테스트).

Google에는 Google Optimize라는 또 다른 솔루션이 있습니다. 이 솔루션은 테스트용으로 만들어졌습니다.


누구를 위한 Google 애널리틱스

Google Analytics는 웹사이트가 있는 모든 사람에게 유용합니다.

누가 귀하의 사이트를 사용하고 사이트와 상호 작용하는지에 대한 정보를 제공합니다.

또한 인터페이스는 이해하기 쉽습니다.

서비스를 사용하고 탐색하는 데 분석 배경이 필요하지 않습니다.


Google 애널리틱스를 단계별로 설정하는 방법

Google Analytics는 글로벌 웹사이트 태그(gtag.js) 또는 Google 태그 관리자 의 두 가지 방법으로 설정할 수 있습니다 .

가장 쉬운 방법은 글로벌 웹사이트 태그를 사용하는 것입니다.

이 자습서에서는 글로벌 웹사이트 태그 접근 방식을 사용합니다.


준비

사용할 코드 편집기를 결정하고 환경을 설정하십시오.

W3Schools는 W3Schools Spaces 라는 사용하기 쉬운 코드 편집기를 만들었습니다 . 몇 번의 클릭으로 가입하고 시작하세요.

무료로 시작하세요 ❯

코드를 입력할 준비가 되도록 index.html 파일을 만듭니다 .

모든 설정. 가자!


Google Analytics 설정: 글로벌 웹사이트 태그


1단계: Google 애널리틱스 계정 만들기

Analytics로 이동: 계정 만들기 또는 Analytics에 로그인

위 단락의 링크를 클릭하면 Google Analytics 방문 페이지로 이동합니다.

"무료로 시작" 버튼을 클릭합니다.

방문 페이지

2단계: 시작 페이지 입력

계정을 만들거나 로그인한 후 솔루션에 오신 것을 환영합니다.

계속 진행하려면 "측정 시작" 버튼을 누르십시오.

환영 페이지

3단계: 계정 설정

여기서 두 가지 결정을 내려야 합니다.

  1. 계정 이름을 입력합니다.
  2. 공유할 데이터를 결정합니다.
  3. "다음" 버튼을 클릭합니다.

하나의 계정에는 둘 이상의 추적 ID가 있을 수 있습니다. 한 계정으로 둘 이상의 웹사이트를 추적할 수 있습니다.

계정 설정 개요

4단계: 속성 설정

속성은 웹사이트, 애플리케이션, 링크 트리 등과 같이 측정하는 서비스입니다.

  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.

    웹 스트림 세부 정보 개요

    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