SDK 설치 및 연동

입력폼 생성을 완료했다면, 이제 고객님의 웹사이트에 SDK(Software Development Kit)를 설치하여 실제 데이터 수집을 시작할 차례입니다.

SDK 설치는 준비 단계를 포함해 총 3단계로 진행됩니다.

[Step 1] 설치할 스크립트 코드 확인하기 (준비 단계)
[Step 2] 공통 스크립트 설치하기
[Step 3] 데이터 전송(Submit) 이벤트 스크립트 연동하기

Step 1. 설치할 스크립트 코드 확인하기

[프로젝트 관리] 메뉴로 이동하면, 이전에 생성한 입력폼 목록이 카드 형태로 나타납니다.
연동할 입력폼 카드의 우측 상단에 있는 더보기(⋯)를 클릭합니다.
드롭다운 메뉴에서 코드확인을 선택해 주세요.
화면에 나타난 팝업 창에서 웹사이트에 설치할 스크립트 코드를 확인할 수 있습니다.

개발자용 안내

Step 2 / Step 3 단계는 웹사이트 HTML 코드에 스크립트 설치가 필요한 과정입니다.

코드를 직접 수정할 수 없는 경우, 개발 담당자나 ATMS 담당자에게 문의해주세요.

Step 2. 공통 스크립트 설치하기

스크립트 설치 안내 팝업 창의 가장 상단에 있는 공통 스크립트를 복사합니다. 이 스크립트는 저희 데이터 수집 서버와 통신하는 필수 스크립트입니다.

<script type="application/javascript" src="https://cdn.atmsads.io/sdk/atomossdk.js"></script>

설치 위치: 위 공통 스크립트를 복사하여 고객님 웹사이트 HTML의 <head> 태그 안 또는 </body> 태그 바로 위에 붙여넣어 주세요.
설치 주기: 이 스크립트는 한 번만 설치하면 되며, 사이트 내 모든 페이지에 포함되도록 설정하는 것을 권장합니다.

Step 3. 데이터 전송(Submit) 이벤트 스크립트 연동하기

이벤트 스크립트는 두 가지 주요 메서드로 구성되어 있습니다.

ATOMOS.submit(): 고객이 입력한 데이터를 저희 서비스로 전송하여 수집하고 확인할 수 있게 하는 핵심 메서드입니다.
ATOMOS.event(): 광고 클릭 이후의 전환 성과를 측정하기 위한 이벤트 트래킹 메서드입니다.

<script>
// 1. [데이터 수집] 고객이 입력한 데이터를 저희 서비스로 전송합니다.
ATOMOS?.submit('PROJECT_9a7b1c2d', {
  이름: '{이름}',
  연락처: '{연락처}'
}).then((res) => {
  // 등록 성공 시 처리할 내용 (예: 감사 페이지로 이동)
}).catch((err) => {
  // 등록 실패 시 처리할 내용 (예: 에러 메시지 표시)
});

// 2. [성과 측정] 광고 성과 측정을 위한 전환 이벤트를 전송합니다. (선택사항)
ATOMOS?.event('WORKSPACE_ID', 'COMPLETE_REGISTRATION', { code : 'PROJECT_9a7b1c2d'});
</script>

💬 중요: 위 코드에 있는 'PROJECT_9a7b1c2d' 와 'WORKSPACE_ID' 는 예시 ID입니다.

반드시 '코드확인' 후 팝업창에 보이는 고객님의 실제 ID 값으로 변경해 주셔야 정상적으로 작동합니다.

💡 가장 중요한 연동 작업입니다!

위 스크립트를 웹사이트에 맞게 적용하려면 아래 두 가지를 꼭 수정해야 합니다.

프로젝트 ID 변경: 스크립트의 'PROJECT_9a7b1c2d' 부분을 고객님의 실제 프로젝트 ID로 바꿔주세요.
데이터 값 매핑: {필드명} 으로 표시된 부분을 실제 고객이 입력한 값으로 바꿔주어야 합니다. 웹사이트의 입력폼(input) 요소에서 값을 가져와 해당 위치에 넣어주세요.

예시) 만약 이름 입력란의 id가 user_name 이고, 연락처 입력란의 id가 user_phone 이라면 아래와 같이 수정할 수 있습니다.

// 수정 전
{
  이름: '{이름}',
  연락처: '{연락처}'
}

// 수정 후
{
  이름: document.getElementById('user_name').value,
  연락처: document.getElementById('user_phone').value
}

ATOMOS.submit() 실행 시점: 이 스크립트는 고객이 웹사이트의 입력폼 '제출' 버튼을 클릭하는 순간에 실행되어야 합니다.
ATOMOS.event() 실행 시점: 이 전환 이벤트 스크립트는 DB 제출이 성공적으로 완료된 직후에 실행되어야 합니다. 사이트의 동작 방식에 따라 아래 두 가지 경우를 참고하세요.
- 별도의 '완료' 페이지로 이동하는 경우: '제출 완료' 또는 '감사합니다' 와 같은 새로운 페이지의 HTML 소스코드에 ATOMOS.event() 스크립트를 삽입합니다.
- 현재 페이지에 머무는 경우 (팝업 등): ATOMOS.submit() 메서드의 .then((res) => { ... }) 블록 안에 ATOMOS.event() 스크립트를 넣어주세요. 이렇게 하면, 제출 성공 콜백 함수 내에서 실행되므로 성공 팝업이 표시되는 시점에 정확한 성과 측정이 함께 이루어집니다.

모든 스크립트 설치와 연동이 완료되었다면, 이제 입력폼을 통해 데이터가 정상적으로 수집되는지 확인할 차례입니다. 다음 단계인 '수집 성과 확인' 매뉴얼을 진행해 주세요! 📊

Previous입력폼 등록 및 수정 Next수집 DB 및 성과

Last updated 3 months ago