Contentful과 함께 Split을 사용하는 가장 좋은 방법

다음 게시물은 이전에 Split의 솔루션 엔지니어인 David Martin이 자신의 개인 블로그 채널에 게시한 것입니다.

Split은 최고의 기능 제공 플랫폼입니다. Contentful은 인기 있는 헤드리스 콘텐츠 관리 시스템입니다. 고객은 분명히 두 제품을 결합하기를 원합니다. Split은 제어된 릴리스 또는 실험을 위한 기능 플래그를 구현할 수 있으며 Contentful은 페이지에 올바른 콘텐츠를 제공합니다.

"API를 사용하세요, 루크"

Contentful은 콘텐츠를 페이지에 전달하기 위한 API를 제공합니다. 이 문서는 Contentful Javascript API 에서 작동합니다. Split에는 Javascript SDK도 있습니다. PHP, Android, iOS, Java, Python, Ruby 또는 .NET에서 모두 코딩할 수도 있습니다.

앞을 내다보고 싶다면 full example HTML/js for this article 을 확인할 수 있습니다.

API 및 SDK 초기화

먼저 API와 SDK를 포함합니다.

<!-- wp:paragraph -->
<p>&lt;script src="https://cdn.jsdelivr.net/npm/contentful@latest/dist/contentful.browser.min.js"&gt;&lt;/script&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;script src="//cdn.split.io/sdk/split-10.19.0.min.js"&gt;&lt;/script&gt;</p>
<!-- /wp:paragraph -->

이전 섹션의 API 및 SDK 설명서 링크를 방문하여 최신 링크 및 버전을 얻을 수 있습니다.

Contentful은 간단하게 초기화됩니다.

var client = contentful.createClient({

space: ‘<your contentful space>’,

accessToken: ‘<your contentful access token>’,

});

Contentful 콘솔에서 공간과 액세스 토큰을 가져와야 합니다.

분할 초기화에도 키가 필요합니다.

<!-- wp:paragraph -->
<p>var factory = splitio({</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>core: {</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>authorizationKey: '&lt;your split client sdk key&gt;',</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>key: 'user_id' // unique identifier for your user</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>},</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>schedule: {</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>eventsPushRate: 5</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>});</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>var splitClient = factory.client();</p>
<!-- /wp:paragraph -->

권한 부여 키는 분할 기능 플래그 규칙 구성 화면의 구문 버튼을 사용하여 가장 쉽게 얻을 수 있습니다. 이 튜토리얼에서는 기능 플래그 생성 및 구성에 대해 자세히 다루지 않지만 코칭을 위해 항상 할 수 있습니다visit Split’s help pages.

위의 예에서 사용자의 실제 사용자 ID를 자리 표시자 'user_id'로 대체합니다.

factory.client()를 호출하면 Split이 기능 플래그 다운로드를 시작합니다.

나는 "그려!" 카우보이!

splitClient.on(splitClient.Event.SDK_READY, function() {
    console.log('SDK_READY');
    draw();
});

splitClient.on(splitClient.Event.SDK_UPDATE, function() {
    console.log('SDK_UPDATE');
    draw();
});

Contentful은 어린이와 성인의 두 저자 목록을 유지하고 있습니다. 먼저 Split은 getTreatment를 호출하여 사용자가 이 기능 플래그 'contentful_books'에서 "on"또는 "off"처리를 받는지 결정합니다. 기능 플래그는 하나를 제공하거나 무작위로 답변을 제공하도록 설정할 수 있습니다(아마도 A/B 테스트의 경우).

Split이 제공할 처리를 결정하면 if-then-else 문은 수행할 Contentful API 호출을 결정합니다. 한 호출은 아동 도서 작가를 끌어오고 다른 하나는 성인 도서 저자를 끌어옵니다.

끝에 있는 else 문은 제어 블록의 예입니다. 제어 블록을 구현하는 올바른 방법은 없습니다. Split에 도달할 수 없을 때의 기본 동작입니다. 이 경우 어린이 고딕 작가 목록을 전달합니다(Eddings는 자격이 없을 수 있지만 아이디어는 얻습니다).

목록을 어떻게 동적으로 업데이트합니까?

약간의 DOM 조작으로…

function drawBooks(list) {
    let options = '<optgroup>';
    for(const option of list) {
        options += '<option>' + option + '</option>';
    }
    options += '</optgroup>';

분할 실행은 어떻게 A/B 테스트를 수행할 수 있습니까?

function clickRead() {
    const e = document.getElementById('books');
    const author = e.options[e.selectedIndex].text;
    const properties = {
        author: author
    };
    const result = splitClient.track('user', 'readClick', 0, properties);
    console.log(result);
}

전체 예제에는 몇 가지 추가 속성 필드가 있습니다. 단순화를 위해 이 예제에서는 작성자 속성만 남겼습니다.

읽기 버튼을 클릭하면 이 클릭 핸들러가 선택한 작성자의 이름을 포함하는 속성을 생성합니다. 그런 다음 속성은 Split 클라우드에 대한 추적 호출을 통해 전송됩니다. Split SDK는 이벤트 버퍼링 및 전송을 처리합니다.

Split은 사용자가 보고 있는 작성자를 알고 있습니다(draw()에서 getTreatment가 호출될 때 생성된 Split 인상 사용). 어린이 대 성인 저자의 클릭 수를 집계하고 저자에 대한 집계를 개별적으로 생성할 수 있습니다.

아래 차트에서 아동 작가의 클릭 수와 성인 작가의 클릭 수를 비교했습니다. 초기 갭은 좁은 여백이 됩니다. 이 경우 Split은 통계적으로 유의미한 차이를 찾지 못할 것입니다. 어린이 고딕 작가를 비교했다면 어떨까요? A/B/C 테스트를 위한 작업처럼 들립니다!