콘텐츠로 건너뛰기
개발자 문서지원 데모 요청 로그인
Pushwoosh.com

Marketo 통합

이 가이드는 Marketo를 Pushwoosh와 통합하는 방법을 설명합니다. Marketo를 사용한 마케팅 캠페인의 일부로 웹 푸시 알림 커뮤니케이션 채널을 사용할 수 있습니다.

예를 들어, 사용자가 Marketo 랜딩 페이지를 방문했지만 아무런 조치를 취하지 않았다고 상상해 보세요. 이 사용자에게 웹 푸시 알림을 리마인더로 보낼 수 있습니다. 이 웹 푸시 알림은 최대의 참여를 위해 이 사용자에 대해 기록된 Marketo 데이터로 개인화할 수도 있습니다!

1. 서비스 워커 생성하기

Anchor link to

이 가이드를 따르고 사전 요구 사항 단계와 1 - 2.2 단계를 수행하세요.

위 단계를 완료하면 manifest.json 및 pushwoosh-service-worker.js 파일이 준비되어 있어야 합니다.

Marketo Design Studio로 전환합니다. Marketo는 “Images and Files”라는 리소스 폴더에만 파일을 업로드할 수 있습니다. manifest.json 및 pushwoosh-service-worker.js를 이 폴더에 업로드하세요.

manifest.json 및 서비스 워커 파일을 Marketo에 업로드하기

2. 푸시 구독 페이지 생성하기

Anchor link to

위에서 언급했듯이 Marketo는 랜딩 페이지의 범위와 다른 리소스 폴더에만 파일을 업로드할 수 있습니다. 예를 들어, 위에 업로드된 파일을 클릭하고 URL을 확인하면 “https://your-host-name.com/rs/765-IWA-819/images/pushwoosh-service-worker.js”와 같은 것을 볼 수 있습니다. 하지만 랜딩 페이지를 클릭하고 URL을 확인하면 “https://your-host-name.com/lp/765-IWA-819/pushwoosh-landing.html”과 같을 것입니다. 랜딩 페이지 URL의 “lp” 부분과 스크립트 URL의 “rs” 부분을 주목하세요.

이는 랜딩 페이지와 다른 범위에서 Service Worker 스크립트를 등록해야 함을 의미합니다.

이를 위해 특별한 푸시 구독 페이지를 Marketo 리소스 폴더에 업로드한 다음 랜딩 페이지에서 열 것입니다. 이 구독 페이지를 만들어 보겠습니다.

다음 gist에서 push-subscription.html 파일을 가져옵니다: https://gist.github.com/shaders/2b518e3acaf9b4712d5260205243343d#file-push-subscription-html

파일을 열고 다음 줄을 변경하세요:

  • 8행 - 이전 단계에서 업로드한 manifest.json 파일의 URL로 링크를 변경합니다.
  • 24행 - scope 매개변수 값을 리소스 폴더의 URL로 변경합니다(이 폴더는 manifest.json이 있는 곳입니다).
  • 20행 - applicationCode 매개변수 값을 Pushwoosh 앱 ID로 변경합니다.

이 스크립트는 또한 Pushwoosh의 사용자 중심 푸시 알림을 Marketo의 리드 식별자와 매핑합니다: userId:leadId (26행)

결과 파일을 “Images and Files” 폴더에 업로드합니다. 이제 폴더에 다음 파일들이 있어야 합니다:

Marketo Images and Files 폴더에 업로드된 파일들

3. 푸시 구독 기능이 있는 랜딩 페이지 생성하기

Anchor link to

다음 gist에서 pushwoosh-template.html 파일을 가져옵니다: https://gist.github.com/shaders/2b518e3acaf9b4712d5260205243343d#file-pushwoosh-template-html

