Magento PWA용 Clerk.io 구현 방법: 단계별 가이드

게시 됨: 2023-05-25

Clerk.io를 Magento Progressive Web App(PWA)과 통합하면 맞춤형 권장 사항을 제공하고 판매를 효과적으로 추적할 수 있습니다. 이 블로그 게시물은 Magento PWA용 Clerk.io를 원활하게 구현하여 고객 참여를 강화하고 전환율을 높일 수 있는 단계를 안내합니다.

Magento PWA와 Clerk.io 통합이 필요한 이유는 무엇입니까?

Clerk.io를 Magento PWA와 통합하면 온라인 상점에 몇 가지 주요 이점이 제공됩니다.

맞춤형 추천: Clerk.io는 장바구니 페이지, 카테고리 페이지 및 제품 페이지에 완벽하게 통합될 수 있는 강력한 추천 위젯을 제공합니다. 이러한 위젯을 사용하면 고객에게 개인화된 제품 권장 사항을 표시하여 교차 판매 및 상향 판매 기회를 강화할 수 있습니다.
향상된 판매 추적: Clerk.io는 강력한 판매 추적 기능을 제공하므로 고객 행동에 대한 귀중한 통찰력을 수집하고 마케팅 캠페인의 효과를 측정할 수 있습니다. 판매 데이터를 추적하여 전략을 최적화하고 매출 성장을 촉진할 수 있습니다.

통합을 위한 주요 기능

구현 프로세스에 들어가기 전에 Magento PWA와의 원활한 통합을 위해 Clerk.io가 제공하는 주요 기능을 살펴보겠습니다.

권장 사항 위젯: 권장 사항 위젯을 사용하면 개인화된 제품 권장 사항을 동적으로 표시할 수 있습니다. 카트, 카테고리 및 제품 페이지에 구현하여 고객 참여 및 전환을 유도하십시오.
스토어 데이터 동기화: Clerk.io는 Magento PWA가 원활하게 연결되도록 동기화 프로세스를 제공하여 플랫폼이 관련 데이터를 효과적으로 검색하고 활용할 수 있도록 합니다.

Magento PWA용 Clerk.io 구현을 위한 7단계

1. 사무원 계정 생성 및 로그인

Clerk.io 계정을 만들고 Clerk.io 대시보드에 로그인하여 시작합니다.

2. 매장 추가

my.clerk.io에 로그인한 후 첫 번째 단계는 상점을 추가하는 것입니다.

웹샵의 이름과 도메인을 제공하십시오
플랫폼으로 Magento 2 선택
통화 선택
계속하려면 새 상점 추가를 클릭하십시오.

3. 확장 설치 및 구성

Clerk.io를 Magento PWA와 통합하려면 Clerk.io 확장을 설치하고 구성해야 합니다. 다음과 같이하세요:

터미널에서 다음 명령을 실행합니다.

 작곡가는 clerk/magento2를 필요로 합니다.
php bin/magento 모듈: Clerk_Clerk 활성화
php bin/magento 설정:업그레이드
php bin/magento 설정:di:컴파일

확장 프로그램이 설치된 후 Store → Configuration → Clerk 로 이동하여 Clerk.io API 키를 입력하여 구성합니다.

4. 스토어 동기화

확장을 구성한 후 Magento 스토어를 Clerk.io와 동기화하는 것이 중요합니다.

Clerk.io 대시보드의 설정 가이드로 돌아가서 데이터 동기화를 클릭합니다.
상점 세부 정보를 입력하고 동기화 시작을 클릭하여 동기화 프로세스를 시작하십시오. 이 단계는 매장의 데이터가 Clerk.io와 연결되어 있는지 확인합니다.

5. 권장 사항 위젯 설정 및 구성

Magento 2에 대한 권장 사항 시작하기를 참조하여 다음을 수행하십시오.

추천 슬라이더 만들기

위젯 콘텐츠 정의

Magento 백엔드를 통해 콘텐츠 표시 구성

6. 권장 사항 위젯을 프로그래밍 방식으로 표시

장바구니, 카테고리 및 제품 페이지에 추천 위젯을 프로그래밍 방식으로 표시하려면 다음 단계를 수행해야 합니다.

Magento 백엔드에서 위젯 콘텐츠 구성을 검색하는 모듈을 만듭니다.

di.xml 파일에서 구성 변수를 정의합니다.
API 검색에 필요한 필드가 포함된 schema.graphqls 파일을 생성합니다.

스토어 구성 데이터를 쿼리하고 위젯 콘텐츠를 가져오도록 PWA용 애드온을 개발합니다.

상점 구성 데이터를 검색하기 위한 GraphQl 쿼리.
위젯 콘텐츠 데이터를 가져오기 위해 Clerk API 끝점 https://api.clerk.io/v2?payload= 에 쿼리하는 일부 사용자 지정 후크.
사용자 지정 후크를 호출하고 구성에 따라 콘텐츠 데이터를 삽입하는 프로그래밍 방식으로 대상 지정 가능한 인터셉터가 있는 PWA 핵심 구성 요소의 확장된 구성 요소입니다.
현재 테마와 일치하는 일부 스타일시트.

