GTM을 통해 jQuery 라이브러리 적용하기

GTM을 통해 jQuery 라이브러리 적용하기

2021년 2월 17일 Data/Tag Management 0

안녕하세요. 인트렌치 컨설팅 유정훈 입니다.

이번 시간에는 홈페이지 전체 또는 특정 웹페이지에서 jQuery 를 사용할 수 없어 태깅 진행이 어려울 경우, GTM으로 안전하게  jQuery 라이브러리를 추가하여 사용할 수 있는 방법에 대해 알아보도록 하겠습니다.

설정은 아래 단계부터 천천히 진행하도록 하겠습니다!

Step 1) 먼저 GTM 항목 중 [Templates] 항목을 클릭 합니다.

[그림 1]

Step 2) 그 다음 Tag Templates 영역에서 [Search Gallery] 를 클릭 합니다. 이후 아래와 같이 GTM 에 추가할 수 있는 템플릿들이 나열됩니다.

[그림 2]

Step 3) 나열된 템플릿 중 [CDNJS – Hosted Libraries] 를 클릭하고 이후 화면에서 [Add to workspace] 를 클릭하여 템플릿을 추가합니다. 참고로 Tag Templates 영역에 추가되는 템플릿은 태그 생성 시 태그 유형에서 맞춤 태그 영역에 포함됩니다.

[그림 3]

[그림 4]

이 단계까지 오셨다면 jQuery 라이브러리를 적용하기 위한 준비과정은 모두 마쳤습니다! 이제 GTM 에서 jQuery 라이브러리를 적용해 보겠습니다.

Step 4) 먼저 태그 영역에서 [New] 를 클릭하여 태그 유형 중 Custom 영역에서[CDNJS – Hosted Libraries] 를 선택합니다.

[그림 5]

[그림 6]

Step 5) Library type 영역에서 [Enter path manually] 항목을 선택합니다.

[그림 7]

Step 6-1) Full path to library 입력란에 입력할 jQuery CDN 경로는 https://cdnjs.com/libraries/jquery 에서 확인합니다.

[그림 8]

Step 6-2) Full path to library 입력란에 확인한 jQuery CDN 경로를 입력합니다.

Step 7) 다음 [save] 를 클릭하여 저장합니다.

[그림 9]

이로써  jQuery 라이브러리를 사용하기 위한 모든 과정을 마쳤습니다.

이제 정상적으로 GTM에서 설정한 내용이 홈페이지에 잘 반영이 되는지 확인해 볼까요?

확인하기 위해 GTM 미리보기 모드 실행 또는 GTM 게시를 하겠습니다.

확인결과, 아래 [그림 10] 과 같이 GTM 태그에 설정한 jQuery 3.5.1 버전이 홈페이지에 정상적으로 설정되어 있음이 확인됩니다.

[확인사항]

 1) Network 상 jQuery 를 정상적으로 로드하고 있는지 확인

 2) 크롬브라우저 개발자도구 > 콘솔창에 jQuery.fn.jquery 입력하여 홈페이지에 적용된 jQuery 버전이 설정한 버전이 맞는지 확인

[그림 10]

이번 시간에는 GTM을 통해 jQuery 라이브러리를 설정하는 방법에 대해 알아보았습니다.

GTM 태깅 진행 시 보통 홈페이지에서 jQuery 를 사용하지 못할 경우 jQuery 라이브러리 전체 스크립트를 GTM 맞춤 HTML 태그에 적용하여 사용합니다.

이 방법이 익숙하지 않으면 출처를 알 수 없는 jQuery 라이브러리 스크립트를 적용하기 쉬우며, 보안상 문제가 발생하는 경우가 생길 수 있습니다.

이를 방지하기 위해 본 컨텐츠에서 GTM 템플릿 갤러리에 등록되어 검증된 템플릿을 사용하여 jQuery 라이브러리를 홈페이지에 적용하는 방법을 다루어 보았습니다.

GTM를 이용해 안전하고 검증된 방법으로 jQuery 라이브러리를 적용하고자 하시는 분들께 도움이 되기를 바랍니다.

Do NOT follow this link or you will be banned from the site!