클라이언트 JavaScript

참고: 간행물이 Google을 통한 구독의 다른 기능을 사용하는 경우 swg.js 클라이언트 측을 사용하면 Google을 통한 구독 개발 사이트에 설명된 대로 게시가 이미 구성되고 라이브러리가 초기화되었다고 가정합니다. 구독 연결을 통해 Google을 통한 구독을 사용하는 것은 선택사항입니다.

구독 연결을 사용하면 클라이언트 측 JavaScript를 통해서만 PPID와 독자의 Google 계정을 새로 연결할 수 있습니다. 구성된 페이지에서 정기 결제 연결을 요청하는 대화상자가 리더에 표시됩니다. 독자가 'Google 계정으로 계속하기' 버튼을 클릭하면 연결할 계정을 선택하고 완료 시 구성된 페이지로 다시 돌아갈 수 있습니다.

PPID와 독자의 계정은 swg.js의 linkSubscription 메서드를 사용하여 연결합니다. 사용법은 이전 계정 연결 기능 (예)과 유사하지만, 이 메서드는 프로미스를 전달하는 대신 PPID가 포함된 객체를 허용합니다.

코드 예시

이러한 클라이언트 측 코드 예는 링크를 시작하는 방법, 유효한 응답의 형식, swg.js eventManager를 사용하여 애널리틱스 이벤트를 수신 대기하고 적절하게 라우팅하는 방법 (선택사항)을 보여줍니다.

구독 연결 대화상자 시작

const result = await subscriptions.linkSubscription({publisherProvidedId:6789})

참고: 무조건 사용자에게 메시지를 보내지 마세요. 이미 정기 결제를 연결한 사용자에게 메시지를 표시해서는 안 되며 최근에 정기 결제 연결을 거부한 사용자에게 다시 메시지를 표시하는 것을 지연시켜야 합니다.

샘플 응답

성공적으로 연결된 계정의 유효한 응답에는 연결에 사용된 PPID와 불리언 success 상태가 모두 포함됩니다.

console.log(result) //{publisherProvidedId: 6789, success: true}

구독 연결을 위해 서드 파티 쿠키 또는 독자를 위한 활성 Google 세션을 사용할 필요는 없습니다. 이를 통해 구매 후뿐만 아니라 독자의 환경에서 언제든지 연결 환경을 시작할 수 있습니다. 독자가 Google 계정에 로그인하지 않은 경우 흐름의 일부로 로그인할 수 있습니다.

클라이언트 측 전체 예

<script
  async
  type="application/javascript"
  subscriptions-control="manual"
  src="https://news.google.com/swg/js/v1/swg.js">
</script>

<script>

  function linkSubscription(ppid) {
    self.SWG.push(async (subscriptions) => {
      try {
        const result = await subscriptions.linkSubscription({
          publisherProvidedId: ppid,
        })
        console.log(result)
      } catch(e) {
        console.log(e)
      }
    })
  }

  document.addEventListener('DOMContentLoaded', function () {
    (self.SWG = self.SWG || []).push(subscriptions => {
      subscriptions.init("PUBLICATION_ID");

      //Configure the event manager for analytics integration
      subscriptions.getEventManager().then(manager => {
        manager.registerEventListener((event) => {
            // Add code here to send the event to your analytics
            // sendToAnalytics(event);
          console.log(event);
        });
      });
    });

    document
      .querySelector("SELECTOR")
      .addEventListener('click', function(){
        linkSubscription(PPID)
      })
  });
</script>

OAuth 클라이언트 ID 만들기

구독 연결에 OAuth 클라이언트가 필요하지는 않지만 OAuth 클라이언트를 사용하여 프로젝트에 승인된 도메인의 허용 목록을 작성할 수 있습니다. 승인된 도메인은 클라이언트 측 JavaScript 호출이 허용된 도메인 목록입니다. 간행물에 이미 swg.js와 함께 사용할 OAuth 클라이언트 ID가 게시자 센터에 구성되어 있을 수 있습니다.

• 구독 연결 클라이언트 측 자바스크립트 호출이 이전에 검증된 도메인 이름에서 시작된 경우 별도의 조치가 필요하지 않습니다.
• 자바스크립트가 새 도메인 이름에서 실행되는 경우 SwG OAuth 클라이언트 ID 구성 안내를 따르세요.

참고: OAuth 클라이언트를 만들고 사용하는 것은 Google을 통한 구독을 시작한 후 구독을 시작하는 게시에만 사용할 수 있습니다.

테스트

구독 연결의 클라이언트 측 구현을 테스트하려면 승인된 자바스크립트 출처가 있는 서버에서 코드를 실행해야 합니다.

1. 프로덕션 용도로 승인된 출처는 구성된 OAuth 클라이언트 또는 게시자 센터 내 게시 설정의 확인된 도메인 목록에서 가져올 수 있습니다.
2. 개발 또는 스테이징에서 검증할 수 없는 도메인 (예: localhost 또는 비공개 서버)을 사용하는 경우 도메인이 구성된 OAuth 클라이언트에 나열되어야 합니다.

참고: OAuth 클라이언트의 허용된 출처 목록에 도메인을 추가하는 데 30분 이상 걸릴 수 있습니다.

핵심사항: 동일한 구독 계정으로 계속 테스트하려면 Google의 내 계정 페이지를 사용하여 계정을 수동으로 연결 해제할 수 있습니다.

오류 문제 해결

클라이언트 측 자바스크립트를 테스트할 때 가장 일반적인 문제는 자바스크립트를 실행하려고 할 때 403 - Not Authorized 오류가 발생하는 것입니다. 이 문제를 해결하려면 게시자 센터의 검증된 도메인에서 자바스크립트를 실행하거나 연결된 OAuth 클라이언트의 승인된 js 출처에 있는 호스트에서 코드를 실행해야 합니다.