EdCommerce 사이트에 추적 및 스니펫 코드 설치하기

Last updated: October 9, 2026

웹사이트에 코드 스니펫을 통합하려면 일반적으로 다음 단계를 따릅니다:

1단계. 스니펫 코드 가져오기

통합하려는 서비스 또는 플랫폼에서 스니펫 코드를 찾아 복사합니다. 여기에는 추적 픽셀, 채팅 위젯, 양식 삽입 코드 또는 서비스에서 제공하는 기타 코드가 포함될 수 있습니다.

Google 태그 관리자 코드 또는 Meta Pixel을 설치하려는 경우 아래의 전용 섹션을 참조하세요:

Meta Pixel 설치
Google 태그 관리자 설치

2단계. EdCommerce에 스니펫 코드 추가

EdCommerce에 스크립트를 추가하는 방법은 매우 간단합니다. 통합 영역에 액세스하여 "스크립트 코드 추가"를 클릭하기만 하면 됩니다.

스크립트 통합 필드를 다음과 같이 작성합니다:

이름: 스니펫의 이름을 추가합니다. 통합하려는 도구의 이름을 사용할 수 있습니다.
삽입 위치: Head 또는 Body(통합하려는 서비스의 지침에 따라 다름).
코드: 다른 앱의 플랫폼에서 찾은 해당 스니펫 코드를 복사하여 여기에 붙여넣습니다.

3단계: 통합이 올바르게 작동하는지 다시 확인

통합이 올바르게 작동하는지 확인하는 과정은 통합하려는 플랫폼에 따라 다를 수 있습니다. 작업 중인 서비스 또는 플랫폼에서 제공하는 구체적인 통합 지침을 검토하는 것이 중요합니다. 해당 지침에는 코드 스니펫 통합을 위한 추가 요구 사항이나 권장 사항이 포함되어 있을 수 있습니다.

Google 태그 관리자 설치

1단계 - Google 태그 관리자에서 코드 스니펫 가져오기

시작하려면 <https://tagmanager.google.com>에서 Google 태그 관리자 계정에 로그인합니다.

로그인하면 계정과 연결된 컨테이너 목록이 표시됩니다. 작업하려는 컨테이너를 선택하거나 EdCommerce용 새 컨테이너를 만드세요.

컨테이너를 선택한 후 컨테이너를 열어 콘텐츠에 액세스합니다. 컨테이너 개요에서 상단 메뉴 표시줄에 있는 컨테이너 ID를 찾아 클릭합니다(일반적으로 GTM-XXX로 시작합니다).

두 개의 코드 스니펫이 표시됩니다. 하나는 웹사이트의 <head> 섹션용이고 다른 하나는 <body> 섹션용입니다. EdCommerce에서는 <head>의 코드만 사용합니다.

2단계. EdCommerce에 코드 스니펫 추가

EdCommerce에 스니펫 코드를 추가하는 방법은 매우 간단합니다. 통합 영역에 액세스하여 "스크립트 코드 추가" 버튼을 클릭하기만 하면 됩니다.

스크립트 통합 필드를 다음과 같이 작성합니다:

이름: 스니펫에 이름을 추가하세요. 예: Google Tag Manager.
삽입 위치: Head (Google Tag Manager에는 body를 사용하지 않습니다)
코드: Google Tag Manager에서 찾은 해당 "header" 스니펫 코드를 여기에 복사하세요.

3단계: Google Tag Manager가 올바르게 작동하는지 확인

설치가 올바르게 완료되었는지 확인하는 가장 쉬운 방법은 Chrome 웹 스토어에서 Google Tag Assistant Chrome 확장 프로그램을 설치하는 것입니다.

그런 다음 다음 단계를 따르세요:

