<div id="readability-page-1" class="page"><div id="entry-view">
            
            <main>
                <section>
                    <h2>구글 태그매니저 변수값을 변경하여 활용하는 방법</h2>
                    <div>
                        <article id="mainContent">
                            <div>
                                <p><a href="/m/category/FRONTEND"><span>FRONTEND</span></a></p><h3>구글 태그매니저 변수값을 변경하여 활용하는 방법</h3>
                            </div>
                            <p><cite>나를찾는아이</cite>
                                <span> 2024. 3. 8. 16:26</span>
                            </p>
                            

<ins data-ad-client="ca-pub-9527582522912841" data-ad-slot="8674651030" data-ad-format="auto" data-full-width-responsive="true" data-ad-type="inventory" data-ad-adfit-unit="DAN-we6apVVPwuoDAazb"></ins>



                    
        

        

            <div><p data-ke-size="size16">구글태그매니저는 태그매니저라는 매개체를 통해 front 소스코드의 변경없이 이벤트를 심을수 있는 매우 좋은 도구입니다</p>

<p data-ke-size="size16">모든 이벤트 로깅을 구글 태그 매니저를 통하여 하도록 하면, front 소스코드에서 이벤트 로깅과 관련된 모든 코드를 격리할수도 있습니다</p>

<p data-ke-size="size16">이게 더더욱 가능한 이유가 추상화된 트리거를 통해 추상화된 변수영역들을 넘겨준다면</p>

<p data-ke-size="size16">해당 트리거를 통해 전달받은 변수값들을 요리조리 변경하여 GA, BRAZE, 앰플리튜드 등등 여러 매체에 데이터를 전송할수 있습니다</p>


<p data-ke-size="size16">전달받은 변수값을 조작하기 위해서 이러한 방법으로 가능합니다</p>

<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2024-03-08 오후 4.18.33.png" data-origin-width="2336" data-origin-height="1438"><span data-url="https://blog.kakaocdn.net/dn/b6GM7K/btsFB6UOBrq/2t5Kko3Bi88qEDZlfrN6m1/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/b6GM7K/btsFB6UOBrq/2t5Kko3Bi88qEDZlfrN6m1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2024-03-08 오후 4.18.33.png" data-origin-width="2336" data-origin-height="1438"></span></figure>


<p data-ke-size="size16">변수값을 생성할때 "맞춤 자바스크립트"를 설정하면 정말로 빈 종이에 javascript 변수값을 적어내려갈수 있습니다</p>


<p data-ke-size="size16">제가 실제로 사용하고 있는 예제로 설명을 드려볼까합니다</p>

<p data-ke-size="size16">기존에 존재하는 signUpType 이라는 GTM 변수가 있습니다</p>

<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2024-03-08 오후 4.19.51.png" data-origin-width="1626" data-origin-height="758"><span data-url="https://blog.kakaocdn.net/dn/bNFYvr/btsFF8iId0p/ZeU7wzVKb7EkhhkHRRtaqK/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/bNFYvr/btsFF8iId0p/ZeU7wzVKb7EkhhkHRRtaqK/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2024-03-08 오후 4.19.51.png" data-origin-width="1626" data-origin-height="758"></span></figure>


<p data-ke-size="size16">이 변수는 데이터영역의 payload.type을 가져오는 변수입니다</p>

<p data-ke-size="size16">그런데 이 값은 코드에서 number 타입으로 보내주고 있습니다</p>


<p data-ke-size="size16">그런데 만약 여러분들이 새롭게 도입한 서드파티중에서 한곳은 숫자가 아니라 string 형태의 값을 사용한다면 어떻게 할까요?</p>

<p data-ke-size="size16">바로 이 방법으로 새로운 변수를 추가로 선언할수 있습니다</p>

<pre id="code_1709882210129" data-ke-language="bash" data-ke-type="codeblock"><code>function() {
  if ({{signUpType}} === 1) {
    return "kakao";
  } else if ({{signUpType}} === 2) {
    return "naver";
  } else if ({{signUpType}} === 3) {
    return "facebook";
  } else if ({{signUpType}} === 4) {
    return "apple";
  } else {
    return "email";
  }
}</code></pre>

<p data-ke-size="size16">{{변수명}} 이러한 방법으로 GTM 내에 존재하는 다른 변수를 참조할수 있으며, 이 결과값으로 return된 값이 해당 변수의 새로운 값이 됩니다</p>
</div>
                    
        

        



                            
                        </article>
                        
                            
                        
                        
                        
                        
                        
                            
                        

                        
                        

                        
                    </div>
                </section>
            </main>
        </div></div>

나를 찾는 아이

Kyoung min, Kim

구글태그매니저는 태그매니저라는 매개체를 통해 front 소스코드의 변경없이 이벤트를 심을수 있는 매우 좋은 도구입니다
 
모든 이벤트 로깅을 구글 태그 매니저를 통하여 하도록 하면, front 소스코드에서 이벤트 로깅과 관련된 모든 코드를 격리할수도 있습니다
 
이게 더더욱 가능한 이유가 추상화된 트리거를 통해 추상화된 변수영역들을 넘겨준다면
 
해당 트리거를 통해 전달받은 변수값들을 요리조리 변경하여 GA, BRAZE, 앰플리튜드 등등 여러 매체에 데이터를 전송할수 있습니다
 
 
전달받은 변수값을 조작하기 위해서 이러한 방법으로 가능합니다
 
 
변수값을 생성할때 "맞춤 자바스크립트"를 설정하면 정말로 빈 종이에 javascript 변수값을 적어내려갈수 있습니다
 
 
제가 실제로 사용하고 있는 예제로 설명을 드려볼까합니다
 
기존에 존재하는 signUpType 이라는 GTM 변수가 있습니다
 
 
이 변수는 데이터영역의 payload.type을 가져오는 변수입니다
 
그런데 이 값은 코드에서 number 타입으로 보내주고 있습니다
 
 
그런데 만약 여러분들이 새롭게 도입한 서드파티중에서 한곳은 숫자가 아니라 string 형태의 값을 사용한다면 어떻게 할까요?
 
바로 이 방법으로 새로운 변수를 추가로 선언할수 있습니다
 
function() {
  if ({{signUpType}} === 1) {
    return "kakao";
  } else if ({{signUpType}} === 2) {
    return "naver";
  } else if ({{signUpType}} === 3) {
    return "facebook";
  } else if ({{signUpType}} === 4) {
    return "apple";
  } else {
    return "email";
  }
}
 
{{변수명}} 이러한 방법으로 GTM 내에 존재하는 다른 변수를 참조할수 있으며, 이 결과값으로 return된 값이 해당 변수의 새로운 값이 됩니다

구글 태그매니저 변수값을 변경하여 활용하는 방법

댓글