소개

GTM에서 운용하고 있던 DTM 태그를 Launch로 마이그레이션했습니다만, 일부 태그가 GTM의 커스텀 이벤트나 커스텀 변수에 의존하고 있었기 때문에 이행 후에도 GTM의 설정을 이용하기로 했습니다. 여기에서는 "GTM 변수를 Launch의 변수로 만드는 방법""GTM 트리거와 같은 타이밍에 Launch 규칙을 발화시키는 방법"을 정리했습니다.

GTM 변수를 Launch 변수로 만드는 방법

GTM에서 다음과 같이 정의된 변수를 Launch에서 사용하는 방법을 설명합니다.


항목 이름
값


변수 이름
Example 1

변수 유형
데이터 레이어 변수

데이터 레이어의 변수 이름
example_1

Launch 측에서 데이터 요소를 다음과 같이 설정합니다.

다음은 위 그림④의 소스 코드입니다.

return google_tag_manager['GTM-XXXXXXX'].dataLayer.get('example_1');

GTM 트리거와 같은 타이밍에 Launch 규칙을 발화하는 방법

GTM의 트리거 및 커스텀 이벤트는 직접 Launch로 수신할 수 없기 때문에, GTM에 별도 커스텀 이벤트를 일으키도록 합니다.
커스텀 이벤트의 트리거는 Launch에서 준비하고 GTM은 이벤트를 시작할 뿐입니다.

GTM 측 - 맞춤 이벤트 발생

변수를 설정합니다.

항목 이름
값


변수 이름
Launch Event

변수 유형
데이터 레이어 변수

데이터 레이어의 변수 이름
launch_event

아래 코드를 태그로 저장합니다. 이행 전에 사용하고 있던 트리거로 발화시킵니다.

<script>
var eventTrigger = {{Launch Event}};
if(eventTrigger){
    var dom = {{Click Element}};
    eventTrigger(dom);
}
</script>

Launch 측 - 맞춤 이벤트 트리거 준비

GTM 측에서 실행되는 트리거 함수는 미리 Launch에서 데이터 레이어로 푸시해 둡니다.

규칙을 다음과 같이 설정합니다.

다음은 위 그림④의 소스 코드입니다.

try {
  if(!google_tag_manager['GTM-XXXXXXX'].dataLayer.get('launch_event')){
    throw 'launch_evnt is not exist.';
  }
} catch(ex) { 
  window['dataLayer'] = window['dataLayer'] || [];
  dataLayer.push({
    'launch_event':
    (function(dom){
      var e;
      try {
        e = new CustomEvent('event_valueChanged', {'bubbles':false, 'cancelable':true});
      } catch (ex) {
        e = window.document.createEvent('CustomEvent');
        e.initCustomEvent('event_valueChanged', false, true, void 0);
      }
      dom.dispatchEvent(e);
    })
  });
}

Launch 측 - 맞춤 이벤트 수신

규칙을 다음과 같이 설정합니다.

이상