├── .all-contributorsrc ├── .eslintignore ├── .eslintrc.json ├── .github ├── bug_report_issue_template.md ├── content_issue_template.md ├── feature_request_issue_template.md ├── pull_request_template.md └── workflows │ └── deploy.yml ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .vscode ├── extensions.json └── settings.json ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── babel.config.js ├── blog ├── 2019-05-29-hello-world.md ├── 2021-08-22-ga-url-fragmentation-issue.md ├── 2021-08-22-why-ga.md └── 2021-09-04-flutter-fb-analytics-plugin.md ├── docs ├── handbook │ ├── Part1. 구글 애널리틱스 기초 │ │ ├── 00-intro.md │ │ ├── 01-what-is-ga.mdx │ │ ├── 02-ga-simple.mdx │ │ ├── _category_.json │ │ ├── logo.png │ │ └── logo_lockup_analytics_icon_vertical_black_2x.png │ ├── Part2. 구글 애널리틱스 응용 │ │ └── 00-intro.md │ ├── Part3. 앰플리튜드 기초 │ │ └── 00-intro.md │ ├── Part4. 데이터로 사고하기 │ │ └── 00-intro.md │ ├── archive │ │ ├── Amplitude │ │ │ ├── 01-Settings │ │ │ │ └── amplitude-setting.md │ │ │ ├── 02-Basics │ │ │ │ ├── amplitude-chart.md │ │ │ │ ├── browse-charts.md │ │ │ │ ├── congratulations.md │ │ │ │ ├── dashboard.md │ │ │ │ ├── user-activity.md │ │ │ │ └── what-is-amplitude.md │ │ │ ├── 03-Advanced │ │ │ │ └── amplitude-advanced.md │ │ │ └── _category_.json │ │ ├── Google-Analytics │ │ │ ├── 01-Settings │ │ │ │ ├── 01-GA-hierarchy.md │ │ │ │ ├── 02-population-and-interests.md │ │ │ │ ├── 04-search-console.md │ │ │ │ ├── 05-filter.md │ │ │ │ └── google-ads.md │ │ │ ├── 02-Basics │ │ │ │ ├── 01-reports.md │ │ │ │ ├── 02-ABC-framework.md │ │ │ │ ├── 03-reports-advanced.md │ │ │ │ ├── 04-setting-goals.md │ │ │ │ ├── 05-event-tagging.md │ │ │ │ ├── 06-online-transaction.md │ │ │ │ ├── 07-ga-and-gtag.md │ │ │ │ ├── acquisition-reports.md │ │ │ │ ├── audience-reports.md │ │ │ │ ├── behavior-reports.md │ │ │ │ ├── conversion-reports.md │ │ │ │ ├── goals.md │ │ │ │ ├── how-to-collect-data.md │ │ │ │ ├── how-to-track-a-marketing-campaign.md │ │ │ │ ├── introduce.md │ │ │ │ ├── realtime-reports.md │ │ │ │ └── ua-ga4-difference.md │ │ │ ├── 03-Advanced │ │ │ │ ├── 01-terms.md │ │ │ │ ├── 02-acquisition.md │ │ │ │ ├── 03-behavior.md │ │ │ │ ├── 04-conversion.md │ │ │ │ ├── ab-test.md │ │ │ │ └── funnel-analysis.md │ │ │ └── _category_.json │ │ ├── Introduction │ │ │ ├── 01-importance-of-data-analysis.md │ │ │ ├── _category_.json │ │ │ └── blog.md │ │ ├── google-analytics-basics │ │ │ └── tracking-campaigns-with-URL-Builder.md │ │ ├── intro.md │ │ ├── outro.md │ │ ├── tutorial-basics │ │ │ ├── _category_.json │ │ │ ├── congratulations.md │ │ │ ├── create-a-blog-post.md │ │ │ ├── create-a-document.md │ │ │ ├── create-a-page.md │ │ │ ├── deploy-your-site.md │ │ │ └── markdown-features.mdx │ │ └── tutorial-extras │ │ │ ├── _category_.json │ │ │ ├── manage-docs-versions.md │ │ │ └── translate-your-site.md │ └── intro.md └── react-analytics-provider │ ├── intro.md │ └── start │ ├── _category_.json │ └── installation.md ├── docusaurus.config.js ├── package.json ├── sidebars.js ├── src ├── components │ ├── ChatBox │ │ └── index.tsx │ ├── HomepageFeatures.tsx │ ├── WikiSearch │ │ ├── LetterButtonList.tsx │ │ ├── LetterFilter.tsx │ │ ├── SearchInput.tsx │ │ └── index.tsx │ └── WikiTable │ │ ├── WikiTable.tsx │ │ ├── WikiTableRow.tsx │ │ └── index.ts ├── css │ └── custom.css ├── hooks │ ├── usePagination.ts │ └── useSearch.ts ├── pages │ ├── index.js │ ├── index.module.css │ ├── markdown-page.md │ └── wiki │ │ └── index.js ├── plugins │ └── webpack-configure │ │ └── index.ts ├── theme │ ├── Footer │ │ ├── index.tsx │ │ └── styles.module.css │ ├── Root.tsx │ └── mq.ts └── types │ ├── WikiWord.ts │ └── index.ts ├── static ├── .nojekyll ├── img │ ├── characters │ │ ├── rabbit │ │ │ └── rabbit-happy.png │ │ └── raccoon │ │ │ └── raccoon-dizzy.png │ ├── docusaurus.png │ ├── favicon.ico │ ├── logo.svg │ ├── tutorial │ │ ├── docsVersionDropdown.png │ │ └── localeDropdown.png │ ├── undraw_docusaurus_mountain.svg │ ├── undraw_docusaurus_react.svg │ └── undraw_docusaurus_tree.svg ├── korean-consonants.ts └── searchLetter.ts ├── tsconfig.json ├── wiki.json └── yarn.lock /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "web-analytics-handbook", 3 | "projectOwner": "EveryAnalytics", 4 | "files": [ 5 | "README.md" 6 | ], 7 | "imageSize": 100, 8 | "commit": false, 9 | "contributors": [ 10 | { 11 | "login": "hiphapis", 12 | "name": "Johan Kim", 13 | "avatar_url": "https://avatars.githubusercontent.com/u/18629?v=4", 14 | "profile": "http://hiphapis.net", 15 | "contributions": [ 16 | "review", 17 | "code" 18 | ] 19 | }, 20 | { 21 | "login": "hy57in", 22 | "name": "HyojinKim", 23 | "avatar_url": "https://avatars.githubusercontent.com/u/60775453?v=4", 24 | "profile": "https://velog.io/@gwsyl22", 25 | "contributions": [ 26 | "doc" 27 | ] 28 | }, 29 | { 30 | "login": "josworks27", 31 | "name": "Seongcheol Jo", 32 | "avatar_url": "https://avatars.githubusercontent.com/u/48130830?v=4", 33 | "profile": "https://github.com/josworks27", 34 | "contributions": [ 35 | "code" 36 | ] 37 | }, 38 | { 39 | "login": "uoon-dev", 40 | "name": "uoon (philos)", 41 | "avatar_url": "https://avatars.githubusercontent.com/u/38661266?v=4", 42 | "profile": "https://github.com/uoon-dev", 43 | "contributions": [ 44 | "doc", 45 | "code" 46 | ] 47 | }, 48 | { 49 | "login": "jiyoon1156", 50 | "name": "Jiyoon Hur", 51 | "avatar_url": "https://avatars.githubusercontent.com/u/60052127?v=4", 52 | "profile": "https://forhjy.medium.com/", 53 | "contributions": [ 54 | "doc" 55 | ] 56 | }, 57 | { 58 | "login": "greatSumini", 59 | "name": "Choi Sumin", 60 | "avatar_url": "https://avatars.githubusercontent.com/u/48555121?v=4", 61 | "profile": "https://sumini.dev", 62 | "contributions": [ 63 | "code", 64 | "doc" 65 | ] 66 | }, 67 | { 68 | "login": "yeppin", 69 | "name": "Yebin Seo", 70 | "avatar_url": "https://avatars.githubusercontent.com/u/81066071?v=4", 71 | "profile": "https://github.com/yeppin", 72 | "contributions": [ 73 | "code" 74 | ] 75 | } 76 | ], 77 | "contributorsPerLine": 7, 78 | "repoType": "github", 79 | "repoHost": "https://github.com", 80 | "skipCi": false 81 | } 82 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build 3 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", // eslint to TS 3 | "plugins": ["@typescript-eslint"], 4 | "extends": [ 5 | "plugin:@typescript-eslint/recommended", // ts 추천 rules https://github.com/typescript-eslint/typescript-eslint#readme 6 | "plugin:react/recommended", // react 추천 rules. https://github.com/yannickcr/eslint-plugin-react 7 | "plugin:react-hooks/recommended", // react-hook 추천 rules. https://github.com/facebook/react 8 | "plugin:jsx-a11y/recommended", // jsx 추천 rules. https://www.npmjs.com/package/eslint-plugin-jsx-a11y 9 | "plugin:import/errors", // es6+ import/export syntax linting 지원. https://www.npmjs.com/package/eslint-plugin-import 10 | "plugin:import/warnings" // es6+ import/export syntax linting 지원. https://www.npmjs.com/package/eslint-plugin-import 11 | ], 12 | "parserOptions": { 13 | "ecmaVersion": 2018, // 문법 지원 (기본 값으로 둠) 14 | "sourceType": "module" // 모듈 시스템 사용 15 | }, 16 | "rules": { 17 | // custom 해야할 규칙 선언 18 | "@typescript-eslint/explicit-module-boundary-types": "off", 19 | "@typescript-eslint/no-var-requires": "off", 20 | "react/react-in-jsx-scope": "off", 21 | "import/no-unresolved": "off" 22 | }, 23 | "settings": { 24 | "react": { 25 | "version": "detect" 26 | }, 27 | // module resolve issue로 인해 추가, https://stackoverflow.com/questions/55198502/using-eslint-with-typescript-unable-to-resolve-path-to-module 28 | "import/resolver": { 29 | "node": { 30 | "extensions": [".js", ".jsx", ".ts", ".tsx"] 31 | } 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /.github/bug_report_issue_template.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | 4 | 5 | > 6 | 7 | ## How to fix 8 | 9 | 10 | 11 | ## Progress 12 | 13 | 14 | 15 | - [] todo1 16 | - [] todo2 17 | - [] todo3 18 | 19 | ## Additional context 20 | 21 | 22 | -------------------------------------------------------------------------------- /.github/content_issue_template.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | 4 | 5 | > 6 | 7 | ## Details 8 | 9 | 10 | 11 | - [] detail1 12 | - [] detail2 13 | - [] detail3 14 | 15 | ## Additional context 16 | 17 | 18 | -------------------------------------------------------------------------------- /.github/feature_request_issue_template.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | 4 | 5 | > 6 | 7 | **_why is it necessary?_** 8 | 9 | 10 | 11 | ## Progress 12 | 13 | 14 | 15 | - [] todo1 16 | - [] todo2 17 | - [] todo3 18 | 19 | ## Additional context 20 | 21 | 22 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | 4 | 5 | ## Help Wanted 👀 6 | 7 | 8 | 9 | ## Related Issues 10 | 11 | resolve # 12 | fix # 13 | 14 | ## Checklist ✋ 15 | 16 | 17 | 18 | - [ ] 모든 **변경점**들을 확인했으며 적절히 설명했습니다. 19 | - [ ] 빌드가 정상적으로 수행됨을 확인했습니다. (`yarn build`) 20 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | deploy: 10 | name: Deploy 11 | runs-on: ubuntu-18.04 12 | 13 | steps: 14 | - uses: actions/checkout@v2 15 | - uses: actions/setup-node@v1 16 | with: 17 | node-version: '12.x' 18 | 19 | - name: Install dependencies 20 | uses: Borales/actions-yarn@v2.3.0 21 | with: 22 | cmd: install 23 | 24 | - name: Build 25 | uses: Borales/actions-yarn@v2.3.0 26 | with: 27 | cmd: build 28 | 29 | - name: Deploy 30 | uses: peaceiris/actions-gh-pages@v3 31 | with: 32 | github_token: ${{ secrets.GITHUB_TOKEN }} 33 | publish_dir: ./build 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .env 2 | # Dependencies 3 | /node_modules 4 | 5 | # Production 6 | /build 7 | 8 | # Generated files 9 | .docusaurus 10 | .cache-loader 11 | 12 | # Misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | 23 | #Ide 24 | .idea 25 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Ignore 2 | node_modules 3 | build 4 | 5 | # Ignore files 6 | *.html 7 | *.md 8 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all", 4 | "printWidth": 80, 5 | "arrowParens": "avoid" 6 | } 7 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"] 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "esbenp.prettier-vscode", 3 | "editor.formatOnSave": true, 4 | "editor.codeActionsOnSave": { 5 | "source.fixAll": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # 행동 규범(Code of Conduct) 2 | 3 | ## 서약 4 | 5 | 본 프로젝트의 기여자(contributor) 및 메인테이너(maintainer)는 개방적이고 친근한 환경을 조성하기 위해 나이, 신체, 장애, 경험 수준, 국적, 외모, 인종, 종교, 성적 정체성 및 성향에 관계없이 모든 사람이 본 프로젝트에 참여할 수 있도록 최선을 다할 것을 서약합니다. 6 | 우리는 이슈 보고, 기능 요청, 문서 업데이트, 풀 리퀘스트(pull request) 또는 패치(patch) 제출, 그리고 기타 다른 활동으로 기여하는 모든 분들을 존중할 것을 서약합니다. 7 | 8 | 9 | ## 표준 10 | 11 | 기여자가 해야 할 행동은 다음과 같습니다. 12 | 13 | - 바르고 고운 언어 사용하기 14 | - 서로 다른 관점과 경험을 존중하기 15 | - 열린 마음을 가지고 건설적인 비판을 수용하기 16 | - 커뮤니티에 가장 도움이 되는 것이 무엇인지 생각하기 17 | - 다른 커뮤니티 구성원들의 의견에 대한 공감을 표현하기 18 | - 이해와 존중을 기반한 원활한 소통하기 19 | 20 | 기여자가 하지 말아야 할 행동은 다음과 같습니다. 21 | 22 | - 성적인 언어 또는 이미지를 사용하거나, 불쾌한 성적 관심 또는 접근을 할 경우 23 | - 불필요한 논쟁을 할 경우 24 | - 모욕적 또는 비하하는 댓글을 남길 경우 25 | - 사적인 또는 정치적인 공격을 할 경우 26 | - 공개적이거나 사적인 괴롭힘을 할 경우 27 | - 동의없이 타인의 집주소 또는 전자주소 등의 개인 정보를 공개할 경우 28 | - 그 외에 부적절한 것으로 간주될 수 있는 다른 행위 29 | - 위와 같은 상황들을 방관할 경우 30 | 31 | 32 | ## 책임 33 | 34 | 프로젝트 메인테이너는 행동의 기준을 명확히 해야 할 책임이 있습니다. 또한, 용납 되어질 수 없는 행위들에 대해 적절하고 공정한 시정 조치를 취할 책임이 있습니다. 35 | 프로젝트 메인테이너는 본 행동 규범에 부합하지 않거나 부적절한 것으로 간주되는 코멘트, 커밋, 코드, 위키 편집, 이슈와 다른 기여들에 대해 삭제, 수정 또는 거부할 수 있는 권한을 가지고 있습니다. 또한, 이외에 옳지 못한 행동을 한 기여자를 일시적 또는 영구적으로 퇴장시킬 수 있습니다. 36 | 프로젝트 메인테이너는 프로젝트 관리의 모든 관점에서 이러한 행동 규범 원칙을 공정하고 일관되게 적용할 것을 약속해야 합니다. 행동 규범을 준수하지 않거나 시행하지 않는 프로젝트 메인테이너는 프로젝트팀에서 영구적으로 제명될 수 있습니다. 37 | 38 | 39 | ## 범위 40 | 41 | 본 행동 강령은 프로젝트 활동 영역 내에서뿐만 아니라 개인이 프로젝트 또는 커뮤니티를 대변하는 경우 공공의 활동 영역에서도 적용됩니다. 이것은 공식 프로젝트 이메일 사용, 공식 소셜 미디어 계정을 통한 포스팅, 온라인 또는 오프라인에서의 행사에서 보여지는 행동을 포함합니다. 프로젝트의 대표는 메인테이너에 의해 향후 정의되어지고 명시될 수 있습니다. 42 | 43 | 44 | ## 시행 45 | 46 | EveryAnalytics에서 발생하는 욕설, 희롱 또는 기타 용납 될 수 없는 행동은 hiphapis@gmail.com 을 통해 신고할 수 있습니다. 모든 불만 사항은 검토 및 조사될 수 있고, 상황에 따라 적절하다고 판단되는 대응을 취할 것입니다. 프로젝트 팀은 불만 사항을 알린 리포터에 관한 비밀을 유지할 의무가 있습니다. 특정 시행 정책에 대한 자세한 내용은 별도로 게시 될 수 있습니다. 47 | 48 | 49 | ## 속성 50 | 51 | 본 행동 규범은 https://github.com/cncf/foundation/blob/master/code-of-conduct-languages/ko.md 와 https://www.contributor-covenant.org/ko/version/1/4/code-of-conduct/ 에서 영감을 받아 작성하였습니다. 52 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Web-Analytics-Handbook 2 | 3 | ## Develop Environment 4 | - [yarn](https://classic.yarnpkg.com/en/docs/getting-started) -v.1.22.10 5 | - [vscode](https://code.visualstudio.com/) 6 | - [vscode plugin - eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) 7 | 8 | ## Installation 9 | 10 | 1. 이 저장소를 [Fork](https://help.github.com/articles/fork-a-repo/) 한 후 11 | 로컬 기기에 [clone](https://help.github.com/articles/cloning-a-repository/) 합니다. 12 | 2. 브랜치 생성: 13 | ``` 14 | git checkout -b MY_BRANCH_NAME 15 | ``` 16 | 3. 의존성 설치: 17 | ``` 18 | yarn install 19 | ``` 20 | 4. 라이브러리 개발 서버 띄우기: 21 | ``` 22 | yarn start 23 | ``` 24 | 5. 그 외 여러가지 명령어들을 사용해볼 수 있습니다. 25 | ``` 26 | # 빌드 27 | yarn build 28 | ``` 29 | 30 | ## Commit message 31 | 32 | 커밋 메세지는 제목과 본문을 포함해야합니다. 33 | 34 | 제목은 해당 커밋에 대한 주요 내용을 간략하게 기록합니다. 35 | 36 | 본문은 커밋에서 수정된 상세내역을 작성합니다. 생략 가능하며, `어떻게`보단 `무엇을`, `왜` 해결했는지 적어주시는 것이 좋습니다. 37 | 38 | 상황에 따라 연관된 이슈 트래킹 번호를 포함합니다. 39 | 40 | ## Issue 41 | 42 | - 각 이슈는 1개의 주제만 포함해야합니다. 43 | - 문제상황이나 제안을 포함해주세요. 44 | - 최대한 구체적이고 명확하게 작성해주세요. *필요에 따라 스크린샷도 첨부해주세요. 45 | - 직관적인 이해를 돕기 위해 자신의 이슈에 해당되는 라벨을 적용해주세요. 46 | 47 | ## Pull request(PR) 48 | 49 | `main` 브랜치에 PR을 열어주세요. 50 | 51 | 각 PR은 1개의 주제만 포함해야합니다. 1개의 주제는 여러 부분의 코드를 수정할 수도 있습니다. 52 | - 예1) ```용어집```: `용어사전 검색 및 필터 기능 구현`은 기능 구현, 디자인 및 UI 수정, 타입스크립트 적용 등을 포함합니다. 53 | - 예2) ```핸드북```: `퍼널 분석`은 문서 내용 추가, 해당 문서 position 코드 수정 등을 포함합니다. 54 | 55 | ## Coding Guidelines 56 | `vscode`의 `eslint` 플러그인을 통해 미리 설정된 코드 컨벤션을 적용하고 검사해볼 수 있습니다. 57 | 58 | ## Add yourself as a contributor 59 | 60 | 기여자 목록에 자신을 추가하려면 [All Contributors 봇 설명서](https://allcontributors.org/docs/en/bot/usage)를 참고하세요 :) -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 EveryAnalytics 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 |

Web Analytics Handbook

5 | 6 |

7 | 8 |

9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

19 | 20 | ## 1. Introduce 21 | 22 | > 개발자를 위한 웹 사용자 데이터 분석 핸드북 23 | 24 | - **DAU, GA... 먹는건가요?🤔** 25 | 26 | 사용자 데이터 분석(Daily Active User, 전환율 측정 등)은 모던 웹 프로젝트에서 필수적인 부분이지만, 어디서부터 시작해야 할지 막막해하는 개발자들이 많습니다. 이 핸드북을 통해 기초적인 분석에 대한 개념을 잡습니다. 27 | 28 | - **개발자에게 필요한 웹 분석 지식📚** 29 | 30 | 여러분의 프로젝트에 웹 분석 툴을 연동하기 위해선 어떤 코드가 필요할까요? 31 | 32 | - **GA와 Amplitude를 한번에🐰🐰** 33 | 34 | react-analytics-provider 오픈소스를 통해 Google Analytics, Amplitude와 같은 분석 툴 도입의 진입 장벽을 낮출 수 있습니다. 35 | 36 | ## 2. Contents 37 | 38 | - **📚 핸드북** : 사용자 데이터 분석에 대한 전반적인 개념을 잡습니다. 39 | 40 | - **💡 react-anlytics-provider** : 프로젝트에 웹 분석 툴을 연동할 수 있도록 도와주는 라이브러리입니다. 41 | 42 | - **👾 블로그** : 사용자 데이터 분석에 대한 자유로운 포스트를 모아놓은 블로그입니다. 라이브러리를 개발하며 생긴 트러블슈팅이나 일기 등 개발에 관한 이야기도 있어요! 43 | 44 | - **🙋🏻 용어사전** : 사용자 데이터 분석에 대한 용어를 한데 모아놓은 용어사전입니다. 45 | 46 | ## 3. Contributors 47 | 48 | This project exists thanks to all the people who contribute. [[Contributing](https://github.com/EveryAnalytics/react-analytics-provider/blob/main/CONTRIBUTING.md)] 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 |

