코딩 맛집

요즘에는 사용자들도 개인마다 선호하는 UI/UX 다르고, 익숙한 UI/UX 마다 전환율도 다릅니다. 이럴 때, 원하는 타기팅에게는 다른 디자인의 페이지를 보여주고, 또 다른 타기팅에게는 다른 페이지를 설정할 수 있는 것이 구글 옵티마이즈의 [맞춤 설정] 환경입니다. 또는 A/B테스트를 진행했는데, 구글 애널리틱스의 특정 관심사를 가지고 있는 타기팅이나 세그먼트마다 선호하는 페이지가 다를 때, 사용할 수 있는 것이 [맞춤 설정]입니다. 1. 맞춤 설정 활용하기 [환경] -> [맞춤 설정] 환경이 있습니다. '맞춤 설정'은 특정 '사용자 타기팅', '페이지 타겟팅' 마다 UI/UX를 다르게 노출시켜줄수 있습니다. '맞춤설정'은 테스트가 아니므로, 대안 페이지, 목표를 설정하지 않고, '페이지 타겟팅', '사..

구글 옵티마이즈에서 리디렉션 테스트는 원본 페이지에 도착했을 때, 설정한 대안 페이지 또는 설정한 규칙에 맞는 페이지로 타겟팅 사용자에게 노출시켜 주는 테스트입니다. 따라서, 원본 페이지, 대안 페이지에 따라서 어떻게 목표 값이 달라지는 측정 하여, 더 높은 목표 값에 해당하는 페이지로 업데이트하는 것을 목적으로 합니다. 개발자 없이 A/B 테스트, 다변수 테스트 하는 방법은 링크를 클릭해 주세요. 1. 리디렉션 테스트 환경 만들기 [환경 만들기] -> [리디렉션 테스트]를 선택하고, 원본 URL을 입력해 주세요. 2. 대안 페이지 추가 [대안 추가] 버튼을 클릭하고, 대안 페이지들을 추가해 줍니다. 3. 고급 리디렉션 설정 [단일 페이지로 리디렉션]처럼 URL 값만 넣어주어도 되지만, [고급 리디렉션]..

그렇다면, A/B 테스트가 아닌, 변수(대안)가 많은 경우에는 어떻게 테스트를 하여, 전환율을 높일 수 있을까? 구글 옵티마이즈에서 제공하는 다변수 테스트를 통해서 최적의 페이지를 만들수 있습니다. 이번 포스팅에서는 사용자 지리 또는 사용자 행동 타기팅 별 다변수 테스트를 하는 방법에 대해서 포스팅하겠습니다. 1. 다변수 테스트 환경 만들기 구글 옵티마이즈에 접속해서, [환경] -> [환경 만들기] -> 이름 입력 -> [다변수 테스트] 선택해 주세요. 2. 섹션별 대안 페이지 설정 [대안] -> [섹션] 영역에 섹션을 설정할 수 있습니다. 여기에서 섹션은? 우리의 웹페이지에서 HTML의 태그와 같은 단위라고 생각하시면 되겠습니다. HTML을 잘모르겠다면, 하나의 웹페이지 안에서 '문단' 정도에 해당하는..

홈페이지나 랜딩페이지 블로그, 티스토리를 운영하다 보면, 개발자 없이 A/B 테스트를 하고 싶은 경우가 많습니다. 개발자 없이, 마우스 클릭/이동만 으로 대안페이지를 만들고 전환 목표를 세울수 있는 툴, 구글 옵티마이즈를 이용하면 가능 합니다. 이번에는 구글 옵티마이즈를 이용해서 A/B 테스트를 해보도록 하겠습니다. 그 전에, 구글 옵티마이즈를 우리의 홈페이지에 설치를 해야 하는데요. 설치 하는 방법은 이 글을 참고해 주세요. 1. 구글 옵티마이즈 환경 만들기 구글 옵티마이즈를 설치까지 하였다면, [환경] 이라는 탭에 [시작하기] 버튼이 보일 것 입니다. 클릭해 주세요. 2. A/B 테스트 만들기 A/B 테스트 이름, A/B 테스트를 진행할 내 사이트의 URL 주소, 테스트 종류를 선택해 주세요. 3. ..

A/B 테스트, 다변수 테스트, 리다이렉션 테스트를 통해 나의 웹사이트, 우리 회사의 웹이트를 최적의 전환율을 만들어 내고 싶은분들 많으시죠? 구글 애널리틱스 분석을 했지만, A안 또는 B안의 UI 중에서 어떤 UI가 더 전환율이 좋은지 고민이 되실 때 사용 하실수 있는 것이 구글 옵티마이즈(Google Optimize) 입니다. 구글 옵티마이즈를 설치하는 방법을 포스팅 하겠습니다. 1. 구글 옵티마이즈(Google Optimize) 구글 옵티마이즈는 개발자 도움 없이도 웹 페이지를 변형, 실험하여 최적의 UI/UX를 찾을수 있는 도구 입니다. 웹 페이지의 레이아웃, 배너 위치, 폰트, 색상을 쉽게 변경 할수 있습니다. 구글 옵티마이저는 GA(구글 애널리틱스)와 반드시 연결을 시켜야 합니다. 그래야 구글..

막상 A/B 테스트를 진행하기 위해서는 무엇을 어떻게 진행해야 하는지 막막할 경우가 많습니다. 구글 옵티마이즈는 A/B 테스트, 다변수 테스트를 진행 할수 있는 툴 입니다. 그런데 무작정 툴을 먼저 찾기 보다는 구글 애널리틱스를 통한 데이터 분석으로 현재 문제를 제기 하고, 가설을 설정하고, 대안 설정 등등 이를 먼저 기획안으로 적어보고 실행하면, 좀 더 문제를 구체화 시킬수 있고, 나중에 찾아볼때 어떤식으로 진행을 했는지 알아볼수 있겠죠? A/B 테스트 먼저, 구글 애널리틱스와 같은 툴로 현재 문제(A안)를 파악해야 합니다. 지금 문제를 찾았다면, 명확한 가설을 세웁니다. 가설을 해결 할수 있는 대안(B안)을 설정하고, 테스트를 진행합니다. 테스트 진행 후, 더 좋은 결과를 가져온 대안으로 런칭을 합니..

구글 태그 매니저를 좀 더 효과적으로 다수의 사용자들과 함께 사용 할수 있는 방법을 설명 하려고 합니다. 여럿이서 같이 태그관리자를 운영하다보면 태그와 변수등이 꼬이고 헷갈리는 경우가 많습니다. 이럴 경우 이번 포스팅을 잘 봐주세요. 1. 워크스페이스 필요성 'Default Workspace' 라는 공간이 있습니다. 이 워크스페이스라는 건, 혼자 사용할 경우에는 사실 필요가 없는 기능 입니다. 하지만 여럿이서 구글 태그 매니저를 같이 운영하다보면, 서로의 태그와 변수들이 꼬이고, 내가 만든 태그로 인해 상대방에게 영향을 미치기 때문에 작업 영역을 분리하기 위한 용도로 워크스페이스를 분리 하여 사용하는 것 입니다. 2. 폴더 '폴더' 부분을 클릭해서 들어가 보시면, 기존에 작업했던 태그, 트리거, 변수들 ..

만약, 우리가 운영하는 랜딩 페이지나 홈페이지에 유튜브와 같은 동영상이 있다면, 사용자들이 이 영상을 어디까지 시청하고, 혹은 끝까지 시청했는지 분석하고 싶을 것 입니다. 이를 구글 태그 매니저에서 분석 할수 있는 방법이 있습니다. 기존에 만들어 봤던 태그들을 만들어서 데이터를 전송할수 있는데요. 오늘은 유튜브 동영상 시청 데이터를 구글 유니버셜 애널리틱스로 보내는 방법을 포스팅 하려고 합니다. 1. 비디오 분석 변수 만들기 구글 태그 매니저 홈페이지에 들어가서, 왼쪽에 [변수] -> [구성] 을 선택해서 기본 변수들을 추가해 줄수 있습니다. 아래 그림과 같이 기본 비디오 변수들을 모두 추가해 주세요. 2. 유튜브 비디오 트리거 추가 그리고 트리거를 아래 그림과 같이 만들어주세요. 시작, 완료 상태는 위..

우리가 사용 하는 랜딩페이지 또는 홈페이지에서 중요하게 봐야될 데이터 중에 하나가 스크롤 데이터 라고도 볼수 있습니다. 사용자가 그 페이지에서 어디까지 읽고 이탈을 했는지? 또는 어느 부분에서 흥미가 떨어졌는지? 내가 의도한 부분까지 스크롤을 넘겼는지? 를 파악할때 아주 중요한 지표 이죠. 그러면 구글 태그 매니저에서 스크롤 데이터를 구글 유니버셜 애널리틱스로 전송 하는 방법에 대해서 포스팅 해보겠습니다. 1. 새 태그 생성 구글 태그 매너지에서 새 태그를 생성 합니다. 저는 아래와 같이 Scroll Depth' 라는 제목으로 태그를 만들었습니다. [추적 유형] 은 [이벤트] 카테고리는 마음대로 적으시면 됩니다. [작업] 부분은 [Page URL] 을 기준으로 스크롤 깊이 값을 파악할 것 이므로, '{{..

구글 태그 매니저를 이용해서 HTML의 특정 클래스(class)를 클릭하였을 때, 구글 애널리틱스(GA)로 데이터를 전송하고 싶을 때가 있습니다. 이럴 경우, 구글 태그 매니저에서 어떻게 설정하는지 알아보겠습니다. 1. 새 태그 추가하기 구글 태그 매니저의 접속 해서 [새 태그 추가] 버튼을 클릭해서, 태그를 클릭해 줍니다. 아직 태그가 무엇이고, 어떻게 만드는지 익숙하지 않는 분들이라면, 이 글을 확인해 주세요. 2. class 값 확인 하기 먼저, 내가 클릭할 요소에 HTML 클래스(class) 값을 확인해 주세요. 저는 아래 그림 처럼, 저의 티스토리 타이틀을 클릭 했을 경우, GA(구글 애널리틱스)로 데이터를 보내도록 하고 싶습니다. 해당 타이틀의 클래스 값은 크롬을 기준으로 F12 버튼을 눌러주..