Skip to content

랜딩 페이지 개인화

랜딩 페이지에서 Liquid 개인화를 사용하여 고객 프로필 데이터로 콘텐츠를 동적으로 맞춤 설정할 수 있습니다. 예를 들어, 여러 정적 랜딩 페이지를 관리하지 않고도 다양한 사용자 속성에 따라 헤드라인을 개인화할 수 있습니다.

Liquid 삽입

드래그 앤 드롭 에디터에서 에디터 내부와 오른쪽 패널의 페이지 또는 블록 설정 모두에서 Liquid 개인화를 삽입할 수 있습니다. Liquid 구현에 대한 자세한 내용은 전용 Liquid 설명서를 참조하세요.

Liquid 개인화가 추가된 랜딩 페이지 에디터.

미리보기 및 테스트

에디터에서 랜딩 페이지를 미리볼 때 임의 사용자, 기존 사용자 또는 커스텀 사용자로 페이지를 볼 수 있습니다.

그러나 데이터 테이블이나 랜딩 페이지 세부 정보 페이지에서 랜딩 페이지를 미리볼 때는 임의 사용자로만 볼 수 있습니다.

개인화 고려 사항

개인화된 랜딩 페이지의 최적 성능을 유지하려면 다음 크기 제한에 유의하세요.

  • 랜딩 페이지 저장: 크기가 500 KB를 초과하면 페이지가 크기 제한을 초과했으며 게시가 불가능할 수 있다는 경고 메시지가 표시될 수 있습니다.
  • Liquid 개인화를 사용한 렌더링: 총 크기가 1 MB를 초과하면 안 됩니다. 그렇지 않으면 Braze에 의해 페이지가 자동으로 게시 취소될 수 있습니다.

랜딩 페이지 게시 취소 방지

페이지가 이러한 크기 제한을 초과하면 제한을 계속 초과할 경우 게시 취소될 수 있다는 이메일을 받게 됩니다. 임계값에 도달하면 페이지가 자동으로 게시 취소되며 알림을 받게 됩니다.

페이지가 크기 제한을 초과하거나 느린 로드 시간을 경험하지 않도록 하려면 다음과 같은 Liquid 개인화를 사용하세요.

  • 대규모 데이터 세트를 지속적으로 반복하거나 참조하지 않습니다.
  • Liquid 블록 내에서 광범위한 수학적 또는 조건 로직에 의존하지 않습니다.

또한 대용량 스크립트, 스타일시트 및 base64 인코딩된 자산을 랜딩 페이지 코드에 직접 삽입하지 마세요. 이러한 인라인 자산은 페이지 크기 제한에 포함되며 렌더링 속도를 저하시킬 수 있습니다. 대신 글꼴, 이미지, 스타일시트 및 스크립트를 미디어 라이브러리에 업로드하세요. 미디어 라이브러리에서 제공되는 자산은 Braze의 CDN에서 호스팅되므로 Liquid 렌더링을 위해 처리되지 않으며 페이지 크기 제한에 포함되지 않습니다.

식별된 사용자와 익명 사용자를 위한 Liquid 사용

Liquid는 식별된 사용자와 익명 방문자 모두를 위해 랜딩 페이지 경험을 맞춤 설정할 수 있습니다.

  • 식별된 사용자: Braze 메시지에서 랜딩 페이지로 링크하고 랜딩 페이지 Liquid 태그를 포함하세요. 이렇게 하면 사용자가 Braze 프로필과 연결되어 페이지 경험이 개인화됩니다.
  • 익명 방문자: 임의 숫자나 시간대별 인사말과 같은 상황별, 비프로필 기반 콘텐츠에 Liquid를 사용하세요.

커스텀 코드로 외부 데이터 가져오기

Custom Code 블록을 사용하여 외부 엔드포인트에서 데이터를 가져와 랜딩 페이지에 표시할 수 있습니다. 이 방식은 클라이언트 측(사용자의 브라우저)에서 요청을 수행하므로 서버 측 렌더링 지연 없이 페이지가 빠르게 로드됩니다.

사용 사례

이 패턴은 Braze에 저장되지 않은 사용자별 데이터를 표시해야 할 때 유용합니다. 예를 들어 실시간 재고, 개인화된 추천 또는 조직이 별도 시스템에서 관리하는 기타 데이터가 있습니다.

구현 예시

이 예시는 외부 API에서 사용자 데이터를 가져오는 방법을 보여줍니다. API 엔드포인트를 자체 보안 엔드포인트로 교체하고 안전한 식별자를 사용하세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<script>
window.onload = () => {
  // Use Liquid to template the user's external ID
  const userId = "{{${user_id}}}";

  const loadUserData = async () => {
    try {
      // Replace with your own secure API endpoint
      const response = await fetch(`https://your-api.example.com/user/${userId}`);

      if (!response.ok) {
        throw new Error('Failed to load data');
      }

      const data = await response.json();

      // Update the page with the fetched data
      document.querySelector("#user-data").textContent = JSON.stringify(data, null, 2);
      document.querySelector("#user-name").textContent = data.name || "User";
    } catch (error) {
      // Handle errors gracefully
      document.querySelector("#user-data").textContent = "Unable to load data at this time.";
    }
  };

  loadUserData();
};
</script>

<!-- Display area for fetched data -->
<p>Welcome, <span id="user-name">Loading...</span></p>
<pre id="user-data">Loading your information...</pre>

고려 사항

랜딩 페이지에서 외부 데이터를 가져올 때 다음 사항을 고려하세요.

  • 로딩 상태: 엔드포인트가 응답할 때까지 사용자에게 플레이스홀더 텍스트가 표시됩니다. 로딩 인디케이터나 스켈레톤 화면을 추가하는 것을 고려하세요.
  • 오류 처리: 엔드포인트가 실패하거나 응답이 느리면 페이지가 깨져 보일 수 있습니다. 적절한 오류 메시지와 대체 콘텐츠를 구현하세요.
  • 성능: 페이지는 즉시 로드되지만 데이터는 외부 요청이 완료된 후에 표시됩니다. 최상의 사용자 경험을 위해 API 응답을 빠르게 유지하세요.
  • 보안: API 엔드포인트가 식별자를 검증하고 사용자가 볼 수 있도록 승인된 데이터만 반환하는지 확인하세요. 남용을 방지하기 위해 사용량 제한을 구현하세요. 안전한 식별자 선택에 대한 지침은 사용자 ID 명명 모범 사례를 참조하세요.

대체 페이지

사용자가 게시 취소된 페이지에 접근하려고 하면 현재 페이지를 로드할 수 없다는 메시지가 표시됩니다. 페이지가 게시 취소된 이유는 다음과 같습니다.

  • 긴 렌더링 시간을 유발할 수 있는 복잡하거나 손상된 Liquid
  • 사용자 네트워크 문제
  • 최대 랜딩 페이지 크기 제한 초과
New Stuff!