Johan Kim
👀 💻
HyojinKim
📖
Seongcheol Jo
💻
uoon (philos)
📖 💻
Jiyoon Hur
📖
Choi Sumin
💻 📖
Yebin Seo
💻
64 | 65 | 66 | 67 | 68 | 69 | 70 | ## 4. License 71 | 72 | Licensed under the MIT License, Copyright (c) 2021 EveryAnalytics. 73 | 74 | See [LICENSE](https://github.com/EveryAnalytics/web-analytics-handbook/blob/main/LICENSE) for more information. 75 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset'),[ 3 | "@babel/preset-react", 4 | { "runtime": "automatic", "importSource": "@emotion/react" } 5 | ]], 6 | plugins: ["@emotion/babel-plugin", [ 7 | "module-resolver", 8 | { 9 | "root": ["./src/"], 10 | "extensions": [".ts", ".tsx", ".js", ".jsx"] 11 | } 12 | ]] 13 | }; 14 | -------------------------------------------------------------------------------- /blog/2019-05-29-hello-world.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: hello-world 3 | title: Hello 4 | author: Endilie Yacop Sucipto 5 | author_title: Maintainer of Docusaurus 6 | author_url: https://github.com/endiliey 7 | author_image_url: https://avatars1.githubusercontent.com/u/17883920?s=460&v=4 8 | tags: [hello, docusaurus] 9 | --- 10 | 11 | Welcome to this blog. This blog is created with [**Docusaurus 2**](https://docusaurus.io/). 12 | 13 | 14 | 15 | This is a test post. 16 | 17 | A whole bunch of other information. 18 | -------------------------------------------------------------------------------- /blog/2021-08-22-ga-url-fragmentation-issue.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: url-fragmentation 3 | title: GA URL fragmentation Issue 4 | author: YoungChang Lee 5 | author_url: https://github.com/p-iknow 6 | author_image_url: https://avatars.githubusercontent.com/u/35516239?v=4 7 | tags: [google-analytics, url-fragmentation] 8 | --- 9 | 10 | ## URL fragmentation 이슈란? 11 | 운영중인 사이트의 특정 페이지에서 Query String를 쓰고 있다면, 사용자는 `www.yoursite.com` 과 `www.yoursite.com?WEB_BNNR_ID=123` URI로 모두 접근할 수 있다. 아마도 GA 분석시 2 URI 모두 하나의 페이지 값으로 기록될 것을 기대 하겠지만 GA 에서는 아래와 같이 기록된다. 이것이 바로 URL fragmentation 이슈이다. 12 | 13 | ![url-fragmentation-issue](https://user-images.githubusercontent.com/35516239/130347429-d05e9139-866d-4acf-8c08-41142cf16ae4.png) 14 | 15 | `www.yoursite.com` 과 `www.yoursite.com?WEB_BNNR_ID=123` 두 URL 모두 같은 페이지를 의미하기 때문에 운영 중인 보기(View)에서는 두 페이지의 측정기준(Dimension)을 통합 하는 것이 유용하다. 여러 요청 URI 가 동일 사용자 경험을 나타낸다면 GA 에서 이들을 단일 페이지로 통합해야 한다. 16 | 17 | Query String 이외에 trailing slash 로 인한 fragmentation 이슈도 있다. `www.yoursite.com/page-name/` 과 `www.yoursite.com/page-name` 로 같은 페이지 접속이 가능할 때 두 URL 이 각각 다른 페이지 값으로 기록된다. 참고로 `www.yoursite.com/page-name/` 에서 맨 마지막에 붙은 `/` 문자가 trailing slash 이다. 18 | 19 | ## 요청 URI 를 통합하는 방법 20 | ### 1) Query String을 제거하는 필터 설정하기 21 | ![image](https://user-images.githubusercontent.com/35516239/130347651-5bc8bc66-f4ab-41ab-ab89-c40f8d6ed764.png) 22 | 23 | - 필드 A → 추출 A : `(.*?)\?` 24 | - 출력 대상 → 생성자: `$A1` (여기서 `$A1` 위 필터에서 추출된 값을 변수로 표현한 문자) 25 | 26 | 위와 같이 필터를 설정 하면 Query String이 다른 두 페이지가 `www.yoursite.com` 과 `www.yoursite.com?WEB_BNNR_ID=123` 가 동일하게 `/` 로 기록된다. 27 | 28 | 운영중인 사이트에 다양한 쿼리스트링이 사용되지 않고 있다면 아래와 같이 검색어 매게 변수 제외 사항에 사이트에 사용되는 Query String을 입력하는 것만으로 충분하다. 29 | ![image](https://user-images.githubusercontent.com/35516239/130347850-ef76d816-8b71-43ec-a4ae-9e2b3520a3d0.png) 30 | 31 | 32 | ### 2) Trailing Slash 필터 설정 33 | ![image](https://user-images.githubusercontent.com/35516239/130347721-a11ef326-4434-493d-888d-4f5a1c47cc45.png) 34 | 35 | - 필드 A → 추출 A : `^/(.*?)/+$` 36 | - 출력 대상 → 생성자: `/$A1` (여기서 `$A1` 위 필터에서 추출된 값을 변수로 표현한 문자) 37 | 38 | 위와 같이 필터를 설정하면 `www.yoursite.com/page-name/` 과 `www.yoursite.com/page-name` 두 페이지 모두 `/page-name` 로 기록된다. 39 | 40 | ## 마치며 41 | 42 | 전반적으로 URL fragmentation 이슈가 언제나 문제 되는 것은 아니지만, 문제가 되는 경우에는 큰 문제가 된다. 다른 모든 것이 제대로 구현된 많은 GA 계정에서도 URL Fragmentation 는 수만 개나 때로는 수십만 개로 분활된 요청 URI를 만들어 낸다. 이 글에서 제시된 해결책으로 해당 문제를 미연에 방지할 수 있다. 43 | -------------------------------------------------------------------------------- /blog/2021-08-22-why-ga.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: why-ga 3 | title: Why Google Analytics? 4 | author: Miryang Jung 5 | author_url: https://github.com/MiryangJung 6 | author_image_url: https://avatars.githubusercontent.com/u/48237511?v=4 7 | tags: [google-analytics] 8 | --- 9 | 10 | # 왜 구글 애널리틱스인가? 11 | 12 | 구글 애널리틱스는 구글이 제공하는 웹 분석 서비스입니다. 13 | 14 | 현재 가장 널리 사용되고 있는 분석 서비스이기도 합니다. 15 | 16 | 마케팅, 비즈니스를 위해 데이터를 수집할 수 있는 좋은 도구인 구글 애널리틱스를 왜 사용해야 하는지 이유를 알아보겠습니다. 17 | 18 | ## 비용 19 | 20 | 대부분의 중요 기능이 무료로 제공됩니다. 21 | 22 | 웹사이트에 구글 애널리틱스 추적 코드를 설치하는 과정도 쉽기 때문에 추가적인 비용도 들지 않습니다. 23 | 24 | ## 온라인 트래픽 추적 25 | 26 | 온라인 트래픽, 쉽게 말하면 방문자 유입을 추적할 수 있습니다. 27 | 28 | 소셜 미디어에서 유입이 되는지, 어떤 검색어로 유입이 되는지, 피크 시간 등을 확인할 수 있습니다. 29 | 30 | 이러한 트래픽들을 확인하여 비즈니스에서 데이터 기반 결정을 내릴 수 있습니다. 31 | 32 | ## 사용자 행동 파악 33 | 34 | 구글 애널리틱스는 사용자 행동을 측정합니다. 35 | 36 | 측정 항목에는 이탈률, 평균 세션 시간, 세션당 페이지 수 등이 있습니다. 37 | 38 | 예를 들어 이탈률은 사용자가 아무 행동 없이 사이트를 떠나는 비율입니다. 39 | 40 | 이탈률이 높을 수록 첫 페이지에 흥미를 느끼지 못한다고 생각할 수 있으며, 이탈률을 낮추기 위한 전략을 짤 수 있습니다. 41 | 42 | 이처럼 사용자와 직접 대화하지 않고도 사용자와 상호 작용할 수 있습니다. 43 | 44 | ## 검색 엔진 최적화 45 | 46 | 웹사이트가 검색 엔진 상위에 위치하는 것은 비즈니스적 측면에서 중요합니다. 47 | 48 | 구글 애널리틱스와 구글 서치 콘솔을 연결하여 검색 엔진 최적화(SEO)를 위한 데이터를 얻을 수 있습니다. 49 | 50 | 클릭이 많은 페이지, 가장 많이 조회하는 컨텐츠를 파악하여 인기 키워드를 파악할 수 있습니다. 51 | 52 | ## 웹페이지 최적화 53 | 54 | 사용자들은 pc, 태블릿, 모바일 등 다양한 기기와 해상도 그리고 브라우저를 사용하고 있습니다. 55 | 56 | 구글 애널리틱스에서 가장 많이 사용하는 브라우저, 기기 등을 파악하여 웹페이지 최적화에 사용할 수 있습니다. 57 | 58 | 구글 애널리틱스는 강력한 도구이지만 잘 사용하기 위해선 공부도 필요합니다. 59 | 60 | - [구글 애널리틱스 아카데미](https://analytics.google.com/analytics/academy/) 61 | 62 | 데이터를 수집하는 것도 중요하지만, 제대로 분석하는 것도 중요합니다. 63 | 64 | 웹사이트에 구글 애널리틱스를 설치하고 다양하게 활용해보면 비즈니스 성과를 볼 수 있을 것입니다. 65 | 66 | ## refer 67 | 68 | - [https://engaiodigital.com/google-analytics/](https://engaiodigital.com/google-analytics/) 69 | - [https://thrivehive.com/why-use-google-analytics/](https://thrivehive.com/why-use-google-analytics/) -------------------------------------------------------------------------------- /blog/2021-09-04-flutter-fb-analytics-plugin.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Flutter 플러그인으로 ecommerce 이벤트 보낼 때 생긴 일 3 | author: Dayoung Kang 4 | author_url: https://github.com/alledy 5 | author_image_url: https://avatars.githubusercontent.com/u/46309894?v=4 6 | tags: [flutter, firebase, google-analytics] 7 | --- 8 | 9 | :::note 10 | 11 | 이 글은 Flutter 플러그인으로 ecommerce 이벤트를 보내는 방법에 대한 내용이 아닙니다. 제가 겪은 이슈를 공유하는 차원의 글이며 세부적인 구현은 들어있지 않으므로 감안하고 봐주시면 감사하겠습니다🙋🏻‍♀️ 12 | 13 | ::: 14 | 15 | ## What is Flutter? 16 | 17 | [Flutter](https://flutter.dev/)(이하 플러터)는 구글에서 만든 크로스 플랫폼 어플리케이션을 만들 수 있는 SDK이며 하나의 코드베이스에서 안드로이드, iOS 앱, 웹까지 만들 수 있어 개발 생산성을 높여줍니다. 18 | 19 | 플러터 생태계에는 여러 패키지와 플러그인이 있습니다. 여기서 말하는 플러그인은 패키지 종류의 하나로 Android, iOS와 같은 특정 플랫폼에 기능을 구현하기 위한 목적을 갖고 있습니다. 그래서 플러그인은 타겟 플랫폼의 네이티브 언어와 [Dart](https://dart.dev/)(플러터의 프로그래밍 언어) 코드로 쓰여진 API로 구성돼 있습니다. 플러그인과 관련한 공식 문서는 [여기](https://flutter.dev/docs/development/packages-and-plugins/using-packages)를 참고해보세요. 그리고 플러터 패키지와 플러그인은 [pub.dev](https://pub.dev/) 사이트에서 검색해볼 수 있습니다. 20 | 21 | ## What's the matter with the plugin? 22 | 23 | 제가 다니는 회사에서는 플러터 웹뷰로 만들어진 앱이 있었고 그 앱의 사용자 데이터를 `Google Analytics`로 보내서 분석하고자 했습니다. 앱에 구글 애널리틱스를 연결하는 방법은 한 가지가 아니지만, 구글에서 권장하는 방법은 [Firebase SDK를 설치](https://firebase.google.com/docs/analytics)하는 것입니다. 그래서 Firebase SDK를 설치했습니다. 그리고 그 다음엔 어떻게 해야할까요? [안드로이드에 애널리틱스를 연결하는 방법](https://developers.google.com/analytics/devguides/collection/firebase/android/start)과 [iOS에 애널리틱스를 연결하는 방법](https://developers.google.com/analytics/devguides/collection/firebase/ios/start)에 관한 문서가 각각 있습니다. 하지만 플러터는 크로스 플랫폼을 지원하죠. 플러터 앱에는 어떻게 애널리틱스를 연결하면 좋을까요? 24 | 25 | 위에서 언급한 플러그인이 이 때 필요합니다. 물론 플러그인을 안 쓰고 직접 구현해도 되지만 생산성을 위해서 [firebase_analytics](https://pub.dev/packages/firebase_analytics) 플러그인을 사용했습니다. 만약 플러터 앱에서 커스텀 플랫폼 코드를 직접 쓰는 방법이 궁금하다면 [여기](https://flutter.dev/docs/development/platform-integration/platform-channels)를 참고해보세요. 26 | 27 | ![image](https://user-images.githubusercontent.com/46309894/132012289-4a26bb51-360e-438e-b67b-64779d16ba78.png) 28 | 29 | 플러터 앱에서 이 플러그인이 제공하는 Dart API를 사용한다면 우리가 직접 Android와 iOS, Web에 각각 애널리틱스를 적용하는 코드를 구현하지 않아도 되는 것이죠. 각각의 플랫폼 코드가 어떻게 구현되어 있는지 세부 구현은 알지 못하더라도 추상화된 메서드로 한 번에 처리할 수 있는 게 장점입니다. 30 | 31 | [logEvent](https://pub.dev/documentation/firebase_analytics/latest/firebase_analytics/FirebaseAnalytics/logEvent.html)라는 플러그인 메서드를 플러터 앱에 구현하는 예시 코드를 보겠습니다. 일부만 있는 예시 코드이므로 세부적인 부분은 신경쓰지 않아도 됩니다. 32 | 33 | ```dart 34 | Future _sendAnalyticsEvent() async { 35 | // logEvent 메서드 호출 36 | await widget.analytics.logEvent( 37 | name: 'purchase', 38 | parameters: { 39 | 'items': [ 40 | { 41 | 'item_id': 'SKU_123', 42 | 'item_name': 'jeggings', 43 | 'item_category': 'pants', 44 | 'item_variant': 'black', 45 | 'item_brand': 'Google', 46 | 'price': 9.99 47 | }, 48 | { 49 | 'item_id': 'SKU_456', 50 | 'item_name': 'boots', 51 | 'item_category': 'shoes', 52 | 'item_variant': 'brown', 53 | 'item_brand': 'Google', 54 | 'price': 24.99 55 | } 56 | ], 57 | }, 58 | ); 59 | } 60 | ``` 61 | 62 | 여기서 호출하고 있는 logEvent 플러그인 메서드는 파이어베이스의 logEvent([iOS - Swift](https://firebase.google.com/docs/reference/swift/firebaseanalytics/api/reference/Classes/Analytics#logevent_:parameters:), [Android - Java]()) 메서드를 Dart 코드로 래핑한 것입니다. 내부에서는 사용자가 어떤 플랫폼을 사용하는지에 따라 해당 플랫폼 언어로 구현된 logEvent 메서드를 호출하게 합니다. 63 | 64 | 회사 코드에서도 저는 위의 예시처럼 사용자의 구매 행동을 기록하기 위해 `purchase` 이벤트를 보냈습니다. 이 purchase 이벤트 명세는 [여기](https://firebase.google.com/docs/reference/android/com/google/firebase/analytics/FirebaseAnalytics.Event#PURCHASE)에 나와 있습니다. (FYI. 편의를 위해서 더 읽기 쉬운 Android 문서를 링크했지만 [iOS](https://firebase.google.com/docs/reference/swift/firebaseanalytics/api/reference/Constants#analyticseventpurchase)도 패러미터 객체의 key로 쓰고 있는 constant value는 동일합니다.) 65 | 66 | 저는 이벤트 명세에서 정의된 대로 [items](https://firebase.google.com/docs/reference/android/com/google/firebase/analytics/FirebaseAnalytics.Param#ITEMS) 리스트를 보내도록 했습니다. [파이어베이스 문서](https://firebase.google.com/docs/analytics/measure-ecommerce)를 보면 purchase뿐만 아니라 모든 이커머스 이벤트 파라미터에, 각 아이템들의 정보를 담은 리스트인 `items` 필드가 포함되는 것을 알 수 있습니다. 67 | 68 | 그런데 이상하게 안드로이드에서만 이벤트가 누락되는 이슈가 생겼습니다. 69 | 70 | | ![image](https://user-images.githubusercontent.com/46309894/132041048-9329dc40-5e48-4773-ac33-b7b3dd036526.png) | 71 | | :-------------------------------------------------------------------------------------------------------------: | 72 | | _왜 안드로이드만...?_ | 73 | 74 | | ![image](https://user-images.githubusercontent.com/46309894/132098237-92c57edb-4502-4299-82e6-c237090be73c.png) | 75 | | :-------------------------------------------------------------------------------------------------------------: | 76 | | _개발 환경에서 실행한 디버그 뷰에서는 잘 잡히는데...?_ | 77 | 78 | 플러그인 메서드를 적용한 코드에는 문제가 없어보였습니다. 왜 안드로이드만 이벤트가 누락됐던 것일까요? 79 | 80 | ## The version problem 81 | 82 | 문제의 원인에 대한 힌트는 위의 이미지들이 알려주고 있습니다. 첫 번째는 안드로이드만 이벤트가 누락되고 있다는 점이고, 두 번째는 개발 환경에서 실행한 파이어베이스 실시간 디버그 뷰에서는 정상적으로 이벤트가 잡혔다는 것입니다. 즉 개발 환경과 실제 배포돼 있는 환경 간에 차이가 있는 부분에서 문제가 발생하고 있고, 안드로이드 쪽 코드를 살펴보면 그 원인이 밝혀질 것이라는 힌트입니다. 83 | 84 | 원인은 바로 플러그인 내부의 안드로이드 코드에 있었습니다. 스토어에 배포돼 있는 안드로이드 앱에서 사용하고 있는 firebase_analytics 플러그인은 버전이 `6.0.1`이었습니다. 반면에 저희가 개발 환경에서 사용하고 있는 플러그인 버전은 `8.0.1`이었습니다. `6.0.1` 버전의 firebase_analytics 플러그인 내부에 있는 안드로이드 Java 코드를 들여다보니 아래와 같았습니다. 비교하기 편하게 8.0.1 버전의 코드를 같이 보겠습니다. 참고로 플러터 프로젝트에 설치한 라이브러리 코드는 Flutter SDK가 설치되어 있는 디렉토리의 `.pub-cache` 폴더에서 확인할 수 있습니다. 85 | 86 | 아래의 `createBundleFromMap`은 `logEvent`로 전달된 파라미터를 그대로 전달받아서 [Bundle](https://developer.android.com/reference/android/os/Bundle.html)이라는 안드로이드 네이티브 클래스로 가공하는 메서드입니다. 요지는 logEvent로 전달된 파라미터를 value 타입에 따라 분기하여 핸들링을 하고 있다는 것입니다. 87 | 88 | | ![image](https://user-images.githubusercontent.com/46309894/132042591-13dd1f5a-d603-4963-84dd-8c7375a8c0a4.png) | 89 | | :-------------------------------------------------------------------------------------------------------------: | 90 | | 6.0.1 | 91 | 92 | | ![image](https://user-images.githubusercontent.com/46309894/132042721-c5cf534a-add0-47aa-8d44-271c653e424d.png) | 93 | | :-------------------------------------------------------------------------------------------------------------: | 94 | | 8.0.1 | 95 | 96 | 차이점이 눈에 보이시나요? 6.0.1 버전에서는 패러미터 value가 Iterable일 때 핸들링하는 코드가 없습니다. 반면 8.0.1 버전에서는 Iterable일 때 처리하는 조건이 추가되었죠. 즉 제가 넣어준 `items`는 리스트 형태이므로 6.0.1 버전에서는 Unsupported value type이어서 핸들링되지 않았고, 결과적으로 안드로이드에만 이벤트가 누락됐던 것입니다. 플러그인의 [체인지 로그](https://pub.dev/packages/firebase_analytics/changelog#800-dev2)에서도 확인할 수 있었습니다. 이 문제는 버전을 올린 firebase_analytics 플러그인이 적용된 안드로이드 앱을 스토어에 재배포함으로써 해결했습니다. 97 | 98 | 저 또한 플러터를 잘 모르는 상태에서 겪은 상황이라 시행착오가 많았었는데요, 크로스 플랫폼 앱에 애널리틱스를 연결할 때 문제가 있다면 이 글이 트러블 슈팅에 도움이 되길 바라며 글을 마치겠습니다🙌 99 | -------------------------------------------------------------------------------- /docs/handbook/Part1. 구글 애널리틱스 기초/00-intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | tags: [GoogleAnalytics, GA] 3 | sidebar_collapsed: false 4 | --- 5 | 6 | # 들어가며 7 | 8 | > 본 자료는 개발자가 구글 애널리틱스를 웹사이트에 연동하는 과정을 설명한 글입니다. 초보자를 대상으로 하며, 구글애널리틱스 최신 버전(GA4)를 사용합니다. 9 | 10 | ## Part.1에서 익힐 수 있는 개념 11 | 12 | - 왜 구글 애널리틱스를 사용해야 할까요? 13 | - 어떤 데이터를 볼 수 있나요? 14 | - 버전이 2개가 있던데, GA4랑 UA의 차이가 궁금해요! 15 | - GA적용을 위해 사용할 수 있는 라이브러리 소개 (UA / GA4) 16 | - GA 사용을 위한 계정 생성 방법 17 | - GA 사용을 위한 스크립트 삽입 18 | - GA가 웹 프로젝트에 정상적으로 적용되었는지 확인하는 방법 19 | - GA 데이터가 프론트에 적용되고, 데이터가 수집되는 원리 20 | - GA로 페이지뷰 데이터 수집해보기 21 | - GA로 이벤트 호출 데이터 수집해보기 22 | - 개발자도 상식적으로 볼 줄 알아야 하는 GA의 핵심 지표 (2~3가지 정도) -------------------------------------------------------------------------------- /docs/handbook/Part1. 구글 애널리틱스 기초/01-what-is-ga.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | tags: [GoogleAnalytics, GA] 3 | sidebar_collapsed: false 4 | --- 5 | 6 | import ChatBox from '@site/src/components/ChatBox'; 7 | 8 | # 사람들은 우리 사이트를 어떻게 쓸까? 9 | 10 | ## 고객의 행동패턴이 궁금해요 11 | 12 | 신입 개발자 너구리가 스타트업에 취직했습니다. 과일을 파는 온라인 쇼핑몰이에요. 사수인 토끼님이 첫 임무를 주었습니다. 13 | 14 | 15 | 너굴님, 요즘 매출이 제자리걸음인데요, 분석툴을 도입해서 무엇이 문제인지 16 | 알아보려고 해요. 17 |
18 | 너굴님이 조사해주실 수 있나요? 19 | 20 | 21 | 넵! (분석툴이 없다고? 내가 활약할 수 있는 기회다!) 22 | 23 | 24 | 매출이 제자리걸음일 때, 즉 우리가 원하는 지표가 나오질 않을 때 **개발자**가 접근할 수 있는 가장 1차적인 방법은 **고객의 행동 패턴을 알아낼 수 있는 분석 툴(Product Analytics Tool) 도입**입니다. 25 | 26 | 우리 사이트엔 어떤 사람이 많이 들어올까요? 남자가 많을까요, 여자가 많을까요? 예상 외로 30대가 많이 들어온다면 마케팅의 방향이 달라지지 않을까요? 또 사이트에 들어와 가장 먼저 누르는 곳은 어디일까요? 3페이지에 위치해 있는데 메인에 노출되어 있는 상품보다 잘 팔린다면 그 제품을 어떻게 해야할까요? 27 | 28 | 우리는 분석 툴을 통해 어떤 고객이 어떤 방식으로 우리 사이트를 사용하는지 알아낼 수 있습니다.
29 | 마치 웹사이트에 스파이😎를 심어놓은것과 같죠. 30 | 31 | ## 어떤 분석 툴을 도입해야 하나요? 32 | 33 | 분석 툴의 글로벌 양대산맥은 `구글 애널리틱스(Google Analytics)`와 `앰플리튜드(Amplitude)`입니다. 둘 다 장점이 뚜렷하니 아래 글을 읽어보고 상황에 맞는 툴을 선택하시면 됩니다.
34 | 35 | 처음 도입하는 단계라면 두 툴 모두 넣어보시는 것도 추천해요. 써보고 선택하는게 제일이죠~ 36 | 37 | ### 구글 애널리틱스 38 | 39 | [![Google Analytics](./logo.png)](https://www.google.com/analytics) 40 | 41 | 바야흐로 세계에서 가장 널리 사용되는 분석 툴입니다(2021년 기준 시장 점유율 83%. [출처: W3techs](https://w3techs.com/technologies/overview/traffic_analysis)). 구글이 만들었으며, 지난 수십년간 수집한 머신러닝 데이터를 가공해 인구 통계 정보까지 보여줍니다.(e.g. 우리 사이트 방문자 성별 비율. 사이트에 들어올 때 성별 조사를 안 했어도 구글은 모두 알고 있어요) 42 | 43 | 특징은 다음과 같습니다. 44 | 45 | #### 1. 개인, 중소규모 회사까진 무료다 46 | 47 | 개인, 중소기업 정도의 데이터는 충분히 구글 애널리틱스를 무료로 사용할 수 있습니다.
\*대기업 규모의 데이터를 수집하려면 [애널리틱스360](https://marketingplatform.google.com/intl/ko/about/analytics/compare/) 이라는 플랜에 가입해야해요. 48 | 49 | #### 2. 다양한 구글 도구들과 통합된다 50 | 51 | 지금은 크게 못 느끼실 수 있지만, 매우 큰 장점입니다. Google Marketing Platform이라는 통합 솔루션을 통해 데이터 스튜디오(데이터 대쉬보드), 최적화도구(A/B테스팅 툴), 태그매니저(개발자 도움 없이 사이트 분석) 등 웹 데이터 관련 다양한 툴들과 쉽게 연동할 수 있게 해줍니다. 52 | 53 | #### 3. 참고할 자료가 많다 54 | 55 | 앰플리튜드와 비교했을 때 국내 도서, 블로그 등 자료가 많다는 점은 구글 애널리틱스가 가지는 장점 중의 하나입니다. 56 | 57 | ### 앰플리튜드 58 | 59 | (TODO: Amplitude 로고 넣기) 60 | 61 | 최근에 부상한 핫한 분석 툴입니다. 실리콘밸리 회사는 거의 앰플리튜드로 갈아타는 추세라 합니다. 62 | 63 | 특징은 다음과 같습니다. 64 | 65 | #### 1. 월 1000만건까지 무료다 66 | 67 | 앰플리튜드의 Starter 플랜은 월 1000만건까지는 무료로 사용이 가능합니다. Growth와 Enterprise는 유료플랜으로 사용하려는 서비스별로 가격이 상이하고 앰플리튜드 sales랑 컨택을 해서 가격을 책정해야합니다. 68 | 69 | #### 2. 데이터의 민주화 70 | 71 | 앰플리튜드는 개발자, 분석가뿐만 아니라 조직 내의 모든 사람이 사용자 데이터를 접근, 사용할 수 있게해 데이터의 민주화를 이루고 있다는 평을 듣곤 합니다. 아마도 실리콘밸리 회사들이 앰플리튜드로 갈아타고 있는 이유 중 하나겠죠? 72 | 73 | #### 3. (아직은) 참고 자료가 적다 74 | 75 | 구글 애널리틱스에 비해 참고할 문서가 현저히 적다는게 흠이지만, 76 | 77 | 이외에도 Amplitude Experiment(앰플리튜드에서 만든 A/B테스팅 툴)과 호환된다는 특징이 있습니다. 78 | 79 | --- 80 | 81 | :::tip 82 | 회사가 커지면 구글 애널리틱스든 앰플리튜드든 유료 플랜을 결제해야 하는 순간이 옵니다.
83 | 그렇게 돈 내고 쓰다가 회사가 더 커지면 자체적으로 분석 툴을 만들기도 해요!
84 | 유실되는 데이터가 없고 상상 이상으로 비싼 유료플랜 돈을 아낀다는 장점이 있습니다. 85 | ::: 86 | -------------------------------------------------------------------------------- /docs/handbook/Part1. 구글 애널리틱스 기초/02-ga-simple.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | tags: [GoogleAnalytics, GA] 3 | sidebar_collapsed: false 4 | --- 5 | 6 | import ChatBox from '@site/src/components/ChatBox'; 7 | 8 | # 구글 애널리틱스 찍어먹기 9 | -------------------------------------------------------------------------------- /docs/handbook/Part1. 구글 애널리틱스 기초/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "position": 2, 3 | "collapsed": false 4 | } 5 | -------------------------------------------------------------------------------- /docs/handbook/Part1. 구글 애널리틱스 기초/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EveryAnalytics/web-analytics-handbook/ce0cbd480642b9177af4a09e253d28ee77d87bd5/docs/handbook/Part1. 구글 애널리틱스 기초/logo.png -------------------------------------------------------------------------------- /docs/handbook/Part1. 구글 애널리틱스 기초/logo_lockup_analytics_icon_vertical_black_2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EveryAnalytics/web-analytics-handbook/ce0cbd480642b9177af4a09e253d28ee77d87bd5/docs/handbook/Part1. 구글 애널리틱스 기초/logo_lockup_analytics_icon_vertical_black_2x.png -------------------------------------------------------------------------------- /docs/handbook/Part2. 구글 애널리틱스 응용/00-intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: intro 3 | title: Intro 4 | author: Yurim Jin 5 | author_url: https://github.com/milooy 6 | author_image_url: https://avatars.githubusercontent.com/u/3839771?v=4 7 | tags: [GoogleAnalytics, GA] 8 | --- 9 | 10 | # Intro 11 | -------------------------------------------------------------------------------- /docs/handbook/Part3. 앰플리튜드 기초/00-intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: intro 3 | title: Intro 4 | author: Yurim Jin 5 | author_url: https://github.com/milooy 6 | author_image_url: https://avatars.githubusercontent.com/u/3839771?v=4 7 | tags: [GoogleAnalytics, GA] 8 | --- 9 | 10 | # Intro 11 | -------------------------------------------------------------------------------- /docs/handbook/Part4. 데이터로 사고하기/00-intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: intro 3 | title: Intro 4 | author: Yurim Jin 5 | author_url: https://github.com/milooy 6 | author_image_url: https://avatars.githubusercontent.com/u/3839771?v=4 7 | tags: [GoogleAnalytics, GA] 8 | --- 9 | 10 | # Intro 11 | -------------------------------------------------------------------------------- /docs/handbook/archive/Amplitude/01-Settings/amplitude-setting.md: -------------------------------------------------------------------------------- 1 | # Amplitude Setting 2 | -------------------------------------------------------------------------------- /docs/handbook/archive/Amplitude/02-Basics/amplitude-chart.md: -------------------------------------------------------------------------------- 1 | # 차트의 종류 2 | 3 | ### 1. 이벤트 분할 분석 (Event Segmentation) _(기본)_ 4 | 5 | - 이벤트에 대한 다각적인 분석이 가능합니다. 6 | - SQL에서 지원하는 모든 종류의 데이터 분석이 가능합니다. 7 | 8 | ### 2. 잔존율 분석 (Retention Analysis) _(기본)_ 9 | 10 | - 코호트별 잔존율, 제품 사용 주기 등을 알아볼 수 있습니다. 11 | - 웹사이트 방문 또는 앱 오픈 뿐 아니라, 모든 종류의 이벤트를 기준으로 잔존율 분석이 가능합니다. 12 | 13 | ### 3. 퍼널 분석 (Funnel Analysis) _(기본)_ 14 | 15 | - 원하는 이벤트를 퍼널로 설정하고, 각 퍼널별 전환율을 확인할 수 있습니다. 16 | - 퍼널 기반의 A/B 테스트 결과 분석이 가능합니다. 17 | - 특정 퍼널에서의 Group By 적용이 가능합니다. 18 | 19 | ### 4. 사용자 구성 분석 (User Composition) _(기본)_ 20 | 21 | - 전체 유저 혹은 특정 코호트 내에서 특정 사용자 속성값의 분포 양상을 확인할 수 있습니다. 22 | - 원하는 사용자 속성값을 기준으로 유저를 분류할 수 있습니다. 23 | 24 | ### 5. 사용자 경로 분석 (Pathfinder) 25 | 26 | - 사용자가 제품 내에서 어떤 경로로 이동하는지 구체적으로 파악할 수 있습니다. 27 | - 설정한 이벤트 노드(node)를 기준으로 사용자의 이동 경로를 시각화된 그래프로 보여줍니다. 28 | 29 | ### 6. 기능 활용도 분석 (Engagement Matrix) 30 | 31 | - 사용자들이 제품 내 기능들을 어떻게 사용하고 있는지 파악할 수 있습니다. 32 | - 기능별 사용 빈도 수 및 사용자 수를 사분면 그래프상에서 확인할 수 있습니다. 33 | - 개선이 필요한 기능을 한눈에 확인할 수 있습니다. 34 | 35 | ### 7. 라이프사이클 분석 (Lifecycle) 36 | 37 | - 제품 내 사용자들을 상태별로 구분하여 파악할 수 있습니다. 38 | - 설정한 기간별 제품 내 활성 사용자의 수를 신규, 현재, 복귀 세 가지 그룹으로 구분하여 확인할 수 있습니다. 39 | - 휴면 사용자 수를 확인할 수 있습니다. 40 | 41 | ### 8. 클러스터 분석 (Personas) 42 | 43 | - 제품 내 사용자들이 그룹별로 어떤 행동 특성을 보이는지 파악할 수 있습니다. 44 | - 유사한 사용자들을 묶어 자동으로 서로 다른 클러스터로 그룹화된 것을 확인할 수 있습니다. 45 | 46 | ### 9. 사용자 세션 (User Sessions) 47 | 48 | ### 10. Stickiness 49 | 50 | ### 11. Revenue LTV 51 | 52 | ### 12. Compass 53 | 54 | ### 13. Pathfinder Users 55 | 56 | ### 14. Impact analysis 57 | 58 | ## 참고 59 | 60 | [Working with charts](https://help.amplitude.com/hc/en-us/sections/206569568-Working-with-charts) 61 | -------------------------------------------------------------------------------- /docs/handbook/archive/Amplitude/02-Basics/browse-charts.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | 5 | # Browse Charts 6 | 7 | **_다양한 분석을 위한 차트를 생성하고 검색합니다._** 8 | 9 | **[Event Segmentation Chart]** 10 | 11 | 이벤트 및 이벤트를 수행한 사용자에 대한 세분화된 차트를 제공합니다. 12 | 13 | 선택한 기간 동안 사용자의 속성 혹은 이벤트의 속성별로 이벤트를 비교하거나 구분할 수 있습니다. 14 | 15 | **[User Composition Chart]** 16 | 17 | 사용자의 속성을 기반으로 활성되며, 사용자의 정보를 보여줍니다. 18 | 19 | **[User Session Chart]** 20 | 21 | 사용자의 세션 정보를 통해 사용자를 분석할 수 있습니다. 22 | 23 | - 세션 24 | 25 | > 1. 서버 : 세션 값을 session_id 속성에 담아 HTTP API를 사용합니다. 26 | > 2. 클라이언트 측 (모바일) : 모바일 SDK를 사용하여 서로 5분 이내에 트리거가 된 이벤트를 세션(동일한 session_id)로 계산합니다. 27 | > 3. 클라이언트 측 (웹) : 자바 스크립트 SDK를 사용하여 서로 30분 이내에 트리거가 된 이벤트를 현재 세션(동일한 session_id)로 계산합니다. 28 | -------------------------------------------------------------------------------- /docs/handbook/archive/Amplitude/02-Basics/congratulations.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 5 3 | --- 4 | 5 | # Congratulations! 6 | 7 | 당신은 amplitude의 기본 과정을 무사히 마치셨습니다! 8 | 9 | ## What's next? 10 | 11 | 이제 amplitude를 직접 적용하러 가봅시다! 12 | 13 | ##### 참고 14 | 15 | 해당 문서는 [이곳](https://brunch.co.kr/@joypinkgom/42)을 참고하여 작성되었습니다. 16 | -------------------------------------------------------------------------------- /docs/handbook/archive/Amplitude/02-Basics/dashboard.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Dashboard 6 | 7 | **_생성된 차트를 위젯 형식으로 모아서 표시합니다._** 8 | 9 | 뿐만 아니라, Dashboard에 추가된 차트를 클릭하여 다양한 상세정보를 확인할 수 있습니다. 10 | -------------------------------------------------------------------------------- /docs/handbook/archive/Amplitude/02-Basics/user-activity.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # User Activity 6 | 7 | **_사용자 정보(이벤트 기록, 사용자 정보, 사용 플랫폼 정보 등)을 제공합니다._** 8 | 9 | 이렇게 주어진 사용자 정보를 자세히 검색하며, 사용자별 이벤트 흐름을 모니터링 할 수 있습니다. 10 | -------------------------------------------------------------------------------- /docs/handbook/archive/Amplitude/02-Basics/what-is-amplitude.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Amplitude란? 6 | 7 | _모바일/웹을 위한 분석 서비스_ 8 | 9 | **서비스의 사용자의 행동을 분석할 수 있는 툴**로, 이벤트 기준의 정보 뿐만 아니라 사용자funnel, retention, stickiness, engagement metrix, life cycle 등을 다양한 방법으로 볼 수 있습니다. 10 | 11 | 유저 중심의 **퍼널 분석**을 하기 위해 도입하였습니다. 12 | 13 | - 퍼널 분석 14 | 15 | > 웹 사이트에 유입된 사용자가 ‘전환(Conversion)’에 이르기까지의 여정을 흐름대로 시각화하여 어떤 단계에서 가장 많이 이탈하는지를 알아보기 위한 방법 16 | 17 | ## 중요성 18 | 19 | 2020년 **“G2 Product Analytics report”** 에서 **프로덕트 분석 솔루션 1위**로 선정되었습니다. 20 | 21 | - G2 22 | 23 | > 공신력 있는 소프트웨어 리뷰 플랫폼 24 | > 25 | > 다수의 글로벌 디지털 프로덕트에 대한 사용자들의 평점 및 리뷰를 직접 확인하고 비교할 수 있습니다. 26 | 27 | 선정된 기준은 이렇습니다. 28 | 29 | - 프로덕트 분석 솔루션 업계 주요 플레이어 현황 30 | - 각 분석 툴 핵심 기능에 대한 평점 비교 31 | - 고객 만족도 랭킹에 기반한 툴 비교분석 32 | - 각 분석 툴에 대한 풍부한 사용자 리뷰 33 | 34 | G2는 프로덕트 분석 솔루션이 사용자와 제품 간 상호 작용에 대한 가시성을 확보해준다고 언급했습니다. 이 때 상호작용은 사용자 방문, 이벤트 등을 포함하는데요. 이러한 분석 툴들은 추출한 데이터를 대시보드와 보고서 형태로 제공하기 때문에 프로덕트 팀이 손쉽게 데이터를 기반으로 **실질적인 UX 개선 전략**을 도출할 수 있습니다. 35 | 36 | ## Amplitude 사이트 37 | 38 | [https://amplitude.com/](https://amplitude.com/) 39 | 40 | 해당 사이트에서 Amplitude를 시작할 수 있습니다. 41 | 또한, 무료로 기본적인 기능을 사용할 수 있는 라이센스 정책을 가지고 있습니다. 그렇기 때문에, 그 이상의 기능은 개인이 선택하여 유료 결제로 진행하면 되겠습니다. 42 | 43 | ## 제공하고 있는 기능 44 | 45 | ##### 1. Dashboards 46 | 47 | ##### 2. Browse Charts 48 | 49 | ##### 3. User Activity 50 | 51 | ##### 4. Behavioral Cohorts 52 | 53 | ##### 5. SQL 54 | -------------------------------------------------------------------------------- /docs/handbook/archive/Amplitude/03-Advanced/amplitude-advanced.md: -------------------------------------------------------------------------------- 1 | # Amplitude Advanced 2 | -------------------------------------------------------------------------------- /docs/handbook/archive/Amplitude/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Amplitude", 3 | "position": 4 4 | } 5 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/01-Settings/01-GA-hierarchy.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: ga4-hierarchy 3 | title: GA4 계층구조 4 | author: Jiyoon Hur 5 | author_url: https://github.com/jiyoon1156 6 | author_image_url: https://avatars.githubusercontent.com/u/60052127?v=4 7 | tags: [GoogleAnalytics, GA] 8 | --- 9 | # GA4 계층구조 10 | 11 | ## 1. 계층구조란? 12 | 13 | GA4의 계층구조는 조직(organization), 계정(account), 속성(property), 데이터 스트림(data stream)으로 이루어져있습니다. 기존 UA에서의 보기(view)가 데이터 스트림으로 변경되었습니다. 이 계층구조의 관계는 다음과 같습니다. 14 | 15 | - 구글계정 1개 → 구글 애널리틱스 계정 100개 생성 가능 16 | - 구글 애널리틱스 계정 1개 → 속성 100개 생성 가능 17 | - 속성 1개 → 데이터 스트림 50개 생성 가능 18 | 19 | 조직은 소속되어 있는 회사나 단체 혹은 개인이 될 수 있습니다. 이러한 조직은 구글 애널리틱스 계정을 생성할 수 있습니다. 그리고 이렇게 생성된 계정에는 속성을 추가할 수 있는데 속성이란 데이터를 수집하고 추적하려는 대상입니다. GA4에선 기본적으로 모바일 어플리케이션과 웹을 합친 속성을 제공합니다. 데이터 스트림은 하나의 속성 내에서 웹과 앱을 연결시켜 같은 데이터 흐름을 가질 수 있도록 도와주는 계층입니다. 20 | 21 | ## 2. 참고자료 22 | 23 | - [https://support.google.com/analytics/answer/9303323?hl=ko#zippy=%2C이-도움말에서는-다음-내용을-다룹니다](https://support.google.com/analytics/answer/9303323?hl=ko#zippy=%2C%EC%9D%B4-%EB%8F%84%EC%9B%80%EB%A7%90%EC%97%90%EC%84%9C%EB%8A%94-%EB%8B%A4%EC%9D%8C-%EB%82%B4%EC%9A%A9%EC%9D%84-%EB%8B%A4%EB%A3%B9%EB%8B%88%EB%8B%A4) 24 | - [https://brunch.co.kr/@seongminyoo/82](https://brunch.co.kr/@seongminyoo/82) 25 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/01-Settings/02-population-and-interests.md: -------------------------------------------------------------------------------- 1 | # 인구 통계, 관심 분야 설정 2 | 3 | ## 1. 인구 통계의 정의 4 | 5 | 인구 통계는 사용자의 '성별'과 '연령'을 의미합니다. 이 두 정보를 알면 사용자 범위를 좁혀서 핵심 사용자 중심으로 문제에 접근할 수 있습니다. 6 | 7 | 즉, 웹 사이트의 주요 고객을 파악하는 기본 정보라고도 볼 수 있습니다. 8 | 9 | ex) 20대 여성 사용자가 이탈률이 높은 이유는 무엇일까? 10 | 11 | ## 2. 관심 분야의 정의 12 | 13 | 관심 분야는 쇼핑, 비즈니스 등 웹 콘텐츠에서 사용자가 선호하는 주제를 의미합니다. 14 | 15 | ## 3. 관심 분야 보고서의 활용 16 | 17 | 관심분야 보고서에서는 방문자의 관심 분야에 대한 선호도 비율을 보여줍니다. 이런 보고서를 통해 타겟 잠재고객에게 광고가 게재되고 있는지 알 수 있으며, 마케팅 및 콘텐츠에 대한 전략적 결정을 내릴 때 참고할 수 있습니다. 18 | 19 | GA에서는 사용자의 관심 분야와 더불어 이것을 통해 사용자의 향후 구매 계획 정보까지 제공하는 등의 내용을 예측해줍니다. 20 | 21 | ## 4. 인구 통계 및 관심 분야 설정 활성화 22 | 23 | 구글 애널리틱스의 데이터는 대부분이 추적코드에 의해서 수집이 되지만, 인구통계나 관심분야는 구글이 보유한 광고 네트워크에서 수집된 정보를 활용합니다. 이런 주제는 개인정보처리방침과 관련되어 있어서 처음에는 비활성화되어 있기 때문에, 속성 설정에서 별도로 활성화시켜야 합니다. 24 | 25 | 1. '광고 보고 기능'을 지원하도록 애널리틱스를 업데이트하세요. 26 | 27 | 광고 보고 기능을 사용 설정하면 애널리틱스가 DoubleClick 쿠키(웹 활동)와 기기 광고 ID(앱 활동)로부터 추가 정보를 수집할 수 있게 됩니다. 28 | 29 | Google 애널리틱스 광고 기능을 사용하면 일반 구현을 통해 제공되지 않는 기능을 애널리틱스에서 사용할 수 있습니다. 30 | 31 | - Google 애널리틱스를 사용한 리마케팅 32 | - Google 디스플레이 네트워크 노출 보고서 33 | - Google 애널리틱스 인구통계 및 관심분야 보고서 34 | - 광고 쿠키 및 식별자를 이용한 데이터 수집을 포함하여 Google 애널리틱스에 의한 광고 목적의 데이터 수집을 필요로 하는 통합 서비스 35 | 36 | 2. 애널리틱스 광고 기능 정책을 준수하세요. 해당 정책은 [여기](https://support.google.com/analytics/answer/2700409)에서 확인하실 수 있습니다. 37 | 38 | 3. 인구통계 보고서와 관심분야 보고서를 사용 설정하세요. 39 | 40 | 관리 또는 보고서 탭에서 인구통계 보고서와 관심분야 보고서를 사용 설정할 수 있습니다. 41 | 42 | - 관리 탭에서 두 보고서를 사용 설정하는 방법 43 | 44 | 1. 애널리틱스 계정에 로그인합니다. 45 | 2. `관리`를 클릭합니다. 46 | 3. 인구통계 및 관심분야 데이터를 사용할 계정과 속성으로 이동합니다. 47 | 4. 속성열에서 `속성 설정`을 클릭합니다. 48 | 5. 광고 기능에서 **인구통계 및 관심분야 보고서 사용**을 **설정**으로 변경합니다. 49 | 6. `저장`을 클릭합니다. 50 | 51 | - 보고서 탭에서 두 보고서를 사용 설정하는 방법 52 | 53 | 1. 애널리틱스 계정에 로그인합니다. 54 | 2. 인구통계 및 관심분야 데이터를 사용할 계정, 속성, 보기로 이동합니다. 55 | 3. 보고서를 엽니다. 56 | 4. *잠재고객 > 인구통계 > 개요*로 들어가 보고서를 엽니다. 57 | 5. 소개 문구 위에서 `설정`을 클릭합니다. 58 | 59 | 6. 사용 설정을 합니다. 60 | 61 | ## 5. 해당 보고서를 다룰 시 주의 사항 62 | 63 | - 완벽한 데이터가 아닌 쿠키 기반으로 예측하기 때문에 100% 신뢰하기는 어렵습니다. 64 | - Google의 광고 네트워크에 사용자의 로그 데이터가 사전에 수집되어야 하므로 사이트 방문자 중에서 인구통계 데이터가 없는 경우가 많습니다. 65 | - 전체 사용자의 데이터가 아닌 Google의 광고 네트워크에서 제공할 수 있는 사용자의 데이터만 제공됩니다. 66 | - 처음 속성을 생성했을 때 해당 기능을 바로 설정해 주어야 처음부터 빠짐없이 데이터를 수집할 수 있습니다. (추후 사용 동의를 한 경우 이전의 데이터는 수집되지 않습니다.) 67 | 그렇기 때문에, 속성을 생성하면 바로 이어서 '인구 통계 및 관심 분야 보고서'를 설정해 주세요. 68 | 69 | ## 6. 참고 70 | 71 | [구글 애널리틱스 고객센터](https://support.google.com/analytics#topic=9143232) 72 | 73 | Do it! 구글 애널리틱스 입문 74 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/01-Settings/04-search-console.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: google-search-console 3 | title: 구글 서치 콘솔 4 | author: chanheeis 5 | author_url: https://github.com/chanheeis 6 | author_image_url: https://avatars.githubusercontent.com/u/53820773 7 | tags: [GoogleAnalytics, GA, Search Console] 8 | --- 9 | 10 | # Google Search Console (구글 서치 콘솔) 11 | 12 | ## 1. Google Search Console (이하 서치 콘솔)의 정의 13 | 14 | 서치 콘솔은 구글의 웹마스터 도구로, 구글 검색 엔진이 사이트를 색인할 수 있도록 사이트맵을 등록하고, SEO를 위한 관리 기능을 제공하는 서비스입니다. 15 | 16 | ## 2. GA와 서치 콘솔을 연동해야 하는 이유 17 | 18 | 구글 검색 엔진은 referer정보를 암호화하기 때문에, GA만으로는 구글 검색 키워드를 수집할 수 없습니다. 따라서, 구글 검색 엔진으로부터 유입되는 키워드 정보를 수집하려면 서치 콘솔을 연동하여야 합니다. 19 | 20 | > **referer** 21 | > 22 | > referer는 현재 사이트에 진입하기 직전의 사이트 정보를 의미합니다. 23 | 24 | ## 3. GA와 서치 콘솔 연동 25 | 26 | 현재 GA4 속성은 서치 콘솔과의 연동이 불가능합니다. 서치 콘솔과 연동하려면 Universal Analytics 속성을 새로 추가하는 과정이 필요합니다. 27 | 28 | 1. 현재 버전 (21.10 기준)의 GA는 속성 생성 시 GA4가 default로 되어 있습니다. 29 | 2. UA 속성을 새로 생성하기 위해, 먼저 관리자 화면으로 이동하세요. 30 | ![UA_step_1](https://user-images.githubusercontent.com/53820773/135612776-cc9a6265-cf49-4ae7-ae21-06e4ec1092be.PNG) 31 | 3. 상단의 `속성만들기`를 클릭하세요. 32 | 4. 속성의 세부 설정을 입력하세요. 33 | ![UA_step_2](https://user-images.githubusercontent.com/53820773/135612781-0401f88d-b384-476d-9d02-7c0159d66559.PNG) 34 | 5. 하단의 `고급 옵션 보기`를 클릭하세요. 35 | 6. 고급 옵션 설정을 입력한 후 `다음`을 클릭하면 UA 속성이 새로 생성됩니다. 36 | ![UA_step_3](https://user-images.githubusercontent.com/53820773/135612783-b10dcc54-033d-4971-ac48-771e0d7f792d.PNG) 37 | 38 | 이제 서치 콘솔와 연결한 후 구글 검색 키워드 수집이 가능합니다. 서치 콘솔과 GA 연동 방법은 두 가지가 있습니다. 39 | 40 | - _서치 콘솔 페이지 > 설정 > 연결 > 연결된 서비스_ 에서 설정 41 | - _GA 페이지 > 관리 > 제품 연결하기 > 모든 제품 > Search Console_ 연결 42 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/01-Settings/05-filter.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: filter 3 | title: 필터 4 | author: chanheeis 5 | author_url: https://github.com/chanheeis 6 | author_image_url: https://avatars.githubusercontent.com/u/53820773 7 | tags: [GoogleAnalytics, GA, Filter] 8 | --- 9 | 10 | # Filter (필터) 11 | 12 | ## 1. Filter (이하 필터)의 정의 13 | 14 | 필터는 데이터 수집 대상으로의 포함 / 미포함 여부를 결정하거나, 수집된 데이터의 대소문자 변경 등 간단한 작업을 위해 설정할 수 있는 항목입니다. 필터는 보기에 적용되며, 하나의 보기당 최대 25개의 필터를 설정할 수 있습니다. 15 | 16 | ## 2. 필터를 적용하는 이유 17 | 18 | 경우에 따라서는, 수집되는 모든 데이터가 유의미한 데이터가 아닐 수 있습니다. 예를 들어, 사내에서 테스트용으로 사이트에 접속한 트래픽이 수집 대상에 포함된다면, 실제 사용자의 행동 분석에 방해가 될 수 있습니다. 이런 경우에 필터를 적용하여 특정 IP에서의 트래픽을 수집 대상에서 제외시킬 수 있습니다. 19 | 20 | ## 3. 필터 적용 시 주의할 점 21 | 22 | 필터는 데이터 수집 자체를 막기 때문에 비가역성을 가집니다. 따라서, 필터 적용 시 아래와 같이 세 보기를 두는 것을 권장합니다. 23 | 24 | - Test용 보기 : Master 보기에 적용하기 전, 테스트를 위해 사용하는 보기입니다. 25 | - Master 보기 : 실제 분석을 위하여 사용하는 보기입니다. 26 | - Backup용 보기 : 수집 데이터 Backup을 위해, 어떠한 필터도 적용하지 않은 채 보관하는 보기입니다. 27 | 28 | ## 4. 필터 적용 방법 29 | 30 | 1. 애널리틱스 로그인 후, 관리자 화면으로 이동 31 | 2. 필터를 적용하고자 하는 속성으로 이동 32 | 3. *관리 > 데이터 설정 > 데이터 필터* 클릭 33 | 4. `필터 만들기` 클릭 34 | 5. `필터 이름` 입력 35 | 6. `필터 유형` 선택 (내부 트래픽 또는 개발자 트래픽) 36 | 7. `필터 연산` 선택 37 | 8. `필터 상태` 선택 38 | 9. `필터 저장` 클릭 39 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/01-Settings/google-ads.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: google-ads 3 | title: 구글 애즈 4 | author: Sumin Choi 5 | author_url: https://github.com/greatSumini 6 | author_image_url: https://avatars.githubusercontent.com/u/48555121 7 | tags: [GoogleAnalytics, GA, Ads] 8 | --- 9 | 10 | # 구글 애즈(Google Ads) 11 | 12 | ## 1. 구글 애즈(Google Ads) 정의 13 | 14 | 구글 애즈(Google Ads)는 비즈니스 텍스트 광고와 디스플레이 광고를 게재할 수 있는 Google의 광고 시스템입니다. 15 | 16 | - ```텍스트 광고(text ads)```: 사용자의 검색어와 광고주가 입찰한 키워드의 일치 결과에 따라 Google 검색결과 옆에 게재됩니다. 17 | - ```디스플레이 광고(display ads)```: 텍스트, 이미지, 애니메이션 또는 동영상으로 구성된 광고이며, Google 디스플레이 네트워크에 속하는 웹사이트에 게재됩니다. 18 | 19 | 예를 들어 Every 스토어에서 티셔츠를 판매하는 경우 'Every 티셔츠', 'Every 의류'와 같은 키워드에 입찰할 수 있습니다.
20 | 사용자가 Google에서 '시원한 Every 티셔츠'와 같은 제품을 검색하면 구글 애즈 시스템이 이와 관련된 Every 스토어 광고를 게재합니다.
21 | (단, 광고가 Google Ads 품질 가이드라인을 충족해야 합니다.) 22 | 23 | 이와 같은 광고를 이용하면 Google 검색 및 디스플레이 네트워크를 사용하는 하루 수백만 명의 사용자를 대상으로 고객 유치를 할 수 있습니다. 24 | 25 | ## 2. 구글 애즈와 구글 애널리틱스 26 | 27 | 구글 애널리틱스 계정과 구글 애즈 계정을 연결하면 아래와 같은 효과가 있습니다. 28 | 29 | - 구글 애널리틱스에서 사이트 참여 데이터와 함께 구글 애즈 클릭 및 비용 데이터를 조회할 수 있습니다. 30 | - 구글 애즈 캠페인에서 사용할 리마케팅 목록을 애널리틱스에서 만들 수 있습니다. 31 | - 구글 애즈에서 애널리틱스 목표와 거래를 조회로 가져오고, 애널리틱스 사이트 참여 데이터를 조회할 수 있습니다. 32 | 33 | 구글 애널리틱스에서는 전환을 추적하기 위해 **목표**라는 기능을 이용합니다.
34 | 목표를 설정하면 애널리틱스에서 총 전환 수, 전환에 도달한 사용자의 비율과 같은 측정항목들을 생성합니다. 35 | 36 | 목표는 해당 보기의 관리자만 설정할 수 있습니다.
37 | 보기당 최대 20개까지 설정할 수 있으므로 자신의 비즈니스에 가장 중요한 목표를 신중하게 선택해야 합니다. 38 | 39 | ## 3. 구글 애즈 캠페인 태그 추가 40 | 41 | 구글 애널리틱스 계정과 구글 애즈 계정을 연결하면 두 시스템 간에 캠페인 데이터가 공유되며, 캠페인 추적을 사용할 수 있습니다. 42 | 43 | URL 작성 도구를 이용해 구글 애즈에 캠페인 추적 태그를 직접 추가할 수도 있지만, 더 좋은 방법이 있습니다. 구글 애즈 시스템의 자동 태그 추가 기능을 이용해 URL에 특수한 캠페인 태그를 자동으로 추가할 수 있습니다. 특정 구글 애즈 측정 기준을 구글 애널리틱스로 가져오려면 자동 태그 추가를 반드시 사용해야 합니다. 44 | 45 | ## 4. 구글 애즈 캠페인 보고서 46 | 47 | 구글 애널리틱스 계정과 구글 애즈 계정을 연결하면 왼쪽 메뉴 '획득' 섹션의 Ads 보고서가 활성화됩니다. **캠페인 보고서**를 클릭하면 여러 애드워즈 캠페인의 실적을 확인할 수 있습니다. 48 | 49 | 이 보고서에서는 캠페인이 구글 애즈에서 지정한 이름으로 표시됩니다. 이러한 점이 구글 애즈와 애널리틱스를 연결했을 때의 이점 중 하나입니다.
50 | 보고서에서 확인할 수 있는 정보들은 아래와 같습니다. 51 | 52 | - 기기별 캠페인 실적 53 | - 각 캠페인의 클릭 수와 총 클릭 비용 54 | - CPC (클릭 1회의 평균 비용) 55 | - 각 캠페인의 사용자 참여도 56 | - 각 캠페인의 전환율과 실제 목표 달성 횟수, 전환이 궁극적으로 비즈니스에 기여한 가치(값) 57 | 58 | ## 5. 참고자료 59 | 60 | - [Google Ads](https://ads.google.com/intl/ko_kr/getstarted/) 61 | - [https://analytics.google.com/analytics/academy](https://analytics.google.com/analytics/academy/) 62 | - [How to use Analytics with Google Ads (6:30)](https://www.youtube.com/watch?v=q8RLUH4vJXA&feature=emb_title) 63 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/02-Basics/01-reports.md: -------------------------------------------------------------------------------- 1 | # GA 보고서 2 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/02-Basics/02-ABC-framework.md: -------------------------------------------------------------------------------- 1 | # ABC 프레임워크 2 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/02-Basics/03-reports-advanced.md: -------------------------------------------------------------------------------- 1 | # 보고서 조작법 2 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/02-Basics/04-setting-goals.md: -------------------------------------------------------------------------------- 1 | # 목표 설정 2 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/02-Basics/05-event-tagging.md: -------------------------------------------------------------------------------- 1 | # 이벤트 2 | 3 | ## 1. 이벤트의 정의 4 | 5 | 이벤트란, 사용자와 웹 사이트의 상호작용을 의미합니다. 6 | 7 | - 사용자가 회원 가입 버튼이나 구매 버튼을 클릭할 때 8 | - 댓글 입력란을 클릭할 때 9 | - 광고 이미지를 클릭할 때 혹은 어떤 특정 영역이 화면에 노출됐을 때 10 | 11 | ## 2. 이벤트를 수집하는 이유 12 | 13 | 이벤트를 수집하는 이유는, 전환이 잘 발생할 수 있도록 사이트를 관리하는데 중요한 데이터로 활용할 수 있기 때문입니다. 또한, GA추적코드를 삽입하는 것만으로는 페이지뷰 이외의 어떠한 히트도 기록할 수 없습니다. 14 | 15 | 다만, 이벤트 기능이 아무리 유용하다고 해서 모든 이미지와 버튼을 추적하는 것은 아니며, 목표를 달성하기 위해 어떤 이벤트를 수집해야 하는지 분별하는 역량이 필요합니다. 16 | 17 | 이벤트 추적은 추후에 전환보고서 목표에 사용할 수 있습니다. 18 | 19 | 20 | ## 3. 이벤트 설정 방법 21 | 22 | 이벤트 정보를 수집하려면 HEAD 영역에 추적 코드를 심어 데이터를 수집하는 것처럼, **이벤트 대상이 되는 버튼이나 이미지에 태그를 달아야 합니다.** 23 | 코드 내에서는 데이터 분석을 제대로 하기 위해 기획해야 하는 변수가 아래와 같이 4가지 존재합니다. 24 | 25 | - action(**필수**) 26 | 27 | 추적 대상과 사용자의 상호 작용을 의미합니다. 28 | 일반적으로 특정 웹 개체에 대해 측정할 이벤트 또는 상호작용 유형의 이름을 지정하려면 액션 매개변수를 사용합니다. 29 | 30 | 모든 액션이 상위 카테고리와는 별개로 나열됩니다. 이를 통해 보고서의 이벤트 데이터를 다른 방식으로 분류할 수 있습니다. 또한, 순 이벤트는 고유한 액션 이름에 의해 결정됩니다. 그렇기 때문에, 모든 카테고리에서 중복된 액션 이름을 사용할 수 있지만, 순 이벤트 수의 집계 방식에 영향을 줄 수 있습니다. 31 | 32 | - category(선택) 33 | 34 | 추적 대상의 그룹명을 의미합니다. 일반적으로 특정 카테고리에서 그룹화할 관련 UI 요소에 동일한 카테고리 이름을 여러 번 사용합니다. 35 | 36 | - label(선택) 37 | 38 | 이벤트의 추가 정보나 설명을 의미합니다. 39 | 40 | - value(선택) 41 | 42 | 이벤트에 부여하는 가치를 의미합니다. (보통 실무에서 사용하는 일이 드뭅니다.) 43 | 44 | ```javascript 45 | 51 | ``` 52 | 53 | ## 4. 자동으로 수집되는 이벤트 54 | 55 | 코드를 추가하지 않아도 page_view를 비롯한 많은 이벤트를 수집할 수 있습니다. 56 | [자동으로 수집되는 이벤트 코드](https://support.google.com/analytics/answer/9234069) 57 | [자동으로 수집되는 이벤트 코드2 - 좀 더 향상된 개별 측정](https://support.google.com/analytics/answer/9216061) 58 | 59 | 60 | ## 4. 이벤트 활용법 61 | 62 | 이벤트 데이터는 *방문 형태 보고서 > 이벤트* 에서 확인이 가능합니다. 63 | 64 | 65 | 66 | ### 라벨을 이름으로 사용하기 67 | 68 | 추가 정보를 입력할 수 있는 '라벨'을 활용합니다. 다만, 데이터를 확인할 때 불편할 수 있습니다. 69 | 70 | 71 | 72 | ### 드릴 다운 구조를 완전히 새롭게 설계하기 73 | 74 | 카테고리, 액션, 라벨이 갖는 사전적 의미는 버리고 드릴 다운되는 순서에 집중합니다. 75 | 76 | ex) 카테고리는 사전적으로 분류지만, 그 의미가 아니라 이벤트가 발생한 '위치'를 나타내게 합니다. 77 | 78 | 79 | 80 | ## 5. 이벤트 기획안 작성하기 81 | 82 | 화면에 이벤트를 잡아야 하는 버튼이나 영역을 표시하고 카테고리, 액션, 라벨을 정의합니다. 83 | 84 | *세 요소는 역할이 고정되어 있지 않고 얼마든지 유연하게 구성이 가능합니다.* 85 | 86 | 87 | 88 | ## 6. 구글 태그 관리자 89 | 90 | 이벤트 태깅을 통해 필요한 데이터를 수집할 수 있지만, 개발자에게 매번 이벤트 내용을 소스 코드에 넣어 달라고 요청해야 하는 등의 불편함이 발생합니다. 91 | '구글 태그 관리자'는 이러한 과정을 간소화해줍니다. 92 | 93 | 94 | 95 | 96 | ## 7. 이벤트 생성할 때 주의할 점 97 | 98 | - 행동보고서 이벤트도 모두 사이트 목적과 규칙 등을 생각해서 일관성있는 기준으로 운용해야합니다. 그렇지 않으면, 추후에 변경하기 어렵습니다. 99 | 100 | - 동일한 이벤트를 지칭할 때 2개의 다른 값으로 사용하지 않도록 해야 합니다. 그렇게 되면, 데이터 값이 나누어져 하나의 데이터 값으로 보기 어렵습니다. 101 | 102 | - 대소문자를 섞어쓰지 않도록 해야 합니다. 그렇게 되면, 데이터 값이 나누어져 하나의 데이터 값으로 보기 어렵습니다. 103 | 104 | - 측정기준 항목을 바꿔쓰지 않도록 해야 합니다. 그렇게 되면, 데이터 값이 나누어져 하나의 데이터 값으로 보기 어렵습니다. 105 | 106 | ## 8. 참고 107 | 108 | [구글 애널리틱스 고객센터](https://support.google.com/analytics#topic=9143232) 109 | Do it! 사용자의 행동을 분석해 성과를 높이는 구글 애널리틱스 110 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/02-Basics/06-online-transaction.md: -------------------------------------------------------------------------------- 1 | # 전자상거래 2 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/02-Basics/07-ga-and-gtag.md: -------------------------------------------------------------------------------- 1 | # gtag와 ga 비교 2 | 3 | 구글이 글로벌 사이트 태그(Global Site Tag, 이하 gtag.js)라는 새로운 유형의 태그를 도입하면서 페이지뷰 전송, 맞춤 이벤트 설정 등 데이터 전송 방법이 기존 유니버설 애널리틱스 태그(Univiersal Analytics, 이하 analytics.js) 방식과 달라졌습니다. 4 | 5 | ## 1. 글로벌 사이트 태그(Global Site Tag) 6 | 7 | - ### 정의 8 | 9 | 글로벌 사이트 태그란, **구글의 사이트 측정, 전환 추적 및 리마케팅 제품을 위한 웹 태깅 라이브러리**를 말합니다. 간소화된 웹페이지 태깅 체계(framework)를 제공함으로써 더 쉽고, 더 효과적으로 구현을 할 수 있도록 합니다. 또한, 향후 출시될 최신 추적 기능과 통합의 이점을 누릴 수 있습니다. 10 | 11 | **구글의 여러 솔루션에 통합적으로 적용**될 예정이며, 계정 아이디만 다른 **동일한 태그가 애널리틱스 계정에서는 측정(measurement)에, 애드워즈 계정에서는 전환 추적 및 리마케팅에 사용**됩니다. 12 | 13 | - ### 코드 14 | 15 | ```javascript 16 | 17 | 22 | ``` 23 | 24 | - ### 사용 방법 25 | 26 | - [https://www.google-analytics.com/analytics.js](https://www.google-analytics.com/analytics.js) 스크립트와[https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID](https://www.googletagmanager.com/gtag/js?id=UA-92421532-1) 스크립트를 삽입합니다. 27 | - `gtag(‘config’, ‘GA_TRACKING_ID’)` 에서 https://www.google-analytics.com/analytics.js 스크립트를 삽입해주고, creat를 하면서 ga함수를 시작하게 됩니다. 28 | 29 | ## 2. 차이점 30 | 31 | - **analytics.js에서는 카테고리, 액션 두 항목이 필수 항목**입니다. 32 | 33 | 반면에 **gtag.js에서는 액션만이 필수 항목에 해당**합니다. 34 | 35 | ```javascript 36 | 37 | 38 | 41 | 42 | 43 | 44 | 47 | ``` 48 | 49 | gtag.js 방식에서는 액션 값이 필수인 한편 아래와 같이 이벤트 카테고리 및 라벨 값을 직접 지정할 수 있습니다. 50 | 51 | ```javascript 52 | 58 | ``` 59 | 60 | ​ 위에서 **event_name이 액션 값에 해당**합니다. 61 | 62 | - **analytics.js 태그**는 카테고리, 액션, 라벨 값을 모두 정확히 지정해야 합니다. 63 | 64 | 반면에 **gtag.js 방식에서는 (제한된 범위 내에서) 액션 값만 지정해도 카테고리 값이 기본 값(default values)으로 지정**됩니다. 65 | 66 | - **analytics.js 태그**는 구글 애널리틱스에만 적용됩니다. 67 | 68 | 반면에 **gtag.js 태그**는 구글 애드워즈의 리마케팅이나 전환 추적을 지원합니다. 69 | 70 | - **analytics.js 태그**는 구글 애널리틱스로 데이터를 전송하는 데 ‘트래커’를 사용하고, 데이터 유형을 명시하는 데 ‘히트 유형’를 사용합니다. 71 | 72 | 반면에 **gtag.js 태그**는 데이터 전송에 트래커를 사용하지 않습니다. 대신, ‘config’ command로 설정한 추적 ID(tracking ID)로 확인할 수 있는 구글 애널리틱스 속성으로 데이터를 전송합니다. 73 | 74 | - **analytics.js**와 **gtag.js**는 서로 다른 추적 파라미터를 사용합니다. 페이지뷰나 이벤트 설정 데이터를 전송하는 문법이 다릅니다. 75 | 76 | ## 3. 참고 77 | 78 | [구글 애널리틱스 고객센터](https://support.google.com/analytics#topic=9143232) 79 | [ga와 gtag의 차이점](https://y-chyachya.tistory.com/47) 80 | Do it! 사용자의 행동을 분석해 성과를 높이는 구글 애널리틱스 -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/02-Basics/acquisition-reports.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: acquisition-reports 3 | title: 획득 보고서 4 | author: Jiyoon Hur 5 | author_url: https://github.com/jiyoon1156 6 | author_image_url: https://avatars.githubusercontent.com/u/60052127?v=4 7 | tags: [GoogleAnalytics, GA] 8 | --- 9 | 10 | # 획득 보고서 11 | 12 | ## 1. 획득 보고서란? 13 | 14 | 획득 보고서는 사용자가 내 사이트를 어떤 경로로 어떻게 알고 방문했는지를 알려줍니다. 15 | 16 | ## 2. 획득 보고서가 필요한 이유 17 | 18 | 획득 보고서를 분석하면 여러 마케팅 채널의 실적을 비교하고 트래픽을 통해 다양한 인사이트를 얻을 수 있습니다. 따라서 이 정보를 활용하면 어떤 영역에 마케팅 활동을 집중시킬지 참고할 수 있습니다. 19 | 20 | ## 3. 획득 보고서 활용하기 21 | 22 | ### 소스와 매체 23 | 24 | 사용자가 사이트를 방문하면 구글 애널리틱스의 추적 코드가 사용자의 유입경로에 대한 여러 속성(또는 측정기준)을 자동으로 인식합니다. 여기에는 트래픽 매체(Traffic Medium), 소스(Source), 마케팅 캠페인 이름이 포함됩니다. 매체는 사용자를 사이트로 보내는 시스템이라고 생각하면 되는데, 가장 많은 매체는 Organic, CPC, Referrals, Email, None 입니다. 25 | 26 | | 매체 | 설명 | 27 | |-----|-----| 28 | | Organic | 무료 구글 검색결과와 같은 무료 검색을 통해 사이트에 들어온 트래픽 | 29 | | CPC | 구글 애드(Google Ads)와 같은 유료 검색 캠페인(paid search compaign)을 통해 사이트에 들어온 트래픽 | 30 | | Referrals | 검색엔진을 사용하지 않고 웹사이트를 클릭하여 사이트에 들어온 트래픽 | 31 | | Email | 이메일 마케팅 캠페인을 통해 유입된 트래픽 | 32 | | None | 브라우저에 바로 입력하여 사이트를 바로 방문한 사용자 트래픽 | 33 | 34 | 소스에는 매체와 관한 상세 정보가 표시됩니다. 매체가 none 일 경우 source:direct/medium:none 로 트래픽이 표시되는 걸 많이 보셨을 텐데, 매체가 referrals 이면 소스는 사용자를 사이트로 추천한 웹사이트의 URL이고 매체가 organic 이면 소스는 [google.com](http://google.com) 과 같은 검색 엔진의 이름입니다. 35 | 36 | > **우수한 트래픽** 37 | > 38 | > 특정 트래픽에서 사용자가 가장 많다고 해당 트래픽이 가장 우수한 것은 아닙니다. 소스를 통해 들어온 사용자가 웹사이트를 이용하거나 전환(conversion)에 도달한 트래픽이어야 우수한 트래픽이라고 합니다. 이전 GA에서 트래픽의 품질을 가장 잘 보여주는 통계는 이탈률이었습니다. 하지만 GA4에선 더 이상 이탈률을 지원하지 않고 참여율이라는 새로운 측정기준을 지원합니다. 39 | 40 | ### 채널 기준 트래픽 조회 41 | 42 | 해당 보고서를 이용하면 채널을 기준으로 트래픽을 조회할 수 있는데, 채널이란 각 매체에서 여러 소스를 포함하는 집합을 뜻합니다. 트래픽 소스는 Organic Search, Social, Direct, Referral, Generic Paid Search, Display 와 같은 기본 카테고리(또는 채널)로 자동 분류됩니다. 각 채널을 클릭하면 해당 채널의 개별 소스가 표시됩니다. 43 | 44 | - UA : _획득 > 전체 트래픽 > 채널 보고서_ 45 | - GA4: _수명 주기 > 획득 > 트래픽 획득_ 46 | 47 | ### 연결된 다른 사이트를 기준으로 트래픽 조회 48 | 49 | 개별 referral을 통해 내 사이트로 트래픽을 보낸 웹페이지를 찾을 수 있습니다. 이렇게 각 페이지로 트래픽을 보낸 외부 사이트를 확인한다면 이들 사이트와 새로운 광고 파트너 관계를 맺을 수 있는 기회를 발견할 수 있습니다. 50 | 51 | - UA : _획득 > 전체 트래픽 > 추천_ 52 | - GA4: _수명 주기 > 획득 > 트래픽 획득 > 비교추가 클릭 > 측정기준 매체 선택/측정기준 값 referral 선택_ 53 | ## 4. 참고자료 54 | 55 | - [https://analytics.google.com/analytics/academy](https://analytics.google.com/analytics/academy) 56 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/02-Basics/audience-reports.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: audience-reports 3 | title: 잠재고객 보고서 4 | author: Yebin Seo 5 | author_url: https://github.com/yeppin 6 | author_image_url: https://avatars.githubusercontent.com/u/81066071?s=400&u=55ee1f97f34d9497ad540b225cfd2448aeefd8b0&v=4 7 | tags: [GoogleAnalytics, GA] 8 | --- 9 | 10 | # 잠재고객 보고서 11 | 12 | ## 1. 잠재고객 보고서 정의 13 | 14 | > **잠재고객 보고서**는 UA에서만 지원하는 보고서입니다. 15 | 16 | 잠재고객 보고서는 웹사이트에 방문한 사용자의 특징을 보다 자세하게 파악할 수 있는 유용한 툴입니다. 이 보고서를 통해 우리는 웹사이트를 방문한 사용자의 성별과 연령대뿐만 아니라 거주 도시, 사용 언어, 사이트 접속 시 사용한 기기 등까지도 확인할 수 있습니다. 기본적으로 모든 사용자를 대상으로 잠재고객이 정의되지만, 여러 세그먼트를 조합하여 새로운 잠재고객을 정의할 수도 있습니다. 17 | 18 | ## 2. 잠재고객 보고서 둘러보기 19 | 20 | ### 개요 21 | 22 | ![handbook_audience_outline](https://user-images.githubusercontent.com/81066071/131258942-57ddffa8-ada8-4c35-a4c9-1d350c92f908.PNG)

23 | 잠재고객 보고서는 사용자 관련 기본적인 정보가 포함된 **개요**를 제공합니다. 그래프 왼쪽 상단의 정렬기준을 설정하여 사용자 수, 사용자당 세션 수, 신규 방문자 수 등을 검토한다면, 생성된 웹사이트에 대한 전체적인 내용 파악에 큰 도움을 얻을 수 있을 것입니다. 24 | 25 | ### 활성 사용자 보고서 26 | 27 | 활성 사용자 보고서의 경우, 설정한 기간(1일, 7일, 14일, 28일)별로 **사용자의 수**를 제공합니다. 이는 사용자가 웹사이트에 대해 가지는 관심 추이를 지속적으로 모니터링할 때 유용하게 사용됩니다.
28 | 29 | > **사용자(Users)** 30 | > 31 | > 선택된 기간 내에 **1회 이상의 세션**을 발생시킨 순 사용자의 수치 32 | 33 | > **세션(Sessions)** 34 | > 35 | > 사용자가 웹사이트를 적극적으로 사용한 시간. 평균적으로 사용자 접속 후 30분 내외를 1 세션으로 간주하여 동일 사용자가 해당 시간 내 사이트를 여러 번 방문하더라도 중복 집계되지 않음. 36 | 37 | 웹사이트 관리자는 활성 사용자 보고서를 지표 삼아, 사용자의 관심을 지속적으로 이끌어낼 수 있는 마케팅 전략을 구상해볼 수 있습니다. 38 | 39 | ### 인구통계 보고서 & 관심분야 보고서 40 | 41 | 두 보고서는 사전에 각 속성별로 '인구통계 및 관심분야 보고서 사용'을 설정해둔 뒤, 1~2일이 지나 시점부터 데이터를 받아볼 수 있습니다. 42 | 43 | **인구통계 보고서**는 사용자의 연령 및 성별 정보를 제공하고, **관심분야 보고서**는 사용자의 선호를 분석하여 통계 결과를 도출해냅니다. 두 보고서는 특히 타겟 마케팅의 유효성을 검증할 때 유용하게 사용되는데, 해당 웹사이트가 본래 의도한 사용자에게 관심을 얻고 있는지 확인해볼 수 있습니다. 44 | 45 | ### 지역 보고서 46 | 47 | 사용자가 위치한 지역(대륙, 국가, 도시)에 대한 정보는 지역 보고서를 통해 확인해볼 수 있습니다. 지역보고서는 **히트맵**과 **테이블**의 형식으로 나타나며, 위치별로 신규 사용자 트래픽, 재방문율 등을 분석한 결과를 제공합니다. 이는 특히 해외 시장을 공략하는 데 유용하게 쓰일 수 있습니다. 예를 들어, 신규 방문자 수가 높으나 이탈률이 평균 이상인 국가 혹은 도시가 있다면, 현지어 번역 기능 추가나 UI 개선 등의 방법으로 미개척시장을 공략해 볼 수 있습니다. 48 | 49 | ### 행동 보고서 50 | 51 | 행동 보고서는 사용자가 사이트 방문 이후 취한 행동을 분석해줍니다. 세션 수 별 사용자 수, 세션 시간, 전환율 등의 정보를 제공받은 GA 분석자는 사용자의 행동을 보다 적극적으로 유도하기 위한 방안을 구상해볼 수 있습니다. 52 | 53 | ### 기술 보고서 & 모바일 보고서 54 | 55 | 사용자가 사이트를 방문했을 당시의 기술 정보는 웹사이트가 기기 환경별로 제대로 작동하는지 확인하는 데 있어 매우 중요합니다. **기술 보고서**는 주로 브라우저 환경에 대한 정보를 제공하며, **모바일 보고서**는 데스크탑/휴대폰/태블릿 각각의 정보를 제공합니다. 더욱 자세한 분석을 원한다면 추가적으로 사용자의 휴대기기 기종, 브랜드, 서비스제공업체, 해상도 등에 대한 정보 또한 받아볼 수 있습니다. 56 | 57 | ## 3. 보고서 분석 시 주의할 점 58 | 59 |
60 | 61 | - 보고서는 사이트 방문자의 일부분만을 분석합니다. 해당 비율은 그래프 우측 상단에서 확인할 수 있습니다. ex) 62.76% of total users 62 | - 사이트 트래픽이 너무 적거나, 세그먼트가 너무 세분화되면 데이터가 수집되지 않을 수 있습니다. 63 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/02-Basics/behavior-reports.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: behavior-reports 3 | title: 참여 보고서 4 | author: Jiyoon Hur 5 | author_url: https://github.com/jiyoon1156 6 | author_image_url: https://avatars.githubusercontent.com/u/60052127?v=4 7 | tags: [GoogleAnalytics, GA] 8 | --- 9 | # 참여보고서 10 | 11 | ## 1. 참여보고서란? 12 | 13 | 유저가 웹사이트 또는 모바일 어플리케이션에서 상호작용하는 것을 확인할 수 있는 보고서입니다. 이벤트를 사용해 유저가 다음과 같은 작업을 하는 것을 측정할 수 있습니다. 14 | 15 | ex) 16 | 17 | - 계정 잔액 확인할 때 18 | - 페이지를 천천히 아래로 스크롤하여 읽고 있음을 보여줄 때 19 | - 상품 세부정보를 보거나 특정 페이지에서 시간을 보낼 때 20 | - 정보 제공용 동영상을 시청할 때 21 | 22 | ## 2. 참여보고서가 필요한 이유 23 | 24 | 내 사이트에서 유저가 어떤 행동을 했는지 분석하기 위해서 필요합니다. 예를 들면 어떤 페이지를 가장 많이 보는지, 어떤 페이지에서 가장 많이 참여하는지 확인할 수 있습니다. 25 | 26 | ## 3. 참여보고서 활용 방법 27 | 28 | ### 참여개요 29 | 30 | 참여개요에서 유저의 행동을 직관적으로 볼 수 있는 참여 세션과, 사용자 재방문율에 대해서 살펴보겠습니다. 31 | 32 | - 참여세션에서 '평균 참여 시간', '세션당 평균 참여 시간', '참여율'과 같은 측정항목은 각 페이지의 사용자 참여도를 보여줍니다. 이러한 측정항목을 기준으로 보고서를 조회하면 개선이 필요한 페이지나 실적이 우수한 콘텐츠를 찾을 수 있어서 컨텐츠를 구성할 때 참조할 수 있습니다. 33 | - 사용자 재방문율은 비율이 높을수록 사용자 참여도와 사용자 유지율이 높다고 해석하면 됩니다. 개요에서 보여지는 그래프는 세가지로 `DAU(일일 활성사용자수)`/`MAU(월간 활성사용자수)`, `DAU`/`WAU(주간 활성사용자수)`, `WAU`/`MAU`입니다. `DAU`/`MAU` 는 지난 30일 동안 참여한 사용자 중 지난 24시간 동안 참여한 사용자의 비율을 나타냅니다. 34 | 35 | ### 이벤트 36 | 37 | GA4는 일부 이벤트들을 자동으로 수집하는데 이벤트 보고서에선 각 이벤트 별 트리거 횟수, 참여 이벤트 실행여부와 상관없이 앱/웹과 상호작용한 사용자 수, 사용자당 이벤트를 트리거한 평균 횟수, 총 수익을 확인할 수 있습니다. 38 | 39 | ### 전환수 40 | 41 | GA4에는 전환 이벤트 역시 자동으로 수집되는 항목들이 있는데 이외에도 최대 30개를 전환 이벤트로 설정이 가능합니다. 전환 보고서에선 사용자가 전환 이벤트를 트리거한 횟수, 전환 이벤트를 트리거한 사용자 수, 전환 이벤트에서 발생한 수익을 확인할 수 있습니다. 42 | 43 | ### 페이지 및 화면 44 | 45 | 참여도 > *페이지 및 화면* 에서 필터를 **페이지 경로 + 쿼리 문자열 및 화면 클래스**로 변경하면 웹사이트 내의 페이지별로 조회수, 사용자, 새 사용자 수, 사용자당 조회수, 평균 참여 시간, 순 사용자 스크롤, 이벤트 수를 확인할 수 있습니다. 이 정보는 웹사이트의 특정 섹션에 있는 콘텐츠의 실적을 확인하려고 할 때 특히 유용합니다. 46 | 47 | ## 4. 참고자료 48 | 49 | - [https://support.google.com/analytics/answer/10999789?hl=ko&ref_topic=9303476](https://support.google.com/analytics/answer/10999789?hl=ko&ref_topic=9303476) 50 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/02-Basics/conversion-reports.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: conversion-reports 3 | title: 전환 보고서 4 | author: chanheeis 5 | author_url: https://github.com/chanheeis 6 | author_image_url: https://avatars.githubusercontent.com/u/53820773 7 | tags: [GoogleAnalytics, GA, Conversion, Reports] 8 | --- 9 | 10 | # 전환 보고서 11 | 12 | ## 1. 전환 보고서가 필요한 이유 13 | 14 | > **전환 보고서**는 UA에서만 지원하는 보고서입니다. 15 | 16 | 전환 보고서를 분석하면 고객이 웹사이트 내에서 우리가 정한 **목표**를 달성하는지 등 **전환**을 추적할 수 있습니다. 17 | 18 | > **목표** 19 | > 20 | > 목표는 비즈니스의 성공에 기여하는 액션을 의미합니다. 이커머스의 경우는 매출에 관한 데이터, 플랫폼의 경우는 회원가입 및 MAU 등, 비즈니스 유형 별로 특정한 목표를 갖고 있습니다. 21 | 22 | > **전환** 23 | > 24 | > 사용자가 웹사이트에서 목표 행위를 완료했을 때, 전환이라고 합니다. 25 | 26 | ## 2. 전환 보고서의 종류 27 | 28 | ### 목표 (Goal) 29 | 30 | ![목표보고서](https://user-images.githubusercontent.com/53820773/136690582-57885cf4-13e8-4270-bc2f-226c14ae0ae2.PNG) 31 | 전환 목표(상담신청, 회원가입, 구매완료 등)의 달성 횟수와 위치, 전환율 등 전환 목표와 관련된 지표들을 한 눈에 확인 할 수 있는 보고서입니다. 32 | 33 | #### 유입경로 시각화 34 | 35 | ![개요보고서](https://user-images.githubusercontent.com/53820773/136690339-627ba67a-888f-4071-a91b-7e0a4d55c079.PNG) 36 | _전환 보고서_ > _목표_ > *유입경로 시각화*에서 도착에 이르는 유입 경로를 시각화하여 확인할 수 있습니다. 이 보고서를 활용하면 사용자가 많이 이탈한 경로를 쉽게 확인할 수 있습니다. 37 | 38 | ### 전자상거래 (Ecommerce) 39 | 40 | ![전자상거래보고서](https://user-images.githubusercontent.com/53820773/136690577-75ef0d7c-6557-43ba-9306-53bf1afb1b03.PNG) 41 | 웹 사이트에서 발생한 구매 활동에 대한 데이터를 확인할 수 있는 보고서로, 결제 시 매출이 얼마나 발생했고, 어떤 상품을 얼마의 가격에 몇개나 구매했는지 여부, 거래와 제품 정보의 데이터를 수집하고 분석할 수 있습니다. 42 | 43 | ### 다채널 유입경로 (Multi-Channel Funnels) 44 | 45 | ![다채널 유입경로 보고서](https://user-images.githubusercontent.com/53820773/136690574-eeb622b5-614c-4d0e-aa25-db4d1fbeb6c1.PNG) 46 | 유입 매체들이 전환에 기여하는 방식을 확인할 수 있는 보고서로, 지원전환수, 인기전환경로, 구매까지 이르는 시간, 경로 길이 등의 데이터를 수집하고 분석할 수 있습니다. 47 | 48 | ## 3. 참고자료 49 | 50 | - https://ingeniouslab.co.kr/ga-basic-report-2/ 51 | - https://learn-test.tistory.com/25 52 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/02-Basics/goals.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: goals 3 | title: 목표 4 | author: Sumin Choi 5 | author_url: https://github.com/greatSumini 6 | author_image_url: https://avatars.githubusercontent.com/u/48555121 7 | tags: [GoogleAnalytics, GA] 8 | --- 9 | 10 | # 목표 설정 11 | 12 | ## 1. 목표 정의 13 | 14 | 웹사이트에서 발생하길 바라는 행동을 비즈니스 **목표**라고 하며, 사용자가 비즈니스 목표에 도달하는 순간을 **전환**이라고 합니다. 15 | 16 | ex) 17 | - 전자상거래 구매 18 | - 게임캐릭터 레벨 달성 19 | - 뉴스레터 신청 20 | - 특정 페이지에 진입 21 | 22 | GA에서는 전환을 추적하기 위해 **목표**라는 기능을 이용합니다. 목표를 설정하면 GA에서 총 전환 수, 전환에 도달한 사용자의 비율과 같은 측정항목들을 생성합니다. 23 | 24 | 목표는 해당 보기의 관리자만 설정할 수 있습니다. 보기당 최대 20개까지 설정할 수 있으므로 자신의 비즈니스에 가장 중요한 목표를 신중하게 선택해야 합니다. 25 | 26 | ## 2. 목표 유입경로 정의 27 | 28 | GA에서 목표를 설정하면 **목표 유입경로**도 설정할 수 있습니다. 29 | 30 | 목표 유입경로는 목표 달성에 필요한 여러 단계의 데이터를 시각적으로 보여주는 기능입니다. 이 기능을 이용하면 사용자가 전환 과정에서 이탈한 지점을 쉽게 찾을 수 있습니다. 31 | 32 | **도착** 유형의 목표에 대해 유입경로 시각화를 통해 전환 경로의 각 단계에 대한 세부 정보도 얻을 수 있습니다. 제공되는 정보들은 아래와 같습니다. 33 | 34 | |종류|내용 35 | |------|---| 36 | |시간|사용자의 세션 시간| 37 | |페이지 수|사용자가 한 세션에서 조회환 페이지의 수| 38 | |이벤트|사이트에서 추적하고 있는 구체적인 액션| 39 | |값|각 전환의 가치에 해당하는 금액| 40 | 41 | ## 3. 전자상거래와 목표 관리 42 | 43 | GA는 쇼핑몰의 상품 판매를 쉽게 관리할 수 있는 전자상거래 기능을 제공합니다. 즉, 전자상거래란 쇼핑몰에 특화된 목표 관리 방법입니다. 44 | 45 | ### 전자상거래와 GA 목표 설정 46 | 47 | 사이트에 목표를 설정하고 관리하는 이유는 전환이 얼마나 발생하는지 파악하고 전환율을 높이기 위한 방법을 찾기 위함입니다. 그리고 쇼핑몰의 전환은 사용자의 구매 행동이라고 할 수 있습니다. 따라서 전자상거래 기능을 통해 구매 전환을 관리하는 것은 GA의 목표 설정과 성격이 같습니다. 48 | 49 | 하지만 일반적인 GA 목표와 전자상거래의 전환 보고서의 확인 방법은 아래와 같이 차이가 있습니다. 50 | 51 | * 일반적인 GA 목표: _전환 보고서 > 목표_ 52 | * 전자상거래: _전환 보고서 > 전자상거래_ 53 | 54 | ### 전자상거래 추적을 위한 준비 55 | 56 | 전자상거래로 발생한 데이터를 수집하기 위해선 아래와 같이 두 가지 준비가 필요합니다. 57 | 58 | 1. 보기의 설정에서 전자상거래 활성화 59 | * _관리자 화면 > 계정 > 속성 > 보기 > 전자상거래 설정_ 60 | 2. 소스코드 수정 61 | 62 | 63 | ```js 64 | // 전자 상거래 추적 코드의 예시 65 | gtag('event', 'view_item', { 66 | "items": [ 67 | { 68 | "id": "1", 69 | "name": "Foo", 70 | "maker": "Bar", 71 | "category": "shoes" 72 | } 73 | ] 74 | }) 75 | ``` 76 | 준비가 끝나면 GA는 사용자의 구매 행동과 상품 판매 데이터를 수집할 있으며, 이를 **전자상거래 추적**이라고 합니다. 77 | 78 | ### 전자상거래 추적을 하는 이유 79 | 80 | 전자상거래 추적을 통해 전체 상품 중 어떤 카테고리의 상품이 많이 팔렸는지, 특정 카테고리의 상품들 중 어떤 상품이 많이 팔리는지 등의 데이터를 파악할 수 있습니다. 이를 통해 더 나은 판매 방법을 모색할 수 있습니다. 81 | 82 | 또한 사용자가 어느 구매 단계에서 이탈했는지 확인할 수 있어서 이탈율을 적게 하기 위한 더 나은 개선 방법을 찾을 수도 있습니다. 83 | 84 | ## 4. 참고자료 85 | 86 | - [https://analytics.google.com/analytics/academy](https://analytics.google.com/analytics/academy/) 87 | - [How to set up Goals in Analytics (7:32)](https://www.youtube.com/watch?v=2Ke3-0Jsl-I) 88 | - Do it! 사용자의 행동을 분석해 성과를 높이는 구글 애널리틱스 89 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/02-Basics/how-to-collect-data.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: how-to-collect-data 3 | title: Google Analytics는 어떻게 데이터를 수집하는가? 4 | author: Junhee Lee 5 | author_url: https://github.com/jhlee910609 6 | tags: [GoogleAnalytics, GA] 7 | --- 8 | 9 | ## 1. GA의 기본적인 데이터 수집 방식 10 | 11 | 한 웹 사이트에 대한 데이터 수집은 웹 사이트 페이지에 삽입되는 GA에서 제공하는 javascript tracking 코드로부터 시작됩니다. 이는 모든 사용자의 interaction을 추적합니다. 여기서 말하는 사용자의 interaction은 페이지 로드처럼 간단할 수도 있고, 버튼 클릭, 링크 등 조금 더 구체적인 사용자의 행동일 수도 있습니다. 12 | 13 | GA tracking 코드에서는 웹 사이트의 도메인을 보고서의 'site'로 지정하며, tracking code가 웹 사이트에 설치되어 있으면 GA가 웹 사이트와 관련 하위 도메인을 위한 쿠키를 브라우저에 내려줍니다. 14 | 15 | ## 2. hit란? 16 | 17 | 'hit'는 사용자에 대한 유용한 정보를 담은 파라미터로 구성된 URL 문자열입니다. 또한, 무작위로 생성된 사용자 식별값도 담고 있습니다. 또한, 아래 이미지와 같이 파리미터에 다양한 사용자 정보를 담고 있습니다. ex) ul, sr.. etc 18 | 19 | ![hit url](https://tva1.sinaimg.cn/large/008i3skNgy1gu5vfwl0hbj60n903gt9902.jpg) 20 | 21 | 'hit'는 주로 사용되는 세 종류의 Pageview hit, Event hit, Transaction hit과 그 밖의 Social hit, Page timing view hit로 구분되어 있습니다. 22 | 23 | ### 2.1. Pageview hit 24 | 25 | Pageview hit는 사용자가 page를 로드할 때, 발생되는 hit의 한 종류입니다. page를 로드할 때마다 새로운 pageview hit가 발생하며, 이 정보는 GA로 전송됩니다. 26 | 27 | ### 2.2. Event hit 28 | 29 | 사용자가 특정 element와 상호작용할 때, 발생되는 hit의 한 종류입니다. ex) 버튼 클릭, a 태그 클릭 등... 30 | 31 | Event hit에는 4가지 URL 파라미터가 존재합니다. 4가지 파라미터를 활용해 GA 리포트 상에서 사용자 데이터를 분류할 수 있습니다. Event hit의 4가지 파라미터의 종류는 아래와 같습니다. 32 | 33 | 1. action: interaction 타입 34 | 2. category: interaction의 목적 35 | 3. label: 이벤트 분류를 위해 사용되는 값 36 | 4. value: 해당 Event에 대한 수치 37 | 38 | ### 2.3. Transaction hit(Ecommerce hit) 39 | 40 | Ecommerce에 상품 구매, 관련된 data를 GA에 전송합니다. 41 | Transaction hit에는 아래와 같은 3가지 URL 파라미터가 존재합니다. 42 | 43 | 1. Product category: 상품의 종류 44 | 2. Product added/removed: 상품이 추가되었는지, 삭제되었는지 (주로 장바구니에서) 45 | 3. Product views: 상품 조회수 46 | 47 | ### 2.4. etc 48 | 49 | - Social hit: 좋아요, 공유하기, tweet 등 social media와 관련된 interaction을 측정할 수 있습니다. 50 | - Page Timing view hit: 기간을 측정할 수 있습니다. ex) page load 시간, 이미자가 load 된 시간 등... 51 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/02-Basics/how-to-track-a-marketing-campaign.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: how-to-track-a-marketing-campaign 3 | title: 맞춤 캠페인을 측정하는 방법 4 | --- 5 | 6 | # 맞춤 캠페인을 측정하는 방법 7 | 8 | ## 1. 맞춤 캠페인이란? 9 | 10 | 다양한 마케팅 캠페인을 조합해 맞춤형으로 만든 캠페인을 뜻합니다. 11 | 12 | - 텍스트 광고 13 | - 배너 광고 14 | - 소셜 미디어 또는 이메일 캠페인 15 | 16 | ## 2. 맞춤 캠페인이 필요한 이유 17 | 18 | 일반적으로는 매출과 웹사이트 전환을 늘리기 위해 이런 마케팅 활동을 조합해 맞춤 캠페인을 생성합니다. 19 | 20 | ## 3. 캠페인 추적 방법 21 | 22 | **'캠페인 태그 추가'**를 통해 추적합니다. 23 | 24 | - `캠페인 태그` : 온라인 마케팅 또는 광고 자료의 URL 링크가 추가하는 정보 25 | 26 | 추적 매개변수, 등호와 광고주가 지정한 단어, 하이픈으로 연결된 단어 등이 들어갑니다. 27 | 28 | ### 캠페인 트래픽에 대한 태그 종류 29 | 30 | |태그|필수여부|설명|예시| 31 | |---|------|---|---| 32 | |Medium|필수|메시지를 사용자에게 전달하는 방식에 대한 태그|이메일 캠페인은 'email', 유료 검색 광고는 'cpc', 소셜 네트워크는 'social'| 33 | |Source|필수|사용자가 유입된 경로를 추적하는 태그, 매체의 유형을 구분|웹페이지, 이메일 링크| 34 | |Campaign|필수|마케팅의 이름을 추적하는 태그|-| 35 | |Content|선택|프로모션의 여러 버전을 구분하는 태그. 광고 또는 프로모션 중에서 어느 것이 가장 효과적인지를 알아보려고 할 때 유용|-| 36 | |Term|선택|유료 검색 캠페인의 키워드를 추적하는 태그|-| 37 | 38 | 39 | ## 4. 맞춤 URL을 사용한 캠페인 데이터 수집 시 권장사항 40 | 41 | ### URL 작성 도구를 사용하여 링크 생성 42 | 43 | 캠페인 링크는 URL 주소 뒤에 물음표(?)와 앰퍼샌드(&)로 구분된 캠페인 변수로 구분됩니다. 44 | 45 | Ex) [http://www.example.com/**?**utm_source=adsite**&**utm_campaign=adcampaign](http://www.example.com/**?**utm_source=adsite**&**utm_campaign=adcampaign)) 46 | 47 | 그러나 `URL 작성도구`를 사용하여 URL을 생성한다면 링크 구문에 대해 걱정하지 않아도 됩니다. 48 | 49 | 생성한 링크는 복사하여 광고에 붙여넣으면 됩니다. 50 | 51 | ### 필요한 캠페인 변수만 사용 52 | 53 | 기존 UA의 URL 작성 도구에는 모두 6개의 필드가 있었지만, GA4에선 **캠페인 아이디**, **캠페인 소스**, **캠페인 매체**, **캠페인 이름**만 사용 가능합니다. 캠페인 용어와 캠페인 콘텐츠는 더 이상 지원되지 않습니다. 54 | 55 | ### 개인식별정보 전송 금지 56 | 57 | 모든 애널리틱스 고객이 준수해야 하는 애널리틱스 서비스 약관에 따라 애널리틱스로 개인 식별 정보를 전송하는 것은 금지됩니다. 58 | 59 | ## 5. 참고 자료 60 | 61 | - [Google Analytics Academy 초보자용 4.1](https://www.youtube.com/watch?v=ityoF7gvtJY) 62 | - [https://support.google.com/analytics/answer/10917952?hl=ko#zippy=%2C이-도움말에서는-다음-내용을-다룹니다](https://support.google.com/analytics/answer/10917952?hl=ko#zippy=%2C%EC%9D%B4-%EB%8F%84%EC%9B%80%EB%A7%90%EC%97%90%EC%84%9C%EB%8A%94-%EB%8B%A4%EC%9D%8C-%EB%82%B4%EC%9A%A9%EC%9D%84-%EB%8B%A4%EB%A3%B9%EB%8B%88%EB%8B%A4) 63 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/02-Basics/introduce.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: google-analytics-introduce 3 | title: Google 애널리틱스 소개 4 | author: Seongcheol Jo 5 | author_url: https://github.com/josworks27 6 | tags: [GoogleAnalytics, GA] 7 | --- 8 | 9 | # Google 애널리틱스 소개 10 | 11 | ## 0. 들어가기에 앞서 12 | 13 | 본 자료는 구글 애널리틱스 도움말의 초보자용 Google 애널리틱스의 주요 내용을 처음 시작하는 초보자들이 이해하기 쉽게 요약하였습니다. 14 | 15 | 자세한 내용이 궁금하다면 아래 링크를 참고하시기 바랍니다. 16 | 17 | [👉 원문 링크](https://support.google.com/analytics/answer/6383002?hl=ko) 18 | 19 | ## 1. 디지털 애널리틱스 정의 20 | 21 | 디지털 애널리틱스에 대해 구글의 Avinash Kaushik은 아래와 같은 정의를 내렸습니다. 22 | 23 | > '고객과 잠개고객의 온라인 사용 경험을 지소적으로 개선하여, 온라인과 오프라인에서 원하는 비즈니스 결과를 얻기 위해 자사 및 경쟁사에 대한 정성적, 정량적 데이터를 분석하는 것' 24 | 25 | 마케팅에서는 구매 유입경로의 개념을 활용하고 있는데, 기본적인 구매 유입경로를 보면 일반적으로 사용자들은 상품을 아래와 같은 단계로 구매합니다. 26 | 27 | - 획득 단계: 인지도 제고와 사용자 관심분야를 확보하는 시점 28 | - 행동 단계: 사용자가 귀사에 참여하는 시점 29 | - 전환 단계: 사용자가 귀사의 고객이 되어 거래하는 시점 30 | 31 | 이러한 과정을 디지털 애널리틱스를 활용하여 유입경로의 다양한 측면을 측정할 수 있고, 구매를 유도한 동작이 무엇인지 추적하고 해당 데이터를 이용하여 신규 및 기존 고객에게 도달하는 방법에 대한 정확한 판단을 내릴 수 있습니다. 32 | 33 | ## 2. 구글 애널리틱스의 작동 방식 34 | 35 | ### 2.1. 웹 사이트 추적 36 | 37 | 웹 사이트를 추적하기 위해선 구글 애널리틱스 계정을 만들고, 웹 사이트의 각 페이지에 자바스크립트 추적 코드를 추가해야 합니다. 이를 통해, 사용자가 페이지를 방문할 때마다 추적 코드는 사용자가 해당 페이지와 상호작용한 방법에 대한 익명 정보를 수집합니다. 38 | 39 | 페이지가 로드될 때 마다 추적 코드는 사용자 활동에 대한 정보를 수집하고 전송합니다. 구글 애널리틱스는 이 활동을 세션(Session) 이라고 하는 기간별로 그룹화합니다. 40 | 41 | 세션은 사용자가 추적 코드가 포함된 페이지로 이동할 때 시작되며, 30분 동안 활동이 없으면 종료됩니다. 세션이 종료된 후 사용자가 다시 페이지로 돌아오면 새로운 세션이 시작됩니다. 42 | 43 | ### 2.2. 처리 및 보고 44 | 45 | 추적 코드는 데이터를 수집할 때 해당 정보를 패키지로 묶어 구글 애널리틱스에 전송하여 보고서로 처리되도록 합니다. 구글 애널리틱스에서는 데이터를 처리할 때 사용자 기기가 모바일인지 데스크톱인지 또는 사용자가 사용한 브라우저의 유형과 같은 특정 기준에 따라 데이터를 집계하고 구성합니다. 46 | 47 | ![GA-introduce-Image-1](https://lh3.googleusercontent.com/AIFpRSMWBNNjsxvUKT9_9RVfV90tdE1YnfhltUWS1BYwn1G16ESdYzn3bMLJCwBS_A=w1790-h500) 48 | 49 | ## 3. 구글 애널리틱스 설정 50 | 51 | ### 3.1. 애널리틱스 구현의 기본 요소 52 | 53 | 모든 구글 애널리틱스 계정은 조직(Organization) 아래에 그룹화 할 수 있습니다. 이를 통해, 여러 구글 애널리틱스 계정을 한 그룹으로 관리할 수 있습니다. 54 | 55 | ![GA-introduce-Image-2](https://lh3.googleusercontent.com/_FW7BZSOnetJdZw_FShlv1rINVBM1_OSKISLi9BIAZKe5C2GxTGdLbXGLq6o2IHV1fyh=w1020-h570) 56 | 57 | 각 계정에는 여러 개의 속성(Property) 이, 각 속성에는 여러 개의 보기(View) 가 포함될 수 있어, 비즈니스에 가장 잘 맞는 방식으로 애널리틱스 데이터의 수집을 구성할 수 있습니다. 58 | 59 | 각 계정에는 1개 이상의 속성이 있고, 각 속성은 추적 코드에 표시되는 고유한 추적 ID(TrackingID)를 사용하여 서로 독립적으로 데이터를 수집할 수 있습니다. 60 | 61 | #### 보기(View) 설정 62 | 63 | 각 계정에 여러 개의 속성이 있는 것과 마찬가지로 각 속성에는 여러 개의 보기가 있을 수 있습니다. 구성 설정에서 필터 기능을 사용하여 각 보기의 보고서에 포함될 데이터를 결정할 수 있습니다. 64 | 65 | ![GA-introduce-Image-3](https://lh3.googleusercontent.com/SZuK8_PHrOYJbp5HIlSLd0_Rr6KgsqUTKpMcxOtxmJvFGMbskTu7-NBTwG9k38Z0nb7N=w1020-h570) 66 | 67 | 예를 들어 전 세계 구글 스토어의 데이터를 모두 포함하는 하나의 보기를 만들 수 있고, 지역별 데이터를 보려는 경우에는 북미, 유럽, 아시아 등 별도의 보기를 만들 수도 있습니다. 68 | 69 | 보기에서 목표(Goals)를 설정할 수도 있습니다. 목표는 웹사이트에서 전환 또는 비즈니스 목표를 추적하는 데 매우 유용한 방법입니다. 70 | 71 | **_예시_** 72 | 73 | - 이메일 뉴스레터에 가입한 사용자 수 74 | - 제품을 구매한 사용자 수 75 | 76 | 구글 애널리틱스에 데이터가 수집되고 처리된 후에는 데이터를 변경할 수 없으므로, 계정, 속성, 보기를 신중하게 결정하세요. 또한 새로 만들어진 보기는 만들어진 날짜부터 수집된 데이터만 포함되며, 보기를 삭제하면 제한된 시간 내에 관리자만 복구할 수 있습니다. 77 | 78 | ![GA-introduce-Image-4](https://lh3.googleusercontent.com/cG0LPlrrIXuZFMqH37qgcpHDb3S4ZwpbE3KBMYpzylp9hg8DZj3Z2yiCU-k_ckXG0IxO=w1020-h570) 79 | 80 | #### 사용자 권한 81 | 82 | 계정, 속성, 보기 레벨에서 다른 사용자에게 권한을 지정할 수 있습니다. 각 레벨에서는 그 레벨의 상위 권한을 상속받습니다. 83 | 84 | **_예시_** 85 | 86 | - 계정에 대해 엑세스 권한이 있는 경우, 해당 계정 바로 아래에 있는 속성과 보기에서도 동일한 엑세스 권한을 가집니다. 87 | - 보기에 대해서만 엑세스 권한이 있는 경우에는 해당 보기와 연결된 속성 또는 계정을 수정할 수 있는 권한은 부여되지 않습니다. 88 | 89 | 구글 애널리틱스에서 '관리'를 클릭하면 '사용자 관리', '수정', '공동작업' 또는 '읽기 및 분석'에 대해 사용자 권한을 설정할 수 있습니다. 90 | 91 | - 사용자 관리: 사용자가 계정, 속성, 보기에 대한 사용자 엑세스를 추가/삭제할 수 있습니다. 92 | - 수정: 사용자가 구성 설정을 변경할 수 있습니다. 93 | - 공동작업: 사용자가 대시보드 또는 특정 측정 설정과 같은 사항을 공유할 수 있습니다. 94 | - 읽기 및 분석: 사용자가 데이터 열람, 보고서 분석, 대시보드 생성을 할 수 있지만 설정을 변경하거나 신규 사용자를 추가할 수는 없습니다. 95 | 96 | ### 3.2. 단계별 설정 방법 97 | 98 | #### 시작하기 99 | 100 | 구글 계정을 사용하여 애널리틱스에 엑세스할 수 있습니다. 계정이 없는 경우 구글 애널리틱스 웹사이트(analytics.google.com)에서 계정을 만들 수 있습니다. 101 | 102 | ![GA-introduce-Image-5](https://storage.googleapis.com/academy-prod/evolve/academy/course06/ko/unit1/lesson3/course/en/assets/5d4b2652be65813803ed171c/large.png) 103 | 104 | #### 계정 설정 105 | 106 | 원하는 계정 이름을 입력하고, 조직(Organization)을 연결하거나 계정 데이터의 공유 설정 등의 옵션을 선택할 수 있습니다. 107 | 108 | ![GA-introduce-Image-6](https://storage.googleapis.com/academy-prod/evolve/academy/course06/ko/unit1/lesson3/course/en/assets/5d39f58a7ff2d605b24d235e/large.png) 109 | 110 | #### 측정 대상 설정 111 | 112 | 측정 대상으로 웹사이트, 모바일 또는 둘 다 측정할지 설정할 수 있습니다. 113 | 114 | ![GA-introduce-Image-7](https://storage.googleapis.com/academy-prod/evolve/academy/course06/ko/unit1/lesson3/course/en/assets/5d39f2477ff2d605b24d235a/large.png) 115 | 116 | #### 속성 설정 117 | 118 | 트랙킹하려는 웹사이트의 이름을 지정하여 속성을 설정할 수 있고, 업종 카테고리를 선택하여 구글 애널리틱스에서 업종에 맞는 더 나은 보고서와 정보를 제공받을 수 있습니다. 119 | 120 | ![GA-introduce-Image-8](https://storage.googleapis.com/academy-prod/evolve/academy/course06/ko/unit1/lesson3/course/en/assets/5d39f46b7ff2d605b24d235d/large.png) 121 | 122 | #### 추적 코드 설정 123 | 124 | 속성 설정을 마치면 자바스크립트 추적 코드가 표시됩니다. 이 코드를 웹사이트의 head 태그 가장 위에 추적 코드를 넣습니다. 125 | 126 | ![GA-introduce-Image-9](https://storage.googleapis.com/academy-prod/evolve/academy/course06/ko/unit1/lesson3/course/en/assets/5d4b27febe65813803ed171f/large.png) 127 | 128 | #### 실시간 개요 확인 129 | 130 | 추적 코드를 설정한 다음에는 구글 애널리틱스에서 트랙킹이 잘 되고 있는지 확인할 수 있는 실시간 개요 보고서를 볼 수 있습니다. 131 | 132 | ![GA-introduce-Image-10](https://storage.googleapis.com/academy-prod/evolve/academy/course06/ko/unit1/lesson3/course/en/assets/5d56f3f5be65813803ed1982/large.png) 133 | 134 | ## 4. 계정 보기 필터를 설정하는 방법 135 | 136 | 보기에 필터를 설정하는 기본적인 방법은 아래 원문과 참고자료에서 확인하실 수 있습니다. 137 | 138 | [👉 원문 링크](https://support.google.com/analytics/answer/6382981?hl=ko) 139 | 140 | [👉 보기 필터 작성 및 관리 참고자료](https://support.google.com/analytics/answer/1034823?hl=ko#zippy=%2C%EC%9D%B4-%EB%8F%84%EC%9B%80%EB%A7%90%EC%97%90-%EB%82%98%EC%99%80-%EC%9E%88%EB%8A%94-%EB%82%B4%EC%9A%A9%EC%9D%80-%EB%8B%A4%EC%9D%8C%EA%B3%BC-%EA%B0%99%EC%8A%B5%EB%8B%88%EB%8B%A4) 141 | 142 | ## 5. 참고자료 143 | 144 | - [https://analytics.google.com/analytics/academy](https://analytics.google.com/analytics/academy/) 145 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/02-Basics/realtime-reports.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: realtime-reports 3 | title: 실시간 보고서 4 | author: Seongcheol Jo 5 | author_url: https://github.com/josworks27 6 | tags: [GoogleAnalytics, GA] 7 | --- 8 | 9 | # 실시간 보고서 10 | 11 | ## 1. 실시간 보고서란? 12 | 13 | 실시간 보고서는 현재 접속한 사용자 수, 사용자가 보고 있는 페이지 등을 실시간으로 보여 주는 보고서입니다. 실시간 보고서라고 해서 새로운 형태의 보고서는 아니고 개요 보고서를 제외한 잠재고객, 획득, 행동, 전환 보고서에서 확인할 수 있는 내용입니다. 14 | 따라서, 실시간 보고서란 이미 존재하는 지표 중 **실시간으로 처리할 수 있는 지표만 모아 놓은 보고서** 라고 생각할 수 있습니다. 15 | 16 | |종류|용도|출처| 17 | |------|---|---| 18 | |개요|하위 보고서의 데이트 요약|-| 19 | |위치|접속한 나라, 지역 확인|잠재고객 보고서| 20 | |트래픽 소스|직접 접속, 링크를 통한 접속 등의 유입 경로 확인|획득 보고서| 21 | |콘텐츠|사용자가 머물고 있는 페이지 확인|행동 보고서| 22 | |이벤트|사용자가 발생시킨 이벤트 확인|행동 보고서| 23 | |전환 수|목표 전환이 발생했는지 확인|전환 보고서| 24 | 25 | ## 2. 실시간 보고서의 활용 26 | 27 | 일반적으로 분석에서 기간을 설정하는 것은 중요하고 자주 쓰입니다. 하지만 실시간 보고서는 보고서의 이름처럼 현재 시점의 정보만 볼 수 있습니다. 이러한 특징으로 인해 실시간 보고서를 통해 무언가를 분석하기 보다 GA가 잘 작동하고 있는지 확인하는 용도로 사용합니다. 28 | 29 | ### 이벤트 설정 확인 30 | 31 | GA보고서는 이벤트, 목표를 만들었을 때, 실제 반영까지 최대 24~48시간이 소요됩니다. 따라서 설정한 이벤트가 잘 적용되었는지 확인이 필요한데 이 때, 즉각 확인하는 용도로 실시간 보고서를 활용할 수 있습니다. 32 | 33 | * _실시간 > 이벤트_ 34 | 35 | ### 캠페인 성과 점검 36 | 37 | 새로운 캠페인을 시작하게 되면 사이트의 활성 사용자 수가 증가하고 캠페인이 이뤄지고 있는 페이지에 많은 사용자가 머물고 있을 것으로 추측할 수 있습니다. 이러한 추측을 실시간 보고서를 통해 확인할 수 있습니다. 38 | 39 | * _실시간 > 콘텐츠_ 40 | 41 | ## 3. 참고자료 42 | 43 | - [https://analytics.google.com/analytics/academy](https://analytics.google.com/analytics/academy/) 44 | - Do it! 사용자의 행동을 분석해 성과를 높이는 구글 애널리틱스 45 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/02-Basics/ua-ga4-difference.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: UA와 GA4의 차이점 3 | slug: what-is-the-difference-between-ua-and-ga4 4 | --- 5 | 6 | # UA와 GA4의 차이점 7 | 8 | > UA(Universal Analytics)는 Google Analytics(이하 GA)의 기존 버전입니다. 한편 GA4는 2020년에 출시된 새로운 버전입니다. 9 | 10 | ## 1. 계정 구조의 차이 11 | 12 | UA와 GA4의 계정 구조 차이에 대해 살펴보겠습니다. 먼저 UA의 기본적인 계정 구조에 대한 부분을 알고 싶으시다면 이 핸드북의 GA 기본편을 보고 오셔도 좋습니다. 13 | 14 | 여기서 간단히만 설명하자면 UA는 계정(Account) 밑에 속성(Property)이 있고, 속성 밑에 뷰(View)가 있는 구조입니다. 여러분께서는 계정을 만든 다음, 데이터를 추적하고 싶은 웹사이트나 앱을 속성으로 만들 수 있습니다. 즉, 속성 하나에 웹사이트나 앱 하나가 대응된다고 생각하면 됩니다. 그리고 하나의 계정에 여러 개의 속성이 있을 수 있습니다. 왜냐하면 여러 개의 웹사이트나 앱을 트래킹하고 싶을 수 있기 때문입니다. 15 | 16 | 하나의 속성에는 그 속성의 데이터를 보여주는 여러 개의 뷰(View)가 있을 수 있습니다. 뷰를 이해하기 쉽게 말하자면 **리포트** 라고 할 수 있을 것 같습니다. 그 속성으로 들어오는 데이터에 [필터](https://support.google.com/analytics/topic/1032939) 를 걸어서 보고 싶은 뷰(리포트)를 만들 수 있습니다. 예를 들어 **www.example.com** 이라는 웹사이트를 추적하기 위해 이에 대응되는 속성을 하나 만들고, 그 사이트에 들어오는 사람들 중 광고 클릭을 통해 유입된 사람만 보고 싶을 때는 필터를 걸어서 뷰(리포트)를 만들면 됩니다. 17 | 18 | | ![image](https://user-images.githubusercontent.com/46309894/131212192-c486ee48-f2b0-411b-9180-728d7d6b8b5f.png) | 19 | | :-------------------------------------------------------------------------------------------------------------: | 20 | | UA의 계정 구조 | 21 | 22 | ### 1.1. UA 계정 구조의 단점 23 | 24 | 이제 UA 계정 구조에 대해 간단히 살펴봤으니 어떤 단점이 있는지 보겠습니다. 25 | 26 | 1. **뷰 필터는 소급 적용되지 않는다** 27 | 28 | 여러분이 보고 싶은 특정한 데이터가 있어서 어떤 필터를 걸어 뷰를 생성했습니다. 이 날짜가 1월 1일이라고 가정해봅시다. 그 때부터 이 뷰는 필터에 따라서 처리된 데이터를 보여주기 시작합니다.그런데 2월 1일에 여러분은 뷰 데이터가 이상하다는 것을 눈치챘습니다. 애초에 필터를 만들 때 실수로 잘못 만들어버린 것입니다. 그래서 이 때 필터를 제대로 설정해서 다시 설정합니다. 그렇게 되면 2월 1일부터는 제대로 필터링된 데이터를 볼 수 있지만 이 전에 잘못된 필터를 설정한 1월 1일부터 1월 31일까지의 데이터는 다시 새로운 필터를 적용해서 볼 수가 없습니다. 즉 그 기간의 데이터는 이미 잘못된 데이터이고 새로운 필터를 설정했다고 해서 이전 기간에 소급해서 적용할 수 없다는 것입니다. 그래서 속성에는 모든 데이터를 모아두는 뷰(Unfiltered View)를 항상 유지하라고 합니다. 원본 데이터가 모아져있는 뷰가 없다면, 우리는 앞선 예시에서처럼 필터를 잘못 걸었을 때 그 기간에 대한 데이터를 영영 잃어버리게 되기 때문입니다. 29 | 30 | 필터의 단점에 대해 더 알아보고 싶다면 [여기](https://support.google.com/analytics/answer/1033162?hl=en#zippy=%2Cin-this-article) 에서 **Limitations of filters** 를 참고하실 수 있습니다. 31 | 32 | 2. **웹사이트와 앱은 각각의 속성으로 만들어야 한다** 33 | 34 | UA에서는 웹과 앱을 하나의 속성에서 관리할 수 없습니다. 동일한 서비스를 웹과 앱으로 동시에 서비스하고 있다고 해도, 각각의 속성으로 만들어 각각의 뷰를 생성해야 하므로 데이터를 모아서 보기에 불편한 점이 있습니다. 35 | 36 | ![image](https://user-images.githubusercontent.com/46309894/131214423-0c523610-fd0d-416e-9058-e9c1337648d7.png) 37 | 38 | ### 1.2. 개선된 GA4의 계정 구조 39 | 40 | GA4는 위에서 서술한 UA의 단점들을 어떻게 보완했는지 살펴보겠습니다. 41 | 42 | | ![image](https://user-images.githubusercontent.com/46309894/131215475-e024a396-1b60-4227-b7d9-c36b7d321660.png) | 43 | | :-------------------------------------------------------------------------------------------------------------: | 44 | | GA4의 계정 구조 | 45 | 46 | 1. **GA4에는 뷰가 없다** 47 | 48 | UA와 달리 GA4는 따로 뷰를 생성하지 않습니다. 그 대신 필터링된 데이터를 볼 수 있는 다른 방법을 제공합니다. 49 | 50 | 첫 번째는 데이터 필터입니다. GA4의 왼쪽 사이드바 맨 밑에 있는 관리자(Admin) - 속성(Property) - 데이터 설정(Data settings) - 데이터 필터(Data filters)로 들어가면 트래픽에 대한 필터를 걸 수 있습니다. 예를 들어 특정 서브도메인으로부터 온 트래픽만 필터링해서 보고 싶다면 이 기능을 사용하면 됩니다. 51 | 52 | 두 번째는 탐색(Explorations)입니다. 왼쪽 사이드바에 탐색(Explore)을 버튼을 누르면 굉장히 다양한 보고서를 만들 수 있습니다. 기본적으로 [Dimenstion과 Metric](https://support.google.com/analytics/answer/1033861?hl=en#zippy=%2Cin-this-article) 을 설정하여 보고서를 만들되 원하는 Dimension과 Metric 모두 필터링할 수 있습니다. 조금 더 자세한 내용은 [여기](https://support.google.com/analytics/answer/7579450?hl=en#zippy=%2Cin-this-article) 를 참고 바랍니다. 53 | 54 | 2. **GA4는 웹과 앱을 하나의 속성에서 관리할 수 있다** 55 | 56 | GA4에는 **데이터 스트림** 이라는 개념이 새로 등장합니다. 데이터 스트림은 **데이터 출처** 로 이해하면 쉬울 것 같습니다. 하나의 속성에 최대 3개의 데이터 출처로부터 데이터를 받을 수 있습니다. 이 3개는 각각 iOS, Android, 웹입니다. 57 | 58 | UA에서는 동일한 서비스라도 웹과 앱을 동일한 속성에서 데이터를 모아볼 수 없었는데 GA4에서는 통합해서 볼 수 있게 된 것입니다. 59 | 60 | ## 2. 그 외의 차이점 61 | 62 | 계정 구조 외에도 몇가지 개선된 점이 있습니다. 63 | 64 | - GA4에서는 페이지뷰, 스크롤, 링크 클릭, 파일 다운로드와 같은 중요한 행동들은 따로 설정하지 않아도 자동으로 추적합니다. 65 | 66 | - 퍼널 분석, 경로 분석과 같은 새로운 보고 옵션이 추가됐습니다. 67 | 68 | - UA 데이터 모델에서는 이벤트의 구조가 'Category', 'Action', 'Label' 이라는 3가지 구조로 나누어져 있으며 이에 맞추어 이벤트 데이터를 보내야 했습니다. 69 | 70 | 그리고 사용자의 행동을 **Hit** 이라고 하는데, 'page tracking hit', 'event tracking hit', 'ecommerce tracking hit' 등으로 분류돼 있고 데이터를 보낼 때 무슨 hit에 속하는지를 나타내는 hit type을 함께 전송해야 했습니다. 71 | 72 | 반면 GA4에서는 이런 hit type과 같은 구분 없이 모든 정보를 이벤트 하나로 처리하며, UA의 'Category', 'Action', 'Label' 과 달리 정해진 데이터 구조의 제한이 없이 원하는 데이터의 전송이 가능합니다. 이 차이점에 대해 더 자세히 알고 싶다면 [여기](https://support.google.com/analytics/answer/9964640?hl=en&ref_topic=10737980#zippy=%2Cin-this-article) 를 참고해보세요. 73 | 74 | ## 3. 마무리 75 | 76 | 지금까지 새로운 UA와 GA4의 차이점에 대해 알아봤습니다. 전반적으로 GA4는 UA보다 유연하게 데이터를 수집하고 통합적으로 볼 수 있다는 장점이 있는 것 같습니다. 그렇다면 지금 UA를 쓰고 있다면 GA4로 옮겨야 할까요? 만약 웹과 앱의 데이터를 하나의 속성에서 보고 싶다면 옮기는 게 좋겠고, 더 많은 보고서와 향상된 측정 기능을 사용하고 싶으면 고려해볼 수 있을 것 같습니다. 77 | 78 | 마지막으로 UA에서 GA4로 옮기고 싶다면 [여기](https://support.google.com/analytics/answer/10312255?hl=en) 를 참고해보세요. UA 애널리틱스 페이지의 왼쪽 사이드바 - 관리자 - 속성에서 맨 위에 있는 GA4 어시스턴트 설정을 누르면 시작할 수 있습니다. 79 | 80 | ## 4. 참고 자료 81 | 82 | - [https://www.inflearn.com/course/구글-애널리틱스4](https://www.inflearn.com/course/%EA%B5%AC%EA%B8%80-%EC%95%A0%EB%84%90%EB%A6%AC%ED%8B%B1%EC%8A%A44/) 83 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/03-Advanced/01-terms.md: -------------------------------------------------------------------------------- 1 | # 보고서 분석을 위한 개념 2 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/03-Advanced/02-acquisition.md: -------------------------------------------------------------------------------- 1 | # 유입 분석 2 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/03-Advanced/03-behavior.md: -------------------------------------------------------------------------------- 1 | # 행동 분석 2 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/03-Advanced/04-conversion.md: -------------------------------------------------------------------------------- 1 | # 전환 분석 2 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/03-Advanced/ab-test.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # A/B 테스트란 무엇일까 6 | 7 | A/B 테스트란 동일한 웹 페이지에 대해 둘 이상의 대안(A와 B) 중 어떤 것이 더 효과적인지 측정하는 무작위 실험입니다. 웹사이트 또는 앱 방문자들을 랜덤한 그룹으로 나누어 동시에 한 그룹에게는 A, 다른 그룹에게는 B를 보여주고 어떤 것이 더 효과적이었는지 측정합니다. 측정항목은 웹사이트마다 다릅니다. 예를 들어 이커머스 사이트의 경우 상품의 판매를 측정할 수 있고 콘텐츠 퍼블리싱 사이트의 경우 방문자가 콘텐츠를 얼마나 읽었는지 측정할 수 있습니다. 참고로 여기서 A는 원래 버전 의미하고 B는 새로운 버전을 의미합니다. 8 | 9 | ## A/B 테스트가 왜 필요할까 10 | 11 | A/B 테스트는 왜 필요할까요? 이커머스 웹사이트를 예시로 들겠습니다. 이 경우 우리는 방문자들이 장바구니에 상품을 담고 결제까지 마치기를 원합니다. 하지만 많은 사람들이 방문하지만 구매 전환율은 아주 낮다면 왜 그런걸까요? 장바구니에 상품을 담기까지 했는데 결제까지 이어지지 않는다면 무엇이 문제일까요? A/B 테스트를 통해서 이런 문제를 개선할 수 있습니다. 12 | 13 | 1. 방문자의 어려움 해결 및 그에 따른 이탈률 감소 14 | 15 | 방문자들은 특정한 목적을 가지고 웹사이트 또는 앱에 방문합니다. 특정 제품을 구매하기 위해서일 수도 있고 어떤 주제에 대해 읽기 위해서일 수도 있습니다. 하지만 이런 목적을 달성하는 데에 방해요소가 있다면 방문자들은 사이트 또는 앱을 중간에 종료할 것입니다. 예를 들어 이커머스 사이트의 경우 제품 검색 결과 보여지는 UI가 너무 복잡하여 원하는 제품을 찾기가 어려울 수도 있고, 결제 페이지까지 가는 단계가 너무 많아서 도중에 물건을 구매할 마음이 사라져서 일 수도 있습니다. 16 | 17 | 구글 애널리틱스와 같은 방문자 행동 분석 도구를 통해 어디에서 많은 방문자 이탈이 일어나는지를 분석한 다음, 해당 페이지에서 A/B 테스트를 해보며 이탈율을 줄여 나갈 수 있습니다. 이는 방문자들의 전반적인 UX를 개선하여 사이트에서 더 많은 시간을 보내게 하고, 구매 전환과 같은 행동으로 이어질 확률도 높아집니다. 18 | 19 | 2. 추측이 아닌 데이터 기반 의사결정 20 | 21 | A/B 테스트는 추측이 아닌 데이터에 의한 의사결정을 내리도록 돕습니다. 페이지에서 보낸 시간, 클릭률, 재방문율, 구매 전환율 등 통계적으로 유의미한 데이터를 가지고 어떤 것이 더 나은 버전인지를 결정할 수 있습니다. 22 | 23 | 3. 안전하게 더 나은 ROI(\*) 얻기 24 | 25 | 웹사이트를 통째로 개편하는 것은 그만큼 위험이 따릅니다. 개편하는 데에도 많은 리소스가 드는데 개편 후에 방문자들이 개편된 사이트를 더 좋아할지 확실하게 알 수 없습니다. 26 | 27 | A/B 테스트는 이런 위험을 감수하지 않고 더 나은 ROI를 얻게 해줍니다. A/B 테스트를 통해 조금씩 조금씩 페이지를 변경해나가는 방법은 최소한의 수정으로 최대한의 효과를 산출하게 할 수 있습니다. 28 | 29 | ## A/B 테스트 프로세스 30 | 31 | 실제 A/B 테스트의 설계와 구현은 훨씬 복잡할 수 있지만 여기서는 간단한 흐름만 소개하도록 하겠습니다. 예를 들어 각종 뉴스들을 모아서 보여주는 뉴스 어플이 있다고 가정하겠습니다. 이 어플에 들어가면 뉴스들이 리스트 형태로 나열되고, 현재는 페이지네이션을 통해 더 많은 뉴스를 볼 수 있는 상태라고 가정해봅시다. 그런데 혹시 페이지네이션 방법이 아니라 스크롤이 어느 부분에 오면 다음 뉴스를 자동으로 불러오게 하는 무한 스크롤을 구현하면 유저들이 더 많은 뉴스를 읽을까요? 이를 검증하기 위해 A/B 테스트를 해보려고 합니다. 32 | 33 | | ![infinite-scroll-vs-pagination](https://www.knowband.com/blog/wp-content/uploads/2019/05/infinite-scroll-and-pagination.jpg) | 34 | | :---------------------------------------------------------------------------------------------------------------------------: | 35 | | _이미지 출처 - _ | 36 | 37 | 1. 가설 설정 38 | 39 | 우선 검증하고자 하는 가설을 세워야 합니다. 제가 세운 가설은 **페이지네이션보다 무한 스크롤을 사용했을 때 방문자들이 이 어플에서 더 많은 시간을 보낼 것이다**라는 가설입니다. 40 | 41 | 2. 메트릭 설정 42 | 43 | 메트릭은 위에서 세운 가설이 참인지 거짓인지를 판단하기 위해 측정해야 하는 항목을 의미합니다. 이 가설이 맞는지 검증하려면 **방문자들이 해당 어플에서 머문 시간**을 측정해야 합니다. 44 | 45 | 3. 실험 설계 46 | 47 | 가설이 맞는지를 올바르게 검증하려면 검증하려는 가설 외의 다른 환경은 모두 동일해야 합니다. 예를 들어 뉴스의 노출 순서가 달라진다든지, 뉴스 헤드라인의 폰트 크기가 바뀐다든지 등의 추가 변경사항이 없어야 합니다. 새로운 버전에서의 달라진 점은 페이지네이션 대신 무한 스크롤이 적용됐다는 점 뿐이어야 합니다. 48 | 49 | 4. 결과 도출 50 | 51 | 실험 결과를 통해 측정된 메트릭 간 차이가 통계적으로 유의미한지 확인하여 더 나은 버전이 무엇인지 결정합니다. 52 | 53 | ## 마무리 54 | 55 | A/B 테스트의 개념, 이점, 프로세스에 대해 간단하게 설명해보았습니다. A/B 테스트에는 여러가지 솔루션이 있지만 만약 구글 애널리틱스를 사용하고 있다면 [구글 옵티마이즈](https://optimize.google.com/)를 사용해서 간단한 [A/B 테스트](https://support.google.com/optimize/answer/6211930#zippy=%2C%EC%9D%B4-%EB%8F%84%EC%9B%80%EB%A7%90%EC%97%90-%EB%82%98%EC%99%80-%EC%9E%88%EB%8A%94-%EB%82%B4%EC%9A%A9%EC%9D%80-%EB%8B%A4%EC%9D%8C%EA%B3%BC-%EA%B0%99%EC%8A%B5%EB%8B%88%EB%8B%A4)를 수행할 수도 있습니다. 다만 현재는 UA만 지원하고 GA4는 지원하고 있지 않으니 참고하시기 바랍니다. A/B 테스트의 개념을 이해하는 데 도움이 되었기를 바라며 글을 마치겠습니다. 56 | 57 | (\*) ROI: 비용 대비 수익 비율. ROI가 높다는 것은 투자비용 대비 좋은 성과를 냈다는 의미입니다. 58 | -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/03-Advanced/funnel-analysis.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | # 퍼널 분석 (Funnel Analysis) 5 | 내가 만든 쇼핑몰 사이트에 방문자가 있다고 해도, 그들 모두가 물품을 구매하는 것은 아닙니다. 누군가는 소개 페이지에서 창을 닫고, 누군가는 회원가입을 하는 도중에 그만들 수도 있죠. 이때 우리는 **퍼널 분석**을 통해 잠재고객들이 실제 **구매**의 단계까지 가는 경로와, **이탈**을 최소화하는 방법을 분석합니다. 6 | 7 | ## 퍼널이란? 8 | ![퍼널 이미지](https://static.thenounproject.com/png/2731497-200.png "출처: thenounproject.com monkik") 9 | 퍼널은 흔히 **깔때기**라는 뜻을 가지고 있지만, 데이터 분석 상에서는 방문에서 구매로 이어지는 고객의 여정을 뜻합니다. 이는 목표 지향적 데이터 분석을 가장 잘 나타내는 상징이기도 합니다. 10 | 11 | ## 퍼널 분석 12 | 퍼널 분석법은 간단히 아래와 같은 단계를 거칩니다. 13 | 1. 최종목표 정의
(ex. 구매 완료 페이지 도달) 14 | 2. 목표에 도달하게 되는 단계 설정
(ex. 페이지 유입 - 스크롤 - 광고 페이지 클릭 - 결제 페이지 도달) 15 | 3. 단계별 이탈률 측정
16 | ```평균 대비 이탈률```: 평균에 비해 얼마나 적게 또는 많이 이탈했는지 보여주는 지표 17 | 4. 이탈률이 높은 순서대로 단계 분석
18 | *이 때, 이탈률이 왜 높은지에 대한 원인 분석은 다양한 방법을 사용하여 진행해야 할 것 입니다. 마케팅 담당자와 협의하여 유저 인터뷰, 디자인 검토 등을 통해 확인해봅시다.* 19 | 5. 각 단계별 KPI 설정 및 개선
20 | ```KPI```: Key Performance Indicator의 약자. 핵심성과지표. 성취해야 할 목표 21 | 22 | ## 퍼널 분석을 위한 GA 설정 23 | 효과적인 퍼널 분석을 위해서는 각 단계별로 남아있는 사용자의 수를 측정하는 것이 필수적입니다. 그러나 기존의 GA 리포트 트래픽으로는 이를 바로 찾아내기 어렵습니다. 그러므로 우리는 **세그먼트 설정**을 통해 보다 구체적인 여과장치를 마련해야 합니다. 24 | 세그먼트 설정을 **각 단계별로 순서를 적용하게 되면**, 단계별로 남아있는 사용자를 확인할 수 있습니다. 이를 바탕으로 우리는 이탈률을 계산하고, 우선적으로 개선해야 할 단계를 결정할 수 있습니다. 25 | 26 | ## 퍼널 분석 관련 TIP 27 | - 목표 도달을 위한 단계 설정이 어렵다면, AARRR 프레임워크를 이용하자.
28 | ```AARRR프레임워크```: 방문(Acquisition)-회원가입(Activation)-구매(Revenue)-재구매(Retention)-타인에게 추천(Referral) 29 | - 초기 단계에서 이탈률이 높을 경우, 후반 단계의 측정치 또한 저조하리라는 것을 명심하자. 30 | - 이탈률 감소를 위한 개선안은 **A/B 테스트**등과 같은 기법을 통해 다양하게 실험해보자. -------------------------------------------------------------------------------- /docs/handbook/archive/Google-Analytics/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Google Analytics", 3 | "position": 3 4 | } 5 | -------------------------------------------------------------------------------- /docs/handbook/archive/Introduction/01-importance-of-data-analysis.md: -------------------------------------------------------------------------------- 1 | # 데이터 분석의 중요성/필요성 2 | -------------------------------------------------------------------------------- /docs/handbook/archive/Introduction/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Kick Off", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /docs/handbook/archive/Introduction/blog.md: -------------------------------------------------------------------------------- 1 | # 웹에서 어떤 데이터를 추적해야할까요? - 블로그 2 | 3 | 보통 블로그의 데이터를 추적한다고 할 때 제일 먼저 떠오르는 것은 글의 조회수일 것 입니다. 조회수란 것이 가장 직관적이면서도 기본이 되는 지표이기 때문입니다. 하지만 해당 데이터만으로만 블로그를 성공으로 이끄는 전략을 세우기엔 무리가 있습니다. 만약 내 글의 유입경로를 알 수 있다면? 사람들이 내 글에 들어와서 스크롤을 내려서 봤는지 알 수 있다면? 지피지기면 백전백승! 내 블로그의 데이터에 대해서 잘 알수록 블로그를 성공으로 이끌 수 있겠죠. Google Analytics 4를 활용해 블로그 데이터를 분석할 수 있는 세가지 방법에 대해서 소개해보고자 합니다. 4 | 5 |
6 | 7 | ## 조회 수 8 | 9 | 구글 애널리틱스에서 [page_view](https://support.google.com/analytics/answer/9322688?hl=ko) 이벤트는 앞서 말한 조회수에 해당하는 개념입니다. 이 이벤트는 사용자가 웹사이트에서 페이지를 조회할 때마다 트리거됩니다. *수명 주기 > 참여도 > 페이지 및 화면 > 이벤트 수 > page_view 선택* 하면 확인해볼 수 있습니다. 10 | 11 | ![1](https://user-images.githubusercontent.com/60052127/130340061-d8aee595-b375-424b-8e2a-cb87f169759b.png) 12 | 13 | Column 제목에 마우스를 hover하면 해당 측정기준에 대한 설명을 볼 수 있고 클릭을 하게 되면 해당 제목으로 정렬된 데이터를 볼 수 있습니다. 14 | 15 | 블로그의 글이 얼마나 많은 조회수를 기록했는가는 중요하지 않지만, 아래와 같은 상황에선 의미를 가지기에 다른 측정 항목과 조합했을 때 시너지가 날 수 있는 지표입니다. 16 | 17 | - 사람들이 하나의 글을 조회한 후 다른 글의 조회로 이어진 경우 18 | - 사람들이 글을 조회한 후 블로그를 구독이나 팔로우한 경우 19 | - 어떤 주제로 작성했을 때 블로그의 traffic이 늘었는지, 줄었는지 20 | 21 |
22 | 23 | 24 | ## 참여율 25 | 26 | `engagment rate`, 참여율이란 `참여 세션 수 / 세션 수`로 계산되는 사용자 참여 세션 수의 비율입니다. 참여 세션 수란 10초 넘게 지속되었거나, 전환 이벤트가 1회 이상 발생했거나, 페이지 조회수가 2회 이상인 세션 수입니다. GA4 에선 이전에 사용하던 이탈률, 종료율 대신 참여율이라는 새로운 측정 기준이 생겼습니다. '사용자가 페이지에서 잘 나가는가' 대신 '사용자가 잘 참여하는가' 로 지표가 바뀌었다고 볼 수 있는데 결국 의미하는 것은 동일합니다. 참여율은 *수명주기 > 획득 > 사용자 획득/트래픽* 획득 에서 확인 가능합니다. 27 | 28 | ![2](https://user-images.githubusercontent.com/60052127/130340056-5b94dc91-908d-4906-98b8-0566ce84729a.png) 29 | 30 | 참여율이 낮다면 아래와 같은 해석이 가능합니다. 이런 점들을 보완해서 다음 글을 작성하는데 참고한다면 성공적인 블로그를 작성하는데 도움이 될 것입니다. 31 | 32 | - 서론이 매력적이지 않았다. 33 | - 콘텐츠의 질이 좋지 않다. 34 | - 블로그에 집중력을 저해하는 요소들이 많다. 35 | - 사이트 로딩 속도가 느리다. 36 | 37 |
38 | 39 | 40 | ## 유입 경로 41 | 42 | 어디서 내 글이 공유되었을까요? *수명 주기 > 획득 > 트래픽 획득* 에서 확인 가능합니다. 43 | 44 | ![3](https://user-images.githubusercontent.com/60052127/130340058-72224715-57fb-47eb-a57f-a7df62ff327f.png) 45 | 46 | 필자의 개인적인 경험으로는 유입경로 확인을 통해 내 글이 유용한 정보였는지 확인할 수 있었습니다. 예를 들면 kubernetes를 활용해 특정 과제를 해결하는 튜토리얼을 작성했던 적이 있습니다. 나중에 유입 경로를 확인해보니 kubernetes 커뮤니티, 트위터 등에 해당 글이 공유되었다는 것을 확인할 수 있었고 작성한 글이 다른 사람들에게 도움이 되었다는 것을 알 수 있었습니다. 47 | 48 | 만약 특정 그룹을 타겟팅해 작성한 글이라면 유입경로 확인을 통해 타겟팅이 성공적이었는지 확인할 수 있겠죠. 의외로 타겟팅한 그룹이 아닌 다른 그룹이 해당 글에 관심을 보였다면 또 다른 인사이트를 도출해낼 수 있을 것입니다. 49 | 50 |
51 | 52 | 이렇게 블로그 데이터를 GA4를 활용해 분석하는 방법들을 살펴봤는데, 앞선 방법들 외에도 사용자 재방문이나, 유입 키워드를 통해 분석을 한다거나 등의 블로그의 데이터를 분석할 수 있는 다양한 방법들이 존재합니다. 여러가지 분석을 시도해보면서 분석결과를 블로그의 작성방향에 참고한다면 더 좋은 블로그를 만들어나갈 수 있을 것입니다. 53 | 54 | ### 참고 55 | 56 | - [https://contentsmarketing.co.kr/blog/1view](https://contentsmarketing.co.kr/blog/1view) 57 | - [https://databox.com/google-analytics-blog-post-performance](https://databox.com/google-analytics-blog-post-performance) 58 | - [https://ken-williams.com/guide/overview/where-did-bounce-rate-go-in-google-analytics-4/](https://ken-williams.com/guide/overview/where-did-bounce-rate-go-in-google-analytics-4/) 59 | - [https://dockyum.tistory.com/37](https://dockyum.tistory.com/37) 60 | -------------------------------------------------------------------------------- /docs/handbook/archive/google-analytics-basics/tracking-campaigns-with-URL-Builder.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: URL 작성 도구를 활용한 캠페인 추적 3 | slug: tracking-campaigns with URL Builder 4 | --- 5 | 6 | # URL 작성 도구로 캠페인 추적하기 7 | 8 | ## 추적용 캠페인 태그 생성 방법 9 | 10 | 1. 광고 또는 캠페인과 연결할 방문 페이지의 URL을 입력하고, 이후 캠페인 소스와 캠페인 매체의 입력란을 작성합니다. 11 | 12 | (캠페인 검색어와 캠페인 콘텐츠는 선택사항입니다.) 13 | 14 | 캠페인 이름을 작성합니다. 검색어, 콘텐츠, 이름은 자유 형식으로 지을 수 있습니다. 15 | 16 | (단, Google Analytics 보고서에서 식별할 수 있어야 합니다.) 17 | 18 | 2. 하단에서 'URL 생성'을 클릭합니다. 이후 캠페인 매개변수가 모두 추가된 링크가 생성됩니다. 19 | 20 | ## 주의할 점 21 | 22 | URL은 한 번에 하나씩 만들 수 있습니다. 23 | 24 | (규모가 큰 캠페인에서는 URL을 하나씩 만드는 대신 스프레드시트를 이용하는 것이 좋습니다. ) 25 | 26 | --- 27 | 28 | 캠페인을 시작하기 전, 만든 링크를 통한 추적 태그가 제대로 작동하는지 확인해야 합니다. 29 | 30 | (일부 경우에는 웹사이트 구성 때문에 Google 애널리틱스 캠페인 추적이 제대로 작동하지 않을 수 있습니다. ) 31 | 32 | ## 테스트 하는 방법 33 | 34 | 1. 시크릿 모드 창을 열거나 비공개 브라우징을 시작합니다. 35 | 36 | 2. 캠페인 추적용으로 만든 링크를 복사하여 브라우저의 주소입력란에 붙여넣습니다. 37 | 38 | 3. 웹사이트가 로드되면, 해당 사이트에서 중요한 작업을 수행하며 테스트해봅니다. 39 | 40 | Ex) 웹사이트의 목표가 체험 가입자를 늘리는 것이라면, 해당 사이트에서 가입 절차를 완료해봅니다. 41 | 42 | ## 출처 43 | 44 | [Google Analytics Academy 초보자용 4.2](https://www.youtube.com/watch?v=pNRgUq5sDhc) 45 | -------------------------------------------------------------------------------- /docs/handbook/archive/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # 환영합니다! 6 | 7 | ## 소개 8 | 9 | > Web Analytics Handbook은 아직 개발중으로, 모든 컨텐츠가 준비되지 않았습니다. 10 | 11 | 인터넷 중심의 소비 공간 이동, 마케팅 채널의 다변화등으로 인해 점점 사용자의 행동을 예측하기 어려워진 지금 대부분의 기업들에게 사용자 데이터 분석(Daily Active User, 전환율 측정 등)은 선택이 아닌 필수가 되었습니다. 12 | 13 | 하지만 웹 프로젝트에 데이터 분석을 도입하는 것은 쉽지 않은 일입니다. 데이터 분석 자체에 대한 이해도와 여러 도구들을 설치하기 위한 예시가 필요하지만, 자료들은 분산되어 있고 실전적인 예시는 부족합니다. 14 | 15 | **Web Analytics Handbook**은 데이터 분석에 대한 기초 문서를 제공해서 모든 개발자가 쉽게 사용자 데이터를 분석할 수 있도록 도와주는 것을 목표로 합니다. 16 | 17 | ## 구성 18 | 19 | **Web Analytics Handbook**은 아래 2가지 내용으로 구성됩니다. 20 | 21 | ### 1. 웹 분석 기초 22 | 23 | 웹 데이터 분석을 처음 접하는 개발자들을 위한 전반적인 개념과, 모던 웹프로젝트에서 데이터 분석이 필요한 이유, 중요성을 소개합니다. 24 | 25 | 웹 분석 기초를 모두 읽고 나면 아래 내용들을 배우실 수 있습니다. 26 | 27 | - 웹 데이터 분석의 필요성 28 | - 추적해야할 데이터들의 종류와 정의 29 | - A/B 테스트, 퍼널 분석 등 자주 사용되는 개념들 30 | - 트렌디한 웹 분석 도구들 31 | 32 | ### 2. Amplitude, Google Analytics Basics 33 | 34 | Product Analytics 도구의 기초적인 연동 및 추적 방법을 소개합니다.
35 | 36 | 각 섹션을 모두 읽고 나면 아래 내용들을 배우실 수 있습니다. 37 | 38 | - 해당 Product Analytics 도구의 특징, 기능 39 | - 해당 Product Analytics 도구의 기초적인 사용법 40 | 41 | ## 목표로 하지 않는 것 42 | 43 | **Web Analytics Handbook**은 기초적인 개념 소개만을 목표로 합니다.
44 | 만약 다른 내용을 찾고 있다면, 아래의 문서들을 추천합니다. 45 | 46 | - React 어플리케이션에 손쉽게 웹 분석을 도입하고 싶다면: [React Analytics Provider](https://everyanalytics.github.io/web-analytics-handbook/docs/react-analytics-provider/intro) 47 | - 더 많은 웹 분석과 용어들이 궁금하다면: [용어사전](https://everyanalytics.github.io/web-analytics-handbook/wiki) 48 | - 더 자세한 경험 위주의 글들을 보고 싶다면: [Blog](https://everyanalytics.github.io/web-analytics-handbook/blog) 49 | -------------------------------------------------------------------------------- /docs/handbook/archive/outro.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 5 3 | --- 4 | 5 | # 마치며 6 | -------------------------------------------------------------------------------- /docs/handbook/archive/tutorial-basics/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Tutorial - Basics", 3 | "position": 6 4 | } 5 | -------------------------------------------------------------------------------- /docs/handbook/archive/tutorial-basics/congratulations.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 6 3 | --- 4 | 5 | # Congratulations! 6 | 7 | You have just learned the **basics of Docusaurus** and made some changes to the **initial template**. 8 | 9 | Docusaurus has **much more to offer**! 10 | 11 | Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**. 12 | 13 | Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610) 14 | 15 | ## What's next? 16 | 17 | - Read the [official documentation](https://docusaurus.io/). 18 | - Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout) 19 | - Add a [search bar](https://docusaurus.io/docs/search) 20 | - Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase) 21 | - Get involved in the [Docusaurus Community](https://docusaurus.io/community/support) 22 | -------------------------------------------------------------------------------- /docs/handbook/archive/tutorial-basics/create-a-blog-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | 5 | # Create a Blog Post 6 | 7 | Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed... 8 | 9 | ## Create your first Post 10 | 11 | Create a file at `blog/2021-02-28-greetings.md`: 12 | 13 | ```md title="blog/2021-02-28-greetings.md" 14 | --- 15 | slug: greetings 16 | title: Greetings! 17 | author: Steven Hansel 18 | author_title: Docusaurus Contributor 19 | author_url: https://github.com/ShinteiMai 20 | author_image_url: https://github.com/ShinteiMai.png 21 | tags: [greetings] 22 | --- 23 | 24 | Congratulations, you have made your first post! 25 | 26 | Feel free to play around and edit this post as much you like. 27 | ``` 28 | 29 | A new blog post is now available at `http://localhost:3000/blog/greetings`. 30 | -------------------------------------------------------------------------------- /docs/handbook/archive/tutorial-basics/create-a-document.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Create a Document 6 | 7 | Documents are **groups of pages** connected through: 8 | 9 | - a **sidebar** 10 | - **previous/next navigation** 11 | - **versioning** 12 | 13 | ## Create your first Doc 14 | 15 | Create a markdown file at `docs/hello.md`: 16 | 17 | ```md title="docs/hello.md" 18 | # Hello 19 | 20 | This is my **first Docusaurus document**! 21 | ``` 22 | 23 | A new document is now available at `http://localhost:3000/docs/hello`. 24 | 25 | ## Configure the Sidebar 26 | 27 | Docusaurus automatically **creates a sidebar** from the `docs` folder. 28 | 29 | Add metadatas to customize the sidebar label and position: 30 | 31 | ```md title="docs/hello.md" {1-4} 32 | --- 33 | sidebar_label: 'Hi!' 34 | sidebar_position: 3 35 | --- 36 | 37 | # Hello 38 | 39 | This is my **first Docusaurus document**! 40 | ``` 41 | 42 | It is also possible to create your sidebar explicitly in `sidebars.js`: 43 | 44 | ```diff title="sidebars.js" 45 | module.exports = { 46 | tutorialSidebar: [ 47 | { 48 | type: 'category', 49 | label: 'Tutorial', 50 | - items: [...], 51 | + items: ['hello'], 52 | }, 53 | ], 54 | }; 55 | ``` 56 | -------------------------------------------------------------------------------- /docs/handbook/archive/tutorial-basics/create-a-page.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Create a Page 6 | 7 | Add **Markdown or React** files to `src/pages` to create a **standalone page**: 8 | 9 | - `src/pages/index.js` -> `localhost:3000/` 10 | - `src/pages/foo.md` -> `localhost:3000/foo` 11 | - `src/pages/foo/bar.js` -> `localhost:3000/foo/bar` 12 | 13 | ## Create your first React Page 14 | 15 | Create a file at `src/pages/my-react-page.js`: 16 | 17 | ```jsx title="src/pages/my-react-page.js" 18 | import React from 'react'; 19 | import Layout from '@theme/Layout'; 20 | 21 | export default function MyReactPage() { 22 | return ( 23 | 24 |

My React page

25 |

This is a React page

26 | 27 | ); 28 | } 29 | ``` 30 | 31 | A new page is now available at `http://localhost:3000/my-react-page`. 32 | 33 | ## Create your first Markdown Page 34 | 35 | Create a file at `src/pages/my-markdown-page.md`: 36 | 37 | ```mdx title="src/pages/my-markdown-page.md" 38 | # My Markdown page 39 | 40 | This is a Markdown page 41 | ``` 42 | 43 | A new page is now available at `http://localhost:3000/my-markdown-page`. 44 | -------------------------------------------------------------------------------- /docs/handbook/archive/tutorial-basics/deploy-your-site.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 5 3 | --- 4 | 5 | # Deploy your site 6 | 7 | Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**). 8 | 9 | It builds your site as simple **static HTML, JavaScript and CSS files**. 10 | 11 | ## Build your site 12 | 13 | Build your site **for production**: 14 | 15 | ```bash 16 | npm run build 17 | ``` 18 | 19 | The static files are generated in the `build` folder. 20 | 21 | ## Deploy your site 22 | 23 | Test your production build locally: 24 | 25 | ```bash 26 | npm run serve 27 | ``` 28 | 29 | The `build` folder is now served at `http://localhost:3000/`. 30 | 31 | You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**). 32 | -------------------------------------------------------------------------------- /docs/handbook/archive/tutorial-basics/markdown-features.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Markdown Features 6 | 7 | Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**. 8 | 9 | ## Front Matter 10 | 11 | Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/): 12 | 13 | ```text title="my-doc.md" 14 | // highlight-start 15 | --- 16 | id: my-doc-id 17 | title: My document title 18 | description: My document description 19 | slug: /my-custom-url 20 | --- 21 | // highlight-end 22 | 23 | ## Markdown heading 24 | 25 | Markdown text with [links](./hello.md) 26 | ``` 27 | 28 | ## Links 29 | 30 | Regular Markdown links are supported, using url paths or relative file paths. 31 | 32 | ```md 33 | Let's see how to [Create a page](/create-a-page). 34 | ``` 35 | 36 | ```md 37 | Let's see how to [Create a page](./create-a-page.md). 38 | ``` 39 | 40 | **Result:** Let's see how to [Create a page](./create-a-page.md). 41 | 42 | ## Images 43 | 44 | Regular Markdown images are supported. 45 | 46 | Add an image at `static/img/docusaurus.png` and display it in Markdown: 47 | 48 | ```md 49 | ![Docusaurus logo](/img/docusaurus.png) 50 | ``` 51 | 52 | ![Docusaurus logo](/img/docusaurus.png) 53 | 54 | ## Code Blocks 55 | 56 | Markdown code blocks are supported with Syntax highlighting. 57 | 58 | ```jsx title="src/components/HelloDocusaurus.js" 59 | function HelloDocusaurus() { 60 | return ( 61 |