파일을 열고 다음 줄을 변경하세요:

  • 47행 - scope 매개변수 값을 리소스 폴더의 URL로 변경합니다.
  • 65행 - 이전 단계에서 업로드한 push-subscription.html 파일의 URL로 링크를 변경합니다.
  • 43행 - applicationCode 매개변수 값을 Pushwoosh 앱 ID로 변경합니다.

이 스크립트는 이전 스크립트와 마찬가지로 Pushwoosh의 사용자 중심 푸시 알림을 Marketo의 리드 식별자와 매핑합니다: userId:leadId (49행)

이제 Marketo 랜딩 페이지의 “Templates” 섹션으로 이동하여 템플릿(“pushwoosh-template”이라고 아래 스크린샷에서 부름)을 만들고 결과 파일의 내용을 거기에 복사-붙여넣기 하세요.

Marketo 템플릿 섹션에서 pushwoosh-template 생성하기

이제 이 템플릿을 기반으로 새 랜딩 페이지를 만들어 보겠습니다.

pushwoosh 템플릿을 기반으로 새 랜딩 페이지 생성하기

이 예제에서는 Pushwoosh와 Marketo 캠페인 자동화 통합의 기능을 보여주기 위해 간단하게 랜딩 페이지에 간단한 링크를 추가할 것입니다. 사용자가 이 링크를 클릭하면 개인화된 푸시 알림을 트리거하는 캠페인을 만들 것입니다.

랜딩 페이지와 동일한 URL을 사용할 것입니다.

<a href="https://na-ab24.marketo.com/lp/765-IWA-819/pushwoosh-landing.html">혜택 받기!</a>
푸시 알림 혜택 링크가 있는 랜딩 페이지

4. Pushwoosh 웹훅 생성하기

Anchor link to

Marketo의 “Admin” 섹션으로 이동하여 다음 매개변수로 새 웹훅을 만듭니다:

다음 코드를 템플릿으로 붙여넣으세요.

{
        "request": {
            "application": "ENTER_YOUR_PUSHWOOSH_APP_ID",
            "auth": "ENTER_YOUR_PUSHWOOSH_API_TOKEN_HERE",
            "notifications": [{
                "send_date": "now",
                "ignore_user_timezone": true,
                "content": "새로운 혜택이 도착했습니다!",
                "users" : ["{{lead.Id:default="ABCD-EFGH"}}"]
            }]
        }
    }

Pushwoosh에서 사용자를 참조하기 위해 Marketo 리드 ID를 사용합니다. 사용자 중심 푸시 알림에 대한 자세한 내용은 여기를 참조하세요.

Marketo 관리자 섹션의 웹훅 구성

이 간단한 예제에서는 정적 푸시 메시지를 사용합니다. 하지만 createMessage의 모든 기능을 사용할 수 있습니다.

푸시 알림을 개인화하려면 Pushwoosh의 Preset을 사용하고 Marketo의 값을 /createMessage 호출의 “dynamic_content_placeholders” 매개변수에 전달하여 푸시를 개인화할 수 있습니다.

5. Marketo 자동화 캠페인과 통합하기

Anchor link to

Marketo의 “Marketing Activities” 섹션으로 이동하여 캠페인을 만듭니다.

이 예제에서는 사용자가 랜딩 페이지의 링크(두 단계 전에 만든 링크)를 클릭할 때 캠페인을 트리거할 것입니다.

Marketo 캠페인에서 사용자 클릭 이벤트에 대한 트리거 구성

b. “Flow” 섹션에서 “send_push” 웹훅을 선택합니다.

캠페인 플로우 섹션에서 send_push 웹훅 선택하기
  • 이제 랜딩 페이지 URL을 엽니다.
  • “네, 원합니다” 버튼을 클릭하여 푸시 구독 대화 상자를 엽니다.
  • 푸시 알림을 구독합니다.
  • “혜택 받기!” 링크를 클릭합니다.

Marketo 자동화 푸시 알림을 받았습니다!

Marketo 자동화 푸시 알림이 성공적으로 전송됨