관련 코드:

 <!-- di.xml 파일에서 구성 변수를 정의합니다. -->
<유형 이름="Magento\StoreGraphQl\Model\Resolver\Store\StoreConfigDataProvider">
        <인수>
            <인수 이름="extendedConfigData" xsi:type="배열">
                <item name="clerk_general_public_key" xsi:type="string">서기/일반/public_key</item>
                <item name="clerk_category_enabled" xsi:type="string">서기/범주/활성화</item>
                <item name="clerk_category_content" xsi:type="string">서기/카테고리/콘텐츠</item>
                <item name="clerk_product_enabled" xsi:type="string">사원/제품/활성화</item>
                <item name="clerk_product_content" xsi:type="string">서기/제품/콘텐츠</item>
                <item name="clerk_cart_enabled" xsi:type="string">서기/장바구니/활성화</item>
                <item name="clerk_cart_content" xsi:type="string">서기/장바구니/내용물</item>
            </인수>
        </인수>
    </타입>

 //schema.grapqls 파일 생성
유형 StoreConfig {
    clerk_general_public_key: 문자열 @doc(설명: "서기 공개 키")
    clerk_category_enabled: 부울 @doc(description: "사원 카테고리 콘텐츠 상태")
    clerk_category_content: String @doc(description: "서기 범주 콘텐츠 클래스")
    clerk_product_enabled: 부울 @doc(설명: "점원 제품 콘텐츠 상태")
    clerk_product_content: 문자열 @doc(설명: "점원 제품 콘텐츠 클래스")
    clerk_cart_enabled: 부울 @doc(설명: "점원 카트 콘텐츠 상태")
    clerk_cart_content: 문자열 @doc(설명: "점원 카트 내용 상태")
}

 //매장 구성 데이터를 검색하기 위한 GraphQl 쿼리입니다.
내보내기 const GET_STORE_CONFIG_DATA = gql`
    쿼리 getStoreConfigClerk {
        # eslint-disable-next-line @graphql-eslint/require-id-when-available
        storeConfig {
            store_code
            clerk_general_public_key
            clerk_category_enabled
            clerk_category_content
            clerk_product_enabled
            clerk_product_content
            clerk_cart_enabled
            clerk_cart_content
        }
    }
`;

7. 프로그래밍 방식으로 판매 추적 활성화

아래 단계에 따라 Magento PWA에서 Clerk.io로 판매 추적을 구현하려면:

핵심 Venia 테마 파일을 확장하고 Clerk.io의 엔드포인트 https://api.clerk.io/v2/log/sale 에 대한 판매를 추적하기 위한 API 호출을 주문 후 점원에게 처리하기 위한 구성 요소 및 탈론을 생성합니다.
SagePay 및 Stripe와 같은 결제 방법과 관련된 테마 파일을 확장하여 판매 추적을 통합합니다.
@magento/peregrine/lib/store/actions/checkout/asyncActions.js 확장하여 필요한 기능을 통합합니다.

다음 단계를 따르면 Clerk.io를 Magento PWA와 성공적으로 통합하고 강력한 기능을 활용하여 고객의 쇼핑 경험을 향상시킬 수 있습니다.

쇼케이스 예

작동 중인 Clerk.io 통합의 시각적 표현을 보려면 데모 사이트를 방문하세요.

카테고리 페이지

제품 페이지

장바구니 페이지

판매 추적

마지막 말

Clerk.io를 Magento PWA와 통합하면 온라인 상점에 강력한 이점이 제공됩니다. 제공된 단계를 따르면 Clerk.io를 원활하게 구현하고 개인화된 추천 및 효과적인 판매 추적을 즐길 수 있습니다.

통합 프로세스 중에 문제가 발생하거나 전문가가 처리하는 것을 선호하는 경우 Tigren 팀이 도와드립니다. 5년 이상의 Magento PWA 개발 경험을 바탕으로 심층적인 지식과 전문성을 갖추고 있습니다. 처음부터 강력한 Magento PWA를 구축해야 하는지, Magento PWA 테마를 활용해야 하는지 또는 타사 소프트웨어와 통합해야 하는지 여부에 관계없이 당사 팀은 특정 요구 사항을 충족하는 맞춤형 솔루션을 제공할 준비가 되어 있습니다.

Magento PWA의 잠재력을 극대화하고 Clerk.io와의 원활한 통합을 보장하는 전문가 지원을 받으려면 주저하지 말고 Tigren 팀에 연락하십시오.

관련 게시물:

Magento PWA 콘텐츠 스테이징에서 캠페인을 미리 볼 수 없습니까? 문제를 해결하는 방법은 다음과 같습니다.