Hello, Docusaurus!

62 | ) 63 | } 64 | ``` 65 | 66 | ```jsx title="src/components/HelloDocusaurus.js" 67 | function HelloDocusaurus() { 68 | return

Hello, Docusaurus!

; 69 | } 70 | ``` 71 | 72 | ## Admonitions 73 | 74 | Docusaurus has a special syntax to create admonitions and callouts: 75 | 76 | :::tip My tip 77 | 78 | Use this awesome feature option 79 | 80 | ::: 81 | 82 | :::danger Take care 83 | 84 | This action is dangerous 85 | 86 | ::: 87 | 88 | :::tip My tip 89 | 90 | Use this awesome feature option 91 | 92 | ::: 93 | 94 | :::danger Take care 95 | 96 | This action is dangerous 97 | 98 | ::: 99 | 100 | ## MDX and React Components 101 | 102 | [MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**: 103 | 104 | ```jsx 105 | export const Highlight = ({children, color}) => ( 106 | { 115 | alert(`You clicked the color ${color} with label ${children}`) 116 | }}> 117 | {children} 118 | 119 | ); 120 | 121 | This is Docusaurus green ! 122 | 123 | This is Facebook blue ! 124 | ``` 125 | 126 | export const Highlight = ({children, color}) => ( 127 | { 136 | alert(`You clicked the color ${color} with label ${children}`); 137 | }}> 138 | {children} 139 | 140 | ); 141 | 142 | This is Docusaurus green ! 143 | 144 | This is Facebook blue ! 145 | -------------------------------------------------------------------------------- /docs/handbook/archive/tutorial-extras/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Tutorial - Extras", 3 | "position": 7 4 | } 5 | -------------------------------------------------------------------------------- /docs/handbook/archive/tutorial-extras/manage-docs-versions.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Manage Docs Versions 6 | 7 | Docusaurus can manage multiple versions of your docs. 8 | 9 | ## Create a docs version 10 | 11 | Release a version 1.0 of your project: 12 | 13 | ```bash 14 | npm run docusaurus docs:version 1.0 15 | ``` 16 | 17 | The `docs` folder is copied into `versioned_docs/version-1.0` and `versions.json` is created. 18 | 19 | Your docs now have 2 versions: 20 | 21 | - `1.0` at `http://localhost:3000/docs/` for the version 1.0 docs 22 | - `current` at `http://localhost:3000/docs/next/` for the **upcoming, unreleased docs** 23 | 24 | ## Add a Version Dropdown 25 | 26 | To navigate seamlessly across versions, add a version dropdown. 27 | 28 | Modify the `docusaurus.config.js` file: 29 | 30 | ```js title="docusaurus.config.js" 31 | module.exports = { 32 | themeConfig: { 33 | navbar: { 34 | items: [ 35 | // highlight-start 36 | { 37 | type: 'docsVersionDropdown', 38 | }, 39 | // highlight-end 40 | ], 41 | }, 42 | }, 43 | }; 44 | ``` 45 | 46 | The docs version dropdown appears in your navbar: 47 | 48 | ![Docs Version Dropdown](/img/tutorial/docsVersionDropdown.png) 49 | 50 | ## Update an existing version 51 | 52 | It is possible to edit versioned docs in their respective folder: 53 | 54 | - `versioned_docs/version-1.0/hello.md` updates `http://localhost:3000/docs/hello` 55 | - `docs/hello.md` updates `http://localhost:3000/docs/next/hello` 56 | -------------------------------------------------------------------------------- /docs/handbook/archive/tutorial-extras/translate-your-site.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Translate your site 6 | 7 | Let's translate `docs/intro.md` to French. 8 | 9 | ## Configure i18n 10 | 11 | Modify `docusaurus.config.js` to add support for the `fr` locale: 12 | 13 | ```js title="docusaurus.config.js" 14 | module.exports = { 15 | i18n: { 16 | defaultLocale: 'en', 17 | locales: ['en', 'fr'], 18 | }, 19 | }; 20 | ``` 21 | 22 | ## Translate a doc 23 | 24 | Copy the `docs/intro.md` file to the `i18n/fr` folder: 25 | 26 | ```bash 27 | mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/ 28 | 29 | cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md 30 | ``` 31 | 32 | Translate `i18n/fr/docusaurus-plugin-content-docs/current/intro.md` in French. 33 | 34 | ## Start your localized site 35 | 36 | Start your site on the French locale: 37 | 38 | ```bash 39 | npm run start -- --locale fr 40 | ``` 41 | 42 | Your localized site is accessible at `http://localhost:3000/fr/` and the `Getting Started` page is translated. 43 | 44 | :::caution 45 | 46 | In development, you can only use one locale at a same time. 47 | 48 | ::: 49 | 50 | ## Add a Locale Dropdown 51 | 52 | To navigate seamlessly across languages, add a locale dropdown. 53 | 54 | Modify the `docusaurus.config.js` file: 55 | 56 | ```js title="docusaurus.config.js" 57 | module.exports = { 58 | themeConfig: { 59 | navbar: { 60 | items: [ 61 | // highlight-start 62 | { 63 | type: 'localeDropdown', 64 | }, 65 | // highlight-end 66 | ], 67 | }, 68 | }, 69 | }; 70 | ``` 71 | 72 | The locale dropdown now appears in your navbar: 73 | 74 | ![Locale Dropdown](/img/tutorial/localeDropdown.png) 75 | 76 | ## Build your localized site 77 | 78 | Build your site for a specific locale: 79 | 80 | ```bash 81 | npm run build -- --locale fr 82 | ``` 83 | 84 | Or build your site to include all the locales at once: 85 | 86 | ```bash 87 | npm run build 88 | ``` 89 | -------------------------------------------------------------------------------- /docs/handbook/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # 개발자를 위한 웹 분석 핸드북 6 | 7 | ## 읽는 방법 8 | 9 | > TODO: Part1, 2 작성 후 업데이트 필요 10 | 11 | - 사용자의 니즈에 따라 Part 1/2/3 어디를 봐야하는지 알려주기 12 | - Part 1 : GA 입문 개발자, GA 한번도 써본적 없는 사람들, 가볍게 접근하고 싶은 사람들 13 | - Part 2 : 결제 관련 데이터 처리를 필요로 하는 개발자, GA 활용해서 심화분석을 하고 싶은 사람들 14 | - Part 3 : 데이터 분석가, 웹 분석에 대해 알고 싶은 사람들(린 분석st) 15 | - 기존에 썼던 글(용어집으로 migration 한다는 글)도 함께 참고하면 좋다고 용어집 홍보해주기 -------------------------------------------------------------------------------- /docs/react-analytics-provider/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # 개요 6 | 7 | react-analytics-provider 8 | 9 | ## 라이브러리를 만듭시다! 10 | 11 | Looks Good To Me 12 | -------------------------------------------------------------------------------- /docs/react-analytics-provider/start/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "시작하기", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /docs/react-analytics-provider/start/installation.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # 설치 6 | -------------------------------------------------------------------------------- /docusaurus.config.js: -------------------------------------------------------------------------------- 1 | const lightCodeTheme = require('prism-react-renderer/themes/github'); 2 | const darkCodeTheme = require('prism-react-renderer/themes/dracula'); 3 | 4 | const TITLE = 'Web Analytics Handbook'; 5 | 6 | /** @type {import('@docusaurus/types').DocusaurusConfig} */ 7 | module.exports = { 8 | title: TITLE, 9 | tagline: '개발자를 위한 웹 사용자 데이터 분석 핸드북', 10 | url: 'https://EveryAnalytics.github.io', 11 | baseUrl: '/web-analytics-handbook/', 12 | onBrokenLinks: 'throw', 13 | onBrokenMarkdownLinks: 'warn', 14 | favicon: 'img/favicon.ico', 15 | organizationName: 'EveryAnalytics', // Usually your GitHub org/user name. 16 | projectName: 'web-analytics-handbook', // Usually your repo name. 17 | themeConfig: { 18 | navbar: { 19 | title: TITLE, 20 | logo: { 21 | alt: `${TITLE} logo`, 22 | src: 'img/logo.svg', 23 | }, 24 | items: [ 25 | { 26 | type: 'doc', 27 | docId: 'handbook/intro', 28 | position: 'left', 29 | label: '📚 핸드북', 30 | }, 31 | { 32 | type: 'doc', 33 | docId: 'react-analytics-provider/intro', 34 | position: 'left', 35 | label: '💡 react-analytics-provider', 36 | }, 37 | { to: '/blog', label: '👾 블로그', position: 'left' }, 38 | { to: '/wiki', label: '🙋 용어사전', position: 'left' }, 39 | { 40 | href: 'https://github.com/EveryAnalytics/web-analytics-handbook', 41 | label: 'GitHub', 42 | position: 'right', 43 | }, 44 | ], 45 | }, 46 | footer: { 47 | style: 'dark', 48 | links: [ 49 | { 50 | title: 'Docs', 51 | items: [ 52 | { 53 | label: 'Tutorial', 54 | to: '/docs/handbook/intro', 55 | }, 56 | ], 57 | }, 58 | { 59 | title: 'Community', 60 | items: [ 61 | { 62 | label: 'Stack Overflow', 63 | href: 'https://stackoverflow.com/questions/tagged/docusaurus', 64 | }, 65 | { 66 | label: 'Discord', 67 | href: 'https://discordapp.com/invite/docusaurus', 68 | }, 69 | { 70 | label: 'Twitter', 71 | href: 'https://twitter.com/docusaurus', 72 | }, 73 | ], 74 | }, 75 | { 76 | title: 'More', 77 | items: [ 78 | { 79 | label: 'Blog', 80 | to: '/blog', 81 | }, 82 | { 83 | label: 'GitHub', 84 | href: 'https://github.com/facebook/docusaurus', 85 | }, 86 | ], 87 | }, 88 | ], 89 | copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`, 90 | }, 91 | prism: { 92 | theme: lightCodeTheme, 93 | darkTheme: darkCodeTheme, 94 | additionalLanguages: ['dart'], 95 | }, 96 | }, 97 | presets: [ 98 | [ 99 | '@docusaurus/preset-classic', 100 | { 101 | docs: { 102 | sidebarPath: require.resolve('./sidebars.js'), 103 | // Please change this to your repo. 104 | editUrl: 105 | 'https://github.com/facebook/docusaurus/edit/master/website/', 106 | showLastUpdateAuthor: true, 107 | showLastUpdateTime: true, 108 | }, 109 | blog: { 110 | showReadingTime: true, 111 | // Please change this to your repo. 112 | editUrl: 113 | 'https://github.com/facebook/docusaurus/edit/master/website/blog/', 114 | }, 115 | theme: { 116 | customCss: require.resolve('./src/css/custom.css'), 117 | }, 118 | sitemap: { 119 | changefreq: 'weekly', 120 | priority: 0.5, 121 | trailingSlash: false, 122 | }, 123 | }, 124 | ], 125 | ], 126 | plugins: [require.resolve('./src/plugins/webpack-configure/index.ts')], 127 | }; 128 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web-analytics-handbook", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "docusaurus": "docusaurus", 7 | "start": "docusaurus start", 8 | "build": "docusaurus build", 9 | "swizzle": "docusaurus swizzle", 10 | "deploy": "docusaurus deploy", 11 | "clear": "docusaurus clear", 12 | "serve": "docusaurus serve", 13 | "write-translations": "docusaurus write-translations", 14 | "write-heading-ids": "docusaurus write-heading-ids", 15 | "lint": "eslint './**/*.+(js|ts)?(x)'", 16 | "format": "prettier --check . --ignore-path ./.prettierignore", 17 | "format-fix": "prettier --write . --ignore-path ./.prettierignore" 18 | }, 19 | "dependencies": { 20 | "@docusaurus/core": "2.0.0-beta.4", 21 | "@docusaurus/plugin-content-docs": "^2.0.0-beta.6", 22 | "@docusaurus/preset-classic": "2.0.0-beta.4", 23 | "@emotion/react": "^11.4.1", 24 | "@emotion/styled": "^11.3.0", 25 | "@mdx-js/react": "^1.6.21", 26 | "@svgr/webpack": "^5.5.0", 27 | "clsx": "^1.1.1", 28 | "facepaint": "^1.2.1", 29 | "file-loader": "^6.2.0", 30 | "prism-react-renderer": "^1.2.1", 31 | "react": "^17.0.1", 32 | "react-dom": "^17.0.1", 33 | "react-icons": "^4.2.0", 34 | "url-loader": "^4.1.1" 35 | }, 36 | "browserslist": { 37 | "production": [ 38 | ">0.5%", 39 | "not dead", 40 | "not op_mini all" 41 | ], 42 | "development": [ 43 | "last 1 chrome version", 44 | "last 1 firefox version", 45 | "last 1 safari version" 46 | ] 47 | }, 48 | "devDependencies": { 49 | "@docusaurus/module-type-aliases": "^2.0.0-beta.4", 50 | "@emotion/babel-plugin": "^11.3.0", 51 | "@tsconfig/docusaurus": "^1.0.3", 52 | "@types/facepaint": "^1.2.2", 53 | "@types/node": "^16.6.1", 54 | "@types/react": "^17.0.16", 55 | "@types/react-helmet": "^6.1.2", 56 | "@types/react-router-dom": "^5.1.8", 57 | "@typescript-eslint/eslint-plugin": "^4.29.1", 58 | "@typescript-eslint/parser": "^4.29.1", 59 | "babel-plugin-module-resolver": "^4.1.0", 60 | "dotenv-webpack": "^7.0.3", 61 | "eslint": "^7.32.0", 62 | "eslint-config-prettier": "^8.3.0", 63 | "eslint-plugin-import": "^2.24.0", 64 | "eslint-plugin-jest": "^24.4.0", 65 | "eslint-plugin-jsx-a11y": "^6.4.1", 66 | "eslint-plugin-prettier": "^3.4.0", 67 | "eslint-plugin-react": "^7.24.0", 68 | "eslint-plugin-react-hooks": "^4.2.0", 69 | "eslint-plugin-testing-library": "^4.10.1", 70 | "prettier": "^2.3.2", 71 | "typescript": "^4.3.5" 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /sidebars.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Creating a sidebar enables you to: 3 | - create an ordered group of docs 4 | - render a sidebar for each doc of that group 5 | - provide next/previous navigation 6 | 7 | The sidebars can be generated from the filesystem, or explicitly defined here. 8 | 9 | Create as many sidebars as you want. 10 | */ 11 | 12 | module.exports = { 13 | // By default, Docusaurus generates a sidebar from the docs folder structure 14 | // tutorialSidebar: [{ type: "autogenerated", dirName: "." }], 15 | handbookSidebar: [{ type: "autogenerated", dirName: "handbook" }], 16 | rapSidebar: [{ type: "autogenerated", dirName: "react-analytics-provider" }], 17 | 18 | // But you can create a sidebar manually 19 | /* 20 | tutorialSidebar: [ 21 | { 22 | type: 'category', 23 | label: 'Tutorial', 24 | items: ['hello'], 25 | }, 26 | ], 27 | */ 28 | }; 29 | -------------------------------------------------------------------------------- /src/components/ChatBox/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useMemo } from 'react'; 2 | import RabbitHappy from '@site/static/img/characters/rabbit/rabbit-happy.png'; 3 | import RaccoonDizzy from '@site/static/img/characters/raccoon/raccoon-dizzy.png'; 4 | import styled from '@emotion/styled'; 5 | 6 | type Avatar = 'rabbit-happy' | 'raccoon-dizzy'; 7 | 8 | const ChatBox = ({ 9 | avatar, 10 | children, 11 | }: { 12 | avatar: Avatar; 13 | children: React.ReactNode; 14 | }) => { 15 | const imgSrc = useMemo(() => { 16 | switch (avatar) { 17 | case 'rabbit-happy': 18 | return RabbitHappy; 19 | case 'raccoon-dizzy': 20 | return RaccoonDizzy; 21 | default: 22 | return ''; // TODO: 기본 아바타 이미지 23 | } 24 | }, [avatar]); 25 | return ( 26 | 27 | avatar 28 | "{children}" 29 | 30 | ); 31 | }; 32 | 33 | const ChatContainer = styled.div` 34 | display: flex; 35 | background: #efeeeebf; 36 | padding: 0.7em; 37 | border-radius: 6px; 38 | align-items: center; 39 | box-shadow: 1px 1px 6px -1px #b6b6b6; 40 | margin-bottom: 1em; 41 | 42 | > img { 43 | height: 2.5em; 44 | margin-right: 1em; 45 | } 46 | `; 47 | 48 | export default ChatBox; 49 | -------------------------------------------------------------------------------- /src/components/HomepageFeatures.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { css } from '@emotion/react'; 3 | import styled from '@emotion/styled'; 4 | import mq from 'theme/mq'; 5 | 6 | const FeatureList = [ 7 | { 8 | title: 'DAU, GA... 먹는건가요?', 9 | Svg: require('../../static/img/undraw_docusaurus_mountain.svg').default, 10 | description: ( 11 | <> 12 | 사용자 데이터 분석(Daily Active User, 전환율 측정 등)은 모던 웹 13 | 프로젝트에서 필수적인 부분이지만, 어디서부터 시작해야 할지 막막해하는 14 | 개발자들이 많습니다. 이 핸드북을 통해 기초적인 분석에 대한 개념을 15 | 잡습니다. 16 | 17 | ), 18 | }, 19 | { 20 | title: '개발자에게 필요한 웹 분석 지식', 21 | Svg: require('../../static/img/undraw_docusaurus_tree.svg').default, 22 | description: ( 23 | <> 24 | 여러분의 프로젝트에 웹 분석 툴을 연동하기 위해선 어떤 코드가 필요할까요? 25 | 26 | ), 27 | }, 28 | { 29 | title: 'GA와 Amplitude를 한번에', 30 | Svg: require('../../static/img/undraw_docusaurus_react.svg').default, 31 | description: ( 32 | <> 33 | react-analytics-provider 오픈소스를 통해 Google Analytics, Amplitude와 34 | 같은 분석 툴 도입의 진입 장벽을 낮출 수 있습니다. 35 | 36 | ), 37 | }, 38 | ]; 39 | 40 | function Feature({ Svg, title, description }) { 41 | return ( 42 | 43 | 44 | 45 | 46 | 47 | {title} 48 | {description} 49 | 50 | 51 | ); 52 | } 53 | 54 | export default function HomepageFeatures() { 55 | return ( 56 |
57 |
58 |
59 | {FeatureList.map((props, idx) => ( 60 | 61 | ))} 62 |
63 |
64 |
65 | ); 66 | } 67 | 68 | const FeatureIconWrapper = styled.div` 69 | text-align: center; 70 | `; 71 | 72 | const FeatureInfo = styled.div` 73 | text-align: center; 74 | padding-left: 1rem; 75 | padding-right: 1rem; 76 | `; 77 | 78 | const featureIconStyle = css` 79 | height: 200px; 80 | width: 200px; 81 | `; 82 | 83 | const FeatureTitle = styled.h3``; 84 | const FeatureDescription = styled.p``; 85 | const FeatureContainer = styled.div` 86 | ${mq()({ 87 | flex: ['0 0 100%', '0 0 calc(4/12 * 100%)'], 88 | maxWidth: ['100%', 'calc(4/12 * 100%)'], 89 | })} 90 | `; 91 | 92 | const featuresStyle = css` 93 | display: flex; 94 | align-items: center; 95 | padding: 2rem 0; 96 | width: 100%; 97 | `; 98 | -------------------------------------------------------------------------------- /src/components/WikiSearch/LetterButtonList.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from '@emotion/styled'; 3 | 4 | export default function LetterButtonList({ 5 | letters, 6 | onClick, 7 | }: { 8 | letters: string[]; 9 | onClick: (value: string) => void; 10 | }) { 11 | return ( 12 |
    13 | {letters.map(letter => ( 14 |
  • 15 | 22 |
    • 23 | ))} 24 |
25 | ); 26 | } 27 | 28 | const Ul = styled.ul` 29 | padding: 0; 30 | margin-bottom: 7px; 31 | `; 32 | 33 | const Li = styled.li` 34 | display: inline-block; 35 | list-style: none; 36 | `; 37 | 38 | const Button = styled.button` 39 | display: flex; 40 | justify-content: center; 41 | align-items: center; 42 | width: 26px; 43 | height: 26px; 44 | margin: 3px; 45 | border: 1px solid var(--ifm-color-gray-300); 46 | border-radius: 4px; 47 | background-color: #ffffff; 48 | color: #000000; 49 | cursor: pointer; 50 | 51 | &:hover { 52 | background-color: var(--ifm-color-gray-200); 53 | } 54 | 55 | &:focus { 56 | color: #ffffff; 57 | background-color: var(--ifm-color-primary); 58 | border-color: var(--ifm-color-primary); 59 | } 60 | `; 61 | -------------------------------------------------------------------------------- /src/components/WikiSearch/LetterFilter.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import LetterButtonList from './LetterButtonList'; 3 | import { EN_LETTERS, KO_LETTERS } from '../../../static/searchLetter'; 4 | 5 | export default function SearchFilter({ 6 | onLetterClick, 7 | }: { 8 | value: string; 9 | onLetterClick: (value: string) => void; 10 | }) { 11 | return ( 12 | <> 13 | 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /src/components/WikiSearch/SearchInput.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from '@emotion/styled'; 3 | import { FiSearch } from 'react-icons/all'; 4 | 5 | export default function SearchInput({ 6 | value, 7 | onValueChange, 8 | }: { 9 | value: string; 10 | onValueChange: (value: string) => void; 11 | }) { 12 | const onKeywordChange = event => { 13 | onValueChange(event.target.value); 14 | }; 15 | return ( 16 | 17 | 23 | 24 | 25 | ); 26 | } 27 | 28 | const InputWrapper = styled.div` 29 | position: relative; 30 | margin-top: 12px; 31 | width: 100%; 32 | max-width: 600px; 33 | `; 34 | 35 | const Input = styled.input` 36 | max-width: 600px; 37 | width: 100%; 38 | height: 56px; 39 | padding-left: 56px; 40 | padding-right: 28px; 41 | font-size: 1.2rem; 42 | border: 2px solid var(--ifm-color-primary); 43 | border-radius: 28px; 44 | outline: none; 45 | 46 | &::placeholder { 47 | color: var(--ifm-color-gray-500); 48 | } 49 | `; 50 | 51 | const SearchIcon = styled(FiSearch)` 52 | position: absolute; 53 | top: 50%; 54 | left: 18px; 55 | transform: translateY(-50%); 56 | font-size: 2rem; 57 | color: var(--ifm-color-primary); 58 | `; 59 | -------------------------------------------------------------------------------- /src/components/WikiSearch/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from '@emotion/styled'; 3 | import LetterFilter from './LetterFilter'; 4 | import SearchInput from './SearchInput'; 5 | 6 | export default function WikiSearch({ 7 | value, 8 | onValueChange, 9 | }: { 10 | value: string; 11 | onValueChange: (value: string) => void; 12 | }) { 13 | return ( 14 | 15 | 16 | 17 | 18 | ); 19 | } 20 | 21 | const SearchWrapper = styled.div` 22 | display: flex; 23 | flex-direction: column; 24 | flex-wrap: wrap; 25 | justify-content: center; 26 | align-items: center; 27 | margin: 1rem 0 2rem; 28 | padding: 1.5rem 1rem; 29 | border-radius: 8px; 30 | background-color: #fafafa; 31 | `; 32 | -------------------------------------------------------------------------------- /src/components/WikiTable/WikiTable.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | 3 | import WikiTableRow from './WikiTableRow'; 4 | 5 | import usePagination from '../../hooks/usePagination'; 6 | 7 | export default function WikiTable({ words = [] }: { words: string[] }) { 8 | const { onPrevious, onNext, currentPage, result, isLastPage, isFirstPage } = 9 | usePagination({ 10 | source: words, 11 | offset: 2, 12 | }); 13 | 14 | return ( 15 | <> 16 | {currentPage} 17 | 20 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | {result.map(word => ( 32 | 33 | ))} 34 | 35 |
용어뜻
36 | 37 | ); 38 | } 39 | -------------------------------------------------------------------------------- /src/components/WikiTable/WikiTableRow.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { WikiWord } from '../../types'; 4 | 5 | export default function WikiTableRow({ name, description }: WikiWord) { 6 | return ( 7 | 8 | {name} 9 | {description} 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /src/components/WikiTable/index.ts: -------------------------------------------------------------------------------- 1 | import WikiTable from './WikiTable'; 2 | 3 | export default WikiTable; 4 | -------------------------------------------------------------------------------- /src/css/custom.css: -------------------------------------------------------------------------------- 1 | /* stylelint-disable docusaurus/copyright-header */ 2 | /** 3 | * Any CSS included here will be global. The classic template 4 | * bundles Infima by default. Infima is a CSS framework designed to 5 | * work well for content-centric websites. 6 | */ 7 | 8 | /* You can override the default Infima variables here. */ 9 | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap'); 10 | 11 | :root { 12 | --ifm-color-primary: #51bbdd; 13 | --ifm-color-primary-dark: rgb(33, 175, 144); 14 | --ifm-color-primary-darker: rgb(31, 165, 136); 15 | --ifm-color-primary-darkest: rgb(26, 136, 112); 16 | --ifm-color-primary-light: rgb(70, 203, 174); 17 | --ifm-color-primary-lighter: rgb(102, 212, 189); 18 | --ifm-color-primary-lightest: rgb(146, 224, 208); 19 | --ifm-code-font-size: 95%; 20 | --ifm-font-family-base: 'Noto Sans KR', sans-serif; 21 | } 22 | 23 | .docusaurus-highlight-code-line { 24 | background-color: rgba(0, 0, 0, 0.1); 25 | display: block; 26 | margin: 0 calc(-1 * var(--ifm-pre-padding)); 27 | padding: 0 var(--ifm-pre-padding); 28 | } 29 | 30 | html[data-theme='dark'] .docusaurus-highlight-code-line { 31 | background-color: rgba(0, 0, 0, 0.3); 32 | } 33 | 34 | table { 35 | display: table; 36 | } 37 | -------------------------------------------------------------------------------- /src/hooks/usePagination.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | 3 | const usePagination = ({ source = [], initialPage = 1, offset = 10 }) => { 4 | const getResult = () => { 5 | const startIdx = (currentPage - 1) * offset; 6 | const endIdx = startIdx + offset; 7 | return source.slice(startIdx, endIdx); 8 | }; 9 | 10 | const getMaxPage = () => { 11 | return Math.max(Math.ceil(source.length / offset), 1); 12 | }; 13 | 14 | const minPage = 1; 15 | const [currentPage, setCurrentPage] = useState(initialPage); 16 | 17 | useEffect(() => { 18 | if (currentPage !== 1) setCurrentPage(1); 19 | else getResult(); 20 | }, [source]); 21 | 22 | const onPrevious = () => { 23 | if (currentPage <= minPage) return; 24 | setCurrentPage(currentPage - 1); 25 | }; 26 | 27 | const onNext = () => { 28 | if (currentPage >= getMaxPage()) return; 29 | setCurrentPage(currentPage + 1); 30 | }; 31 | 32 | return { 33 | result: getResult(), 34 | currentPage, 35 | isLastPage: currentPage === getMaxPage(), 36 | isFirstPage: currentPage === minPage, 37 | onPrevious, 38 | onNext, 39 | }; 40 | }; 41 | 42 | export default usePagination; 43 | -------------------------------------------------------------------------------- /src/hooks/useSearch.ts: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { WikiWord } from '../types'; 3 | import KOREAN_CONSONANTS from '../../static/korean-consonants'; 4 | 5 | const UNICODE_FIRST_FOREAN = 44032; 6 | const NUMBER_OF_KOREAN_LETTERS = 11172; 7 | const NUMBER_OF_KOREAN_NUCLEUS = 21; 8 | const NUMBER_OF_KOREAN_CODA = 28; 9 | 10 | const ALPHABET_REGEX = new RegExp(/^[A-Za-z]$/); 11 | const KOREAN_CONSONANTS_REGEX = new RegExp(/^[ㄱ-ㅎ]$/); 12 | 13 | const isLetterFilterValue = (value: string): boolean => { 14 | return ALPHABET_REGEX.test(value) || KOREAN_CONSONANTS_REGEX.test(value); 15 | }; 16 | const getLetterLanguage = (value: string): 'KOREAN' | 'ENGLISH' | null => { 17 | if (KOREAN_CONSONANTS_REGEX.test(value)) { 18 | return 'KOREAN'; 19 | } else if (ALPHABET_REGEX.test(value)) { 20 | return 'ENGLISH'; 21 | } 22 | return null; 23 | }; 24 | 25 | const useSearch = (source: WikiWord[]) => { 26 | const [result, setResult] = useState(source); 27 | const onSearch = (keyword: string) => { 28 | keyword = keyword.trim(); 29 | if (isLetterFilterValue(keyword)) { 30 | onFilter({ value: keyword, language: getLetterLanguage(keyword) }); 31 | } else { 32 | setResult(source.filter(item => item.name.includes(keyword))); 33 | } 34 | }; 35 | 36 | const onFilter = ({ 37 | value, 38 | language, 39 | }: { 40 | value: string; 41 | language: string; 42 | }) => { 43 | switch (language) { 44 | case 'KOREAN': 45 | setResult( 46 | source.filter(item => { 47 | const code = item.name.trim().charCodeAt(0) - UNICODE_FIRST_FOREAN; 48 | if (code <= -1 && code >= NUMBER_OF_KOREAN_LETTERS) { 49 | return false; 50 | } 51 | return ( 52 | KOREAN_CONSONANTS[ 53 | Math.floor( 54 | code / (NUMBER_OF_KOREAN_NUCLEUS * NUMBER_OF_KOREAN_CODA), 55 | ) 56 | ] === value 57 | ); 58 | }), 59 | ); 60 | break; 61 | case 'ENGLISH': 62 | value = value.toUpperCase(); 63 | setResult( 64 | source.filter( 65 | item => 66 | item.name 67 | .match(/\((.*?)\)/g)[0] 68 | .replace(/[()]/gi, '') 69 | .trim() 70 | .toUpperCase() 71 | .charAt(0) === value, 72 | ), 73 | ); 74 | break; 75 | default: 76 | setResult([]); 77 | } 78 | }; 79 | return { 80 | result, 81 | onSearch, 82 | onFilter, 83 | }; 84 | }; 85 | 86 | export default useSearch; 87 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import Layout from '@theme/Layout'; 4 | import Link from '@docusaurus/Link'; 5 | import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; 6 | import styles from './index.module.css'; 7 | import HomepageFeatures from 'components/HomepageFeatures'; 8 | import Footer from 'theme/Footer'; 9 | 10 | function HomepageHeader() { 11 | const { siteConfig } = useDocusaurusContext(); 12 | return ( 13 |
14 |
15 |

{siteConfig.title}

16 |

{siteConfig.tagline}

17 |
웹 분석이 궁금하다면
18 |
19 | { 23 | gtag('event', '핸드북 읽기 클릭', { 24 | event_category: '메인페이지', 25 | event_label: '라벨', 26 | }); 27 | }} 28 | > 29 | 핸드북 읽기 30 | 31 |
32 |
코드에 적용하려면
33 |
34 | { 38 | gtag('event', 'react-analytics-provider 클릭', { 39 | event_category: '메인페이지', 40 | event_label: '라벨', 41 | }); 42 | }} 43 | > 44 | react-analytics-provider 45 | 46 |
47 |
48 |
49 | ); 50 | } 51 | 52 | export default function Home() { 53 | const { siteConfig } = useDocusaurusContext(); 54 | return ( 55 | 60 | 61 |
62 | 63 |
64 |