Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ga4 #4874

Closed
wants to merge 11 commits into from
Closed

Ga4 #4874

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
aba75ad
Update _config.yml
cherrylime69 Jun 1, 2024
a8631b3
Create 2024-06-01-first.md
cherrylime69 Jun 1, 2024
b20e555
Update _config.yml
cherrylime69 Jun 1, 2024
152e974
Update _config.yml
cherrylime69 Jun 1, 2024
7364e17
Update _config.yml
cherrylime69 Jun 1, 2024
f62a690
Update google-gtag.html
cherrylime69 Jun 1, 2024
41ad5b6
Update google-gtag.html
cherrylime69 Jun 1, 2024
a76c7ea
Update google-gtag.html
cherrylime69 Jun 1, 2024
9643100
Update custom.html
cherrylime69 Jun 1, 2024
248d363
Update _config.yml
cherrylime69 Jun 1, 2024
323f28f
GA4 UTM 빌더 제작
cherrylime69 Jun 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 67 additions & 0 deletions GA4/script/utm-builder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
window.addEventListener('DOMContentLoaded', eventHandler)

function eventHandler() {
clickGA4CookieRemoveBtn();
submitUtmForm();
}

function submitUtmForm() {
document.querySelector("#utm_creat_form").addEventListener("submit", createUtmBtn);
}

function getUtmFormValue() {
const basicURL = encodeURI("https://cherrylime69.github.io/");
let finalURL = '';
const formValues = Array
.from(document.querySelectorAll("#utm_creat_form input"))
.filter(ele => !ele.id.includes("btn") && ele.value != '')
.map(ele => ele.id + "=" + ele.value)
.join("&");
finalURL = formValues ? "?" + formValues : '';

return basicURL + finalURL;
}

function createUtmBtn(event) {
event.preventDefault();
document.querySelector("#created_utm_btn").setAttribute("href", getUtmFormValue());
}

function deleteCookie(name) {
var domainParts = window.location.hostname.split('.');
var pathArray = window.location.pathname.split('/');
var date = new Date(0).toUTCString();

// 시도할 도메인과 경로 조합 배열
var domainCombinations = domainParts.map((part, index) => domainParts.slice(index).join('.'));
var pathCombinations = pathArray.map((part, index) => pathArray.slice(0, index + 1).join('/'));

// 빈 경로 추가
pathCombinations.push('');

// 모든 조합 시도
domainCombinations.forEach(domain => {
pathCombinations.forEach(path => {
document.cookie = `${name}=; path=${path}; domain=${domain}; expires=${date};`;
});
});

// 현재 도메인에 대한 최종 삭제 시도
document.cookie = `${name}=; expires=${date}; path=/;`;
}

function getGA4Cookie() {
const cookies = document.cookie.split(";")
.filter(name => name.includes("_ga") || name.includes("_gl") || name.includes("_gcl"))
.map(ele => ele.split("=")[0]);
return cookies;
}

function deleteGA4Cookie() {
const GA4Cookie = getGA4Cookie();
GA4Cookie.forEach(cookie => deleteCookie(cookie))
}

function clickGA4CookieRemoveBtn() {
document.querySelector("#cookie_remover_btn").addEventListener("click", deleteGA4Cookie)
}
204 changes: 204 additions & 0 deletions GA4/style/utm-builder.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
html {
background-color: #ffe380;
}

body {
margin: 0;
}

#container {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}

#header {
display: flex;
justify-content: center;
background-color: yellow;
color: black;
align-items: center;
border: none;
height: 10vh;

}

#title {
display: block;
padding: 0;
margin: 0;
text-decoration: black;
font-weight: bold;
font-size: larger;
}

#cookie_remover_btn {
display: flex;
position: fixed;
right: 2vw;
bottom: 2vh;
background-color: yellow;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 10px;
color: tomato;
font-weight: bold;
text-align: center;
align-items: center;
border: none;
cursor: pointer;
box-shadow: 4px 5px 4px #493f1e;
}

#cookie_remover_btn:hover {
background-color: rgb(236, 236, 125);
color: rgb(245, 127, 107);
}

#utm_creator {
display: flex;
margin: 10px;
padding: 10px;
flex-direction: row;
justify-content: space-evenly;
gap: 50px;
}

#utm_creator form {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-around;
}

#utm_creator form #utm_create_btn {
margin: 10px 0px;
cursor: pointer;
}