Google Chrome에서 웹사이트를 엽니다.
Chrome 툴바에서 Tag Assistant 확장 프로그램 아이콘을 클릭합니다.
팝업 창이 나타납니다. 기록을 시작하려면 "사용"을 클릭합니다.
웹사이트를 탐색하고 Google Tag Manager에서 설정한 태그를 트리거하는 작업을 수행합니다.
작업을 완료한 후 Tag Assistant 확장 프로그램 아이콘을 다시 클릭합니다.
Tag Assistant가 각 페이지에서 트리거된 태그를 분석하고 보고서를 제공합니다.
Google Tag Manager 설정과 관련된 오류나 경고가 있는지 보고서를 검토합니다.

Tag Assistant 보고서는 Google Tag Manager 컨테이너의 태그가 올바르게 실행되고 있는지 또는 문제가 있는지를 보여줍니다. 웹사이트에서 다양한 시나리오를 테스트하여 원하는 모든 태그가 예상대로 실행되는지 확인하세요.

또한 Google Analytics의 "실시간" 섹션을 확인하여 웹사이트에서 데이터가 수신되고 있는지 확인할 수 있습니다. EdCommerce 사이트에서 작업을 수행할 때 Google Analytics에 실시간 데이터가 표시되면 Google Tag Manager가 Google Analytics로 데이터를 올바르게 전송하고 있다는 의미입니다.

Meta Pixel 설치

이미 IMG 태그를 사용하여 Meta Pixel을 설정했거나 설정할 계획이라면 Facebook 개발자 문서를 따르는 것이 좋습니다.

이 기사에서는 EdCommerce 사이트에 Meta Pixel을 설정하고 설치하는 방법을 보여드립니다. 시작하기 전에 픽셀에 대해 자세히 알아보려면 Meta Pixel 설치의 이점을 확인하세요.

이미 Meta Pixel을 생성했고 픽셀 기본 코드를 찾으려면 2단계: EdCommerce에 픽셀 추가로 건너뛰세요.

1단계: Meta Pixel 생성 및 설정

이벤트 관리자로 이동합니다.
데이터 소스 연결을 클릭하고 웹을 선택합니다.
Meta Pixel을 선택하고 연결을 클릭합니다.
픽셀 이름을 추가합니다.
간편한 설정 옵션을 확인하려면 웹사이트 URL을 입력합니다.
계속을 클릭합니다.

\자세한 정보는 [Meta 비즈니스 고객 센터.*](https://www.facebook.com/business/help/952192354843755?id=1205376682832142)에서 확인할 수 있습니다.

2단계. EdCommerce에 픽셀 추가

Meta 픽셀을 EdCommerce에 수동으로 추가하게 되므로 Meta 이벤트 관리자에서 스크립트를 복사하여 EdCommerce 사이트의 헤더에 붙여넣어야 합니다.

EdCommerce에 스크립트를 추가하는 것은 매우 간단합니다. 통합 영역에 액세스하여 "스크립트 코드 추가"를 클릭하기만 하면 됩니다.

스크립트 통합 필드를 다음과 같이 작성합니다:

이름: 스크립트 이름을 추가합니다. 예: Meta 픽셀 또는 Facebook 픽셀
삽입 위치: 헤드 (Meta 픽셀에는 본문을 사용하지 않습니다.)
코드: Meta 이벤트 관리자에서 찾은 코드를 여기에 복사합니다.

"저장"을 클릭합니다.

3단계: Meta 픽셀이 올바르게 작동하는지 다시 확인

Facebook 픽셀이 제대로 연결되어 작동하는지 확인하려면 다음 단계를 따르세요:

https://business.facebook.com에서 Facebook 비즈니스 관리자 계정에 로그인합니다.
왼쪽 사이드바에서 "데이터 소스" 탭으로 이동합니다.
"픽셀" 섹션에서 Facebook 픽셀이 목록에 표시되는지 확인합니다. 연결되어 올바르게 작동하는 경우 활성 상태임을 나타내는 녹색 점이 표시됩니다.
픽셀 이름을 클릭하여 설정 및 추가 세부정보에 액세스합니다.
픽셀 설정에서 추적 중인 이벤트를 검토하고 오류나 경고가 있는지 확인하며 픽셀의 최근 활동을 확인할 수 있습니다.