프로젝트4 - div 섹션 구역 분리 와 CSS 스타일 적용하기

이미지
웹 브라우저에 표시되는 글자와 이미지 들에 디자인 적인 효과( 배경색, 글자색, 크기 조절...) 및 브라우저 내에서의 배치등을 조절하기 위해서는 구역을 나누면 편리해진다. 바로 구역(섹션) 을 나누어 주는 역할을 하는 태그가 div 이다. <div>태그는 브라우저에서 보여지는 시각적 기능은 없다. 단지, 구역을 나누는 역할을 한다.  코드를 만들어 본다. <!DOCTYPE html> <html> <head>   <title>div</title> </head> <body>   <div>     <p>Ice cream is a frozen dessert typically made from milk or cream that has been flavoured with a sweetener,        either sugar or an alternative, and a spice,        such as cocoa or vanilla, or with fruit, such as strawberries or peaches.</p>   </div>   <div>     <p> Food colouring is sometimes added in addition to stabilizers.        mixture is cooled below the freezing point of water and stirred to incorporate air spaces and prevent detectable ice crystals from forming.        It can also be made by whisking a flavoured cream base and liquid nitrogen together.        The result is a smooth, semi-solid foam that is solid at v

구글 블로그 에 구글애널리틱스 연동하는 방법

 구글 애널리틱스 를 블로거에 연동하는 방법 입니다.

1. 구글에서 "구글애널리틱스" 로 검색을 합니다.

구글 블로거에 구글애널리틱스 연동하는 방법

제일 상단에 구글 애널리틱스 가 검색이 됩니다.
해당 URL로 접속합니다.

구글 블로거에 구글애널리틱스 연동하는 방법2


접속 페이지 오른쪽 상단의 제품전환 아이콘을 선택합니다.
예전에는 구글 애널리틱스 가 독립된 제품으로 존재하였는데, 현재는 #태그관리자 라는 통합 페이지 내의 제품으로 들어가 있습니다. 
팝업메뉴에서 애널리틱스가 보입니다. 선택 합니다.

구글 블로거에 구글애널리틱스 연동하는 방법3


2. 애널리틱스 에서 왼쪽 하단 톱니바퀴 설정 아이콘에 진입 합니다.

구글 블로거에 구글애널리틱스 연동하는 방법4

참고로, 구글 애널리틱스 의 URL 은 하기와 같습니다.
바로가기 로 저장 후 다음부터는 바로 접속하면 편리하겠죠?

3. 계정만들기 선택 합니다.

구글 블로거에 구글애널리틱스 연동하는 방법5


여기서 부터 본격적으로 구글블로그 정보를 입력하게 됩니다.

4. 계정 이름(필수)  

계정 이름(필수) 에는 구글블로거 라고 표기를 했습니다.
티스토리 와 기타 다른 웹사이트는 그 특성에 맞게 이름을 정해주면 좋겠습니다.
구글 블로거에 구글애널리틱스 연동하는 방법6

5. 속성만들기

속성이름(필수) 필드에는 구글 블로거의 이름을 적어줍니다.

구글 블로거에 구글애널리틱스 연동하는 방법7

6. 비지니스 세부정보

1인 블로거의 경우 1~10명을 선택하면 되겠습니다.
구글 블로거에 구글애널리틱스 연동하는 방법8

7. 비지니스 목표 선택

- 구글애널리틱스를 통해서 어떤 정보를 얻기를 원하냐는 질문 입니다. 
  원하는 항목을 선택하면 되겠네요.
구글 블로거에 구글애널리틱스 연동하는 방법9

9. 서비스약관 계약

   체크박스를 체크 후 동의함 선택 합니다.

구글 블로거에 구글애널리틱스 연동하는 방법10

10. 데이터 수집 시작하기

블로그는 웹사이트 니까 웹을 선택합니다.
안드로이드 나 아이폰 등의 앱을 개발했다면 이 항목을 선택하면 되겠네요.

구글 블로거에 구글애널리틱스 연동하는 방법11

11. 데이터 스트링 설정

   여러분의 블로그 주소 와 블로거 이름을 입력합니다. 사실 이름은 꼭 블로거 이름일 필요는 없지만 손 쉬운 구별을 위해서 블로거 이름으로 해주면 좋겠죠?

구글 블로거에 구글애널리틱스 연동하는 방법12

12. 웹 스트링 세부정보.

구글 애널리틱스에서의 설정은 모두 마무리가 되었습니다.
스트림 ID 라는 것과 측정ID 라는 여러분의 블로거 통계를 위한 고유한 ID가 생겼습니다.
이녀석들이 세부적으로 어떤 일을 하는지는 현재 우리에게는 크게 중요치 않습니다.
다만, 측정 ID는 옆 복사하기 아이콘을 사용해서 복사 해둡니다.
그 이유는, 구글 블로거에 해당 측정ID를 입력하기 위해서 입니다.

구글 블로거에 구글애널리틱스 연동하는 방법13


13. 구글 블로그 에서 측정 ID 입력하기
블로거 설정 > Google 애널리틱스 측정 ID 메뉴를 선택합니다
구글 블로거에 구글애널리틱스 연동하는 방법14
구글 애널리틱스에 복사한 측정ID를 붙여넣기 합니다.

구글 블로거에 구글애널리틱스 연동하는 방법15

측정ID를 구글 블로거에 입력하는 것 만으로도 연동이 완료 되었습니다.
수동방법으로는 코드를 블로거의 head 사이에 직접 입력하는 방법도 있지만 위 처럼 자동방식을 사용해도 동일 합니다.
모든 과정이 완료 되었고, 데이터 수집 대기까지는 최대 48시간의 시간이 소요된다고 합니다.

구글 애널리틱스에 접속하면 
하기처럼, 구글 블로거 가 등록된 모습을 볼 수 있네요.

구글 블로거에 구글애널리틱스 연동하는 방법16

구글 블로거에 구글애널리틱스 연동하는 방법17



구글 도움말 에서도 자동 설정을 안내하고 있습니다.

구글 블로거에 구글애널리틱스 연동하는 방법18

구글 애널리틱스 와 구글 블로거 연결을 진행 해보았습니다.
도움이 되시길 바랍니다. 감사합니다.

댓글

이 블로그의 인기 게시물

구글 블로그 이미지 복사 붙여넣기 가능한가요?

HTML 페이지 기본 구성.(HTML Page Structure)

구글 블로그 대표이미지 설정하기