Google 애널리틱스 쿠키 및 양식 개인 정보를 Firebase DB에서 연결하는 샘플 양식
취지
MA 도구에는 추적 기능이 있으며 주로 양식 전환, 로그인 및 이메일 URL 클릭 시 쿠키가 리드 데이터와 연결됩니다.
이번에는 이러한 MA 툴과 마찬가지로 양식의 입력 데이터와 쿠키 정보를 연결하여 DB에 축적시키는 데모를 만들어 보겠습니다.
이러한 구조를 만들어 각 리드가 어떤 액세스를 했는지를 시각화할 수 있습니다. 덧붙여 이 정보를 바탕으로 스코어링, 세그먼트 분할도 가능합니다만, 이러한 분석 처리는 이번의 범위외로 합니다.
샘플
1. 입력 양식 화면
htps : // my furs 라코응 t. 흠뻑 빠지다 p. 코 m/후 rm_c ㅃ엔치 d. HTML
→ “form test/masato”를 입력하고 “송신” 버튼을 누릅니다. 이 때 Google 애널리틱스의 쿠키 ( "clientId"라고 함)는 캡처에서 선택한 쿠키 "__ga"의 Value입니다.
2.Firebase 데이터베이스
htps : // 이런. 푹 빠져라. 오, ぇ. 코 m / p 로지 ct / my 후 rs 라코 응 t / 담배 / my 훗 rs 라코 응 t / 이었어? hl = 그럼
(개인 DB이므로 액세스 불가)
사용자가 입력한 데이터와 쿠키가 설정되어 있음을 확인할 수 있습니다.
구현 방법
1 HTML로 양식, Firebase에서 DB 준비
양식에서 DB로 직접 POST되도록 합니다.
h tps : // rm의 s. 코 m/bぉg/아 rゔぇs/4041
form_clientId.html<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Realtime Database</title>
<style>
form input[id="gaClientId"]{display: none;}
</style>
<script defer src="/__/firebase/4.6.1/firebase-app.js"></script>
<script defer src="/__/firebase/4.6.1/firebase-database.js"></script>
<script defer src="/__/firebase/init.js"></script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TCJ44ZN');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<form>
<input name="name" type="text" id="name">名前
<input name="comment" type="text" id="comment">問い合わせ内容
<button id="write" type="button">送信</button>
</form>
</body>
</html>
2. GTM에서 GA의 clientId를 얻는 js 준비
다음 방법 중 하나로 구현합니다.
직접 쿠키에서 GA clientId 얻는 방법
formSetClientId.js//=タグ:formSetClientId
var trackers = ga.getAll();
var gaClientId ="";
trackers.forEach(function (tr) {
if(tr.get('name') == 'mainTr'){
gaClientId=tr.get('clientId');
}
});
//→"gaClientId"に求めるCookie情報が入ります
Google 애널리틱스의 CustomTask라는 기능을 사용하는 방법
다음 기사 중 하나를 참조하십시오.
h tps : // 마코토 - 시미즈. 코 m / 네 ws / HO W-M-Ah-Go-Ga-Ana ly Chi cs-c-en-t-d-u-th-gtm-2017 /
htps //w w. 시모아는 ゔ아. 이 m / gt m 치 ps / 우세 쿠 s와 m 타 sk 아 싯 s t 등 c 케 r ゔ ぅ 에 s
3. GTM에서 입력 내용과 함께 clientId를 DB로 보내는 js를 준비한다.
formSetClientId.js//=タグ:formSetClientId
...
document.getElementById('write').addEventListener('click', function() {
firebase.database().ref().set({
name: document.getElementById('name').value,
comment: document.getElementById('comment').value,
gaClientId: gaClientId
}).then(function(){
alert('問い合わせありがとうございます!');
});
});
GTM을 공개하면 완성입니다!
뭔가 있으면 죄송 합니다만, 본 기사 또는 이하 계정으로 알려주세요!
\Follow Me!/
Qiita 계정
Twitter 계정
Reference
이 문제에 관하여(Google 애널리틱스 쿠키 및 양식 개인 정보를 Firebase DB에서 연결하는 샘플 양식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/MasatoEmata/items/dd18395aac803182b69e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
1. 입력 양식 화면
htps : // my furs 라코응 t. 흠뻑 빠지다 p. 코 m/후 rm_c ㅃ엔치 d. HTML
→ “form test/masato”를 입력하고 “송신” 버튼을 누릅니다. 이 때 Google 애널리틱스의 쿠키 ( "clientId"라고 함)는 캡처에서 선택한 쿠키 "__ga"의 Value입니다.
2.Firebase 데이터베이스
htps : // 이런. 푹 빠져라. 오, ぇ. 코 m / p 로지 ct / my 후 rs 라코 응 t / 담배 / my 훗 rs 라코 응 t / 이었어? hl = 그럼
(개인 DB이므로 액세스 불가)
사용자가 입력한 데이터와 쿠키가 설정되어 있음을 확인할 수 있습니다.
구현 방법
1 HTML로 양식, Firebase에서 DB 준비
양식에서 DB로 직접 POST되도록 합니다.
h tps : // rm의 s. 코 m/bぉg/아 rゔぇs/4041
form_clientId.html<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Realtime Database</title>
<style>
form input[id="gaClientId"]{display: none;}
</style>
<script defer src="/__/firebase/4.6.1/firebase-app.js"></script>
<script defer src="/__/firebase/4.6.1/firebase-database.js"></script>
<script defer src="/__/firebase/init.js"></script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TCJ44ZN');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<form>
<input name="name" type="text" id="name">名前
<input name="comment" type="text" id="comment">問い合わせ内容
<button id="write" type="button">送信</button>
</form>
</body>
</html>
2. GTM에서 GA의 clientId를 얻는 js 준비
다음 방법 중 하나로 구현합니다.
직접 쿠키에서 GA clientId 얻는 방법
formSetClientId.js//=タグ:formSetClientId
var trackers = ga.getAll();
var gaClientId ="";
trackers.forEach(function (tr) {
if(tr.get('name') == 'mainTr'){
gaClientId=tr.get('clientId');
}
});
//→"gaClientId"に求めるCookie情報が入ります
Google 애널리틱스의 CustomTask라는 기능을 사용하는 방법
다음 기사 중 하나를 참조하십시오.
h tps : // 마코토 - 시미즈. 코 m / 네 ws / HO W-M-Ah-Go-Ga-Ana ly Chi cs-c-en-t-d-u-th-gtm-2017 /
htps //w w. 시모아는 ゔ아. 이 m / gt m 치 ps / 우세 쿠 s와 m 타 sk 아 싯 s t 등 c 케 r ゔ ぅ 에 s
3. GTM에서 입력 내용과 함께 clientId를 DB로 보내는 js를 준비한다.
formSetClientId.js//=タグ:formSetClientId
...
document.getElementById('write').addEventListener('click', function() {
firebase.database().ref().set({
name: document.getElementById('name').value,
comment: document.getElementById('comment').value,
gaClientId: gaClientId
}).then(function(){
alert('問い合わせありがとうございます!');
});
});
GTM을 공개하면 완성입니다!
뭔가 있으면 죄송 합니다만, 본 기사 또는 이하 계정으로 알려주세요!
\Follow Me!/
Qiita 계정
Twitter 계정
Reference
이 문제에 관하여(Google 애널리틱스 쿠키 및 양식 개인 정보를 Firebase DB에서 연결하는 샘플 양식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/MasatoEmata/items/dd18395aac803182b69e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Realtime Database</title>
<style>
form input[id="gaClientId"]{display: none;}
</style>
<script defer src="/__/firebase/4.6.1/firebase-app.js"></script>
<script defer src="/__/firebase/4.6.1/firebase-database.js"></script>
<script defer src="/__/firebase/init.js"></script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TCJ44ZN');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<form>
<input name="name" type="text" id="name">名前
<input name="comment" type="text" id="comment">問い合わせ内容
<button id="write" type="button">送信</button>
</form>
</body>
</html>
//=タグ:formSetClientId
var trackers = ga.getAll();
var gaClientId ="";
trackers.forEach(function (tr) {
if(tr.get('name') == 'mainTr'){
gaClientId=tr.get('clientId');
}
});
//→"gaClientId"に求めるCookie情報が入ります
//=タグ:formSetClientId
...
document.getElementById('write').addEventListener('click', function() {
firebase.database().ref().set({
name: document.getElementById('name').value,
comment: document.getElementById('comment').value,
gaClientId: gaClientId
}).then(function(){
alert('問い合わせありがとうございます!');
});
});
Reference
이 문제에 관하여(Google 애널리틱스 쿠키 및 양식 개인 정보를 Firebase DB에서 연결하는 샘플 양식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/MasatoEmata/items/dd18395aac803182b69e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
