(오프라인 강의 내용 일부를 참고하여 작성한 글입니다.)

출처: https://bit.ly/3GTJBIO - 그로잉피플

최근에 많은 회사에서 노션으로 웹사이트를 제작 및 운영하고 있습니다. 노션을 사용할 줄 안다면 개발을 몰라도, 개발자가 없어도 누구나 쉽게 웹사이트를 만들 수 있으며, 여기에 GA를 연결한다면 내 페이지에 몇명이 왔는지, 페이지의 어떤 버튼을 클릭했는지, 어디서 이탈했는지에 대한 정보까지 수집 및 분석이 가능합니다.

1) 노션에 입력하기

 노션에 웹사이트에 표시될 내용을 입력합니다. 코딩으로 치면, html코드를 넣는것과 같은 방법입니다. 여기에 넣은 텍스트와 이미지들이 웹사이트에 그대로 나오게 됩니다.

 노션을 얼마나 잘 사용하는가?, 디자인 실력이 얼마나 뛰어난가?에 따라서 웹사이트의 퀄리티가 달라지지만, 연습을 통해 커버 가능한 부분이니 걱정할 필요는 없습니다.

예를들어, 아래 이미지와 같이 텍스트 및 스타일과 배치를 하면…

다음과 같이 웹사이트에서 보이게 됩니다.

2) 노션 → 우피 연결하기

우피라는 사이트에 접속하여 노션을 웹사이트화 합니다. 우피에 접속하여, 우피에게 노션 페이지 링크 전달을 통해 웹사이트화가 가능합니다.

 웹사이트로 만들고 싶은 노션 페이지에 접속한 후, 우측 상단의 공유를 클릭합니다. 웹에서 공유를 활성화한 후, 복사 버튼을 클릭하면 페이지 링크가 복사됩니다.

우피로 연결을 시키면 아래와 같은 화면이 나타납니다. 오른쪽 버튼을 통해 추가적으로 스타일 변경이 가능합니다.

3) 웹사이트 → GA 연결

GA에서 좌측 하단의 설정 아이콘을 클릭하면, 관리 페이지로 이동할 수 있습니다. 가운데 속성 영역에서 데이터 스트림을 클릭합니다.

웹사이트 URL 입력란에 GA와 연결하고자 한 랜딩 페이지 즉, 우피로 생성한 웹사이트의 “도메인”을 입력합니다.

이제 생성된 스트림의 세부 정보를 확인합니다. 여기에 측정 ID 옆의 복사 아이콘을 클릭하면, ID 값이 복사됩니다. 복사한 측정 ID를 활용해 랜딩 페이지와 GA를 연결할 수 있습니다.

다시 우피 콘솔창에 접속합니다. 우피는 자체 플러그인 기능을 통해 쉽게 GA를 연결할 수 있게 합니다. 플러그인 창 탭을 클릭하면, 플러그인 설정 창이 나옵니다. 여기서 Google Analytics 입력란에 방금 복사한 “측정 ID”를 붙여 넣고, 저장합니다.

노션을 통한 사이트 제작부터, GA 연결까지의 과정을 통해, 기본적인 웹사이트 제작 방법 및 GA연결 방법을 알아보았습니다. 노션을 더 잘사용한다면, 더 복잡하고 멋진 웹사이트 제작이 가능하고, GA를 잘 다룬다면 몇명의 어떤 유저가 페이지에서 어떤 행동을 하는지 모든 분석이 가능합니다.