#created_utm_btn_box {
display: flex;
flex-grow: 1;
}

#created_utm_btn {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 0, 0.356);
border-radius: 20px;
flex-grow: 1;
border: none;
font-size: 1.5em;
color: rgb(150, 150, 245);
cursor: pointer;
box-shadow: 4px 5px 4px #493f1e;
}

#created_utm_btn:hover {
background-color: rgb(184, 184, 11);
color: black;
}

#fixed_utm_box {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
margin: 20px;
}

.utm_box {
display: flex;
margin: 20px;
gap: 20px;
}

a.button {
text-decoration: none;
}

#utm_naver .button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: rgb(66, 60, 60);
background: linear-gradient(rgb(48, 243, 48), rgb(241, 222, 113));
text-align: center;
border-radius: 5px;
border: none;
font-weight: bold;
cursor: pointer;
box-shadow: 4px 5px 4px #493f1e;
flex-grow: 1;
}

#utm_naver .button:hover {
background-color: rgb(33, 155, 46);
color: rgb(255, 255, 255);
}

#utm_facebook .button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
color: rgb(30, 104, 16);
text-align: center;
border: none;
cursor: pointer;
border-radius: 5px;
box-shadow: 4px 5px 4px #493f1e;
flex-grow: 1;
background: linear-gradient(rgb(84, 84, 187), rgb(224, 222, 211));

}

#utm_facebook .button:hover {
background-color: rgb(35, 35, 230);
color: rgb(255, 255, 255);
}

#utm_insta .button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
color: rgb(72, 30, 224);
text-align: center;
border: none;
cursor: pointer;
border-radius: 5px;
box-shadow: 4px 5px 4px #493f1e;
flex-grow: 1;
background: linear-gradient(rgb(241, 97, 181), rgb(247, 226, 111));

}

#utm_insta .button:hover {
background-color: rgb(156, 59, 116);
color: rgb(255, 255, 255);
}

#utm_google .button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
color: rgb(56, 55, 54);
background-color: rgb(139, 139, 146);
text-align: center;
border: none;
cursor: pointer;
border-radius: 5px;
box-shadow: 4px 5px 4px #493f1e;
flex-grow: 1;
background: linear-gradient(rgb(139, 139, 146), rgb(236, 173, 77));
}

#utm_google .button:hover {
background-color: rgb(47, 47, 49);
color: rgb(214, 202, 190);
}
88 changes: 88 additions & 0 deletions GA4/utm-builder.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style/utm-builder.css">
<title>GA4 test</title>
<script src="./script/utm-builder.js"></script>
</head>

<body>
<div id="container">
<div id="header">
<div id="title">GA4 UTM</div>
<div id="cookie_remover_box">
<button id="cookie_remover_btn">cookie remove</button>
</div>
</div>
<div id="main">
<div id="utm_creator">
<form id="utm_creat_form" action="#">
<labe for="utm_source">source</labe>
<input id="utm_source" type="text" placeholder="google" required>
<labe for="utm_medium">medium</labe>
<input id="utm_medium" type="text" placeholder="cpc" required>
<labe for="utm_campaign">campaign</labe>
<input id="utm_campaign" type="text" placeholder="promotion" required>
<labe for="utm_term">term</labe>
<input id="utm_term" type="text" placeholder="cat">
<labe for="utm_content">content</labe>
<input id="utm_content" type="text" placeholder="A">
<input id="utm_create_btn" type="submit" value="생성하기">
</form>
<div id="created_utm_btn_box">
<a id="created_utm_btn" class="button" target="_blank">생성된 버튼</a>
</div>
</div>
<div id="fixed_utm_box">
<div id="utm_naver" class="utm_box">
<a href="https://cherrylime69.github.io/?utm_source=naver&utm_medium=cpc&utm_campaign=promotion&utm_term=cat&utm_content=A"
class="button" target="_blank">naver_cpc_promotion_cat_A</a>
<a href="https://cherrylime69.github.io/?utm_source=naver&utm_medium=cpc&utm_campaign=sales&utm_term=rat&utm_content=B"
class="button" target="_blank">naver_cpc_sales_rat_B</a>
<a href="https://cherrylime69.github.io/?utm_source=naver&utm_medium=cpc&utm_campaign=promotion&utm_term=cat&utm_content=C"
class="button" target="_blank">naver_cpc_promotion_cat_C</a>
<a href="https://cherrylime69.github.io/?utm_source=naver&utm_medium=cpc&utm_campaign=sales&utm_term=rat&utm_content=D"
class="button" target="_blank">naver_cpc_sales_rat_D</a>
</div>
<div id="utm_facebook" class="utm_box">
<a href="https://cherrylime69.github.io/?utm_source=facebook&utm_medium=cpc&utm_campaign=promotion&utm_term=cat&utm_content=A"
class="button" target="_blank">facebook_cpc_promotion_cat_A</a>
<a href="https://cherrylime69.github.io/?utm_source=facebook&utm_medium=cpc&utm_campaign=sales&utm_term=rat&utm_content=B"
class="button" target="_blank">facebook_cpc_sales_rat_B</a>
<a href="https://cherrylime69.github.io/?utm_source=facebook&utm_medium=cpc&utm_campaign=promotion&utm_term=cat&utm_content=C"
class="button" target="_blank">facebook_cpc_promotion_cat_C</a>
<a href="https://cherrylime69.github.io/?utm_source=facebook&utm_medium=cpc&utm_campaign=sales&utm_term=rat&utm_content=D"
class="button" target="_blank">facebook_cpc_sales_rat_D</a>
</div>
<div id="utm_insta" class="utm_box">
<a href="https://cherrylime69.github.io/?utm_source=instagram&utm_medium=cpc&utm_campaign=promotion&utm_term=cat&utm_content=A"
class="button" target="_blank">insta_cpc_promotion_cat_A</a>
<a href="https://cherrylime69.github.io/?utm_source=instagram&utm_medium=cpc&utm_campaign=sales&utm_term=rat&utm_content=B"
class="button" target="_blank">insta_cpc_sales_rat_B</a>
<a href="https://cherrylime69.github.io/?utm_source=instagram&utm_medium=cpc&utm_campaign=promotion&utm_term=cat&utm_content=C"
class="button" target="_blank">insta_cpc_promotion_cat_C</a>
<a href="https://cherrylime69.github.io/?utm_source=instagram&utm_medium=cpc&utm_campaign=sales&utm_term=rat&utm_content=D"
class="button" target="_blank">insta_cpc_sales_rat_D</a>
</div>
<div id="utm_google" class="utm_box">
<a href="https://cherrylime69.github.io/?utm_source=google&utm_medium=cpc&utm_campaign=promotion&utm_term=cat&utm_content=A"
class="button" target="_blank">google_cpc_promotion_cat_A</a>
<a href="https://cherrylime69.github.io/?utm_source=google&utm_medium=cpc&utm_campaign=sales&utm_term=rat&utm_content=B"
class="button" target="_blank">google_cpc_sales_rat_B</a>
<a href="https://cherrylime69.github.io/?utm_source=google&utm_medium=cpc&utm_campaign=promotion&utm_term=cat&utm_content=C"
class="button" target="_blank">google_cpc_promotion_cat_C</a>
<a href="https://cherrylime69.github.io/?utm_source=google&utm_medium=cpc&utm_campaign=sales&utm_term=rat&utm_content=D"
class="button" target="_blank">google_cpc_sales_rat_D</a>
</div>
</div>
</div>
<div id="footer">

</div>
</div>
</body>

</html>
8 changes: 4 additions & 4 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

# theme : "minimal-mistakes-jekyll"
# remote_theme : "mmistakes/minimal-mistakes"
minimal_mistakes_skin : "default" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"
minimal_mistakes_skin : "aqua" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"

# Site Settings
locale : "en-US"
Expand All @@ -21,7 +21,7 @@ title_separator : "-"
subtitle : # site tagline that appears below site title in masthead
name : "Your Name"
description : "An amazing website."
url : # the base hostname & protocol for your site e.g. "https://mmistakes.github.io"
url : "https://cherrylime69.github.io"
baseurl : # the subpath of your site, e.g. "/blog"
repository : # GitHub username/repo-name e.g. "mmistakes/minimal-mistakes"
teaser : # path of fallback teaser image, e.g. "/assets/images/500x300.png"
Expand Down Expand Up @@ -104,9 +104,9 @@ social:

# Analytics
analytics:
provider : false # false (default), "google", "google-universal", "google-gtag", "custom"
provider : "custom" # false (default), "google", "google-universal", "google-gtag", "custom"
google:
tracking_id :
tracking_id : "G-H6C2GWMG29"
anonymize_ip : # true, false (default)


Expand Down
Loading
Loading