ข้ามไปยังเนื้อหา

การผสานรวมกับ Marketo

คู่มือนี้จะอธิบายวิธีผสานรวม Marketo เข้ากับ Pushwoosh คุณจะสามารถใช้ช่องทางการสื่อสารผ่าน Web Push Notifications เป็นส่วนหนึ่งของแคมเปญการตลาดของคุณกับ Marketo ได้

ตัวอย่างเช่น ลองนึกภาพผู้ใช้เข้าชมหน้าแลนดิ้งเพจ Marketo ของคุณ แต่ไม่ได้ดำเนินการใดๆ คุณจะสามารถเข้าถึงผู้ใช้นี้ได้ด้วยการแจ้งเตือนแบบพุชบนเว็บเพื่อเป็นการเตือนความจำ การแจ้งเตือนแบบพุชบนเว็บนี้ยังสามารถปรับแต่งให้เหมาะกับแต่ละบุคคลได้ด้วยข้อมูล Marketo ที่บันทึกไว้สำหรับผู้ใช้นี้ เพื่อการมีส่วนร่วมสูงสุด!

1. การสร้าง Service Worker

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 ไปยังโฟลเดอร์นี้

2. การสร้างหน้าสมัครรับการแจ้งเตือนพุช

Anchor link to

ตามที่กล่าวไว้ข้างต้น Marketo สามารถอัปโหลดไฟล์ไปยังโฟลเดอร์ทรัพยากรเท่านั้น ซึ่งแตกต่างจากขอบเขต (scope) ของหน้าแลนดิ้งเพจ
ตัวอย่างเช่น หากคุณคลิกที่ไฟล์ใดๆ ที่อัปโหลดไว้ข้างต้นและตรวจสอบ 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
โปรดสังเกตส่วน “lp” ใน URL ของหน้าแลนดิ้งเพจ และ “rs” ใน URL ของสคริปต์

นั่นหมายความว่าเราต้องลงทะเบียนสคริปต์ Service Worker ของเราในขอบเขต (scope) ที่แตกต่างจากหน้าแลนดิ้งเพจ

เพื่อให้บรรลุเป้าหมายนี้ เราจะอัปโหลดหน้าสมัครรับการแจ้งเตือนพุชพิเศษไปยังโฟลเดอร์ทรัพยากรของ Marketo แล้วเปิดจากหน้าแลนดิ้งเพจ มาสร้างหน้าสมัครรับข้อมูลนี้กัน

รับไฟล์ push-subscription.html จาก gist ต่อไปนี้:
https://gist.github.com/shaders/2b518e3acaf9b4712d5260205243343d#file-push-subscription-html

เปิดไฟล์และแก้ไขบรรทัดต่อไปนี้:

  • บรรทัดที่ 8 - เปลี่ยนลิงก์เป็น URL ของไฟล์ manifest.json ที่อัปโหลดในขั้นตอนก่อนหน้า
  • บรรทัดที่ 24 - เปลี่ยนค่าพารามิเตอร์ scope เป็น URL ของโฟลเดอร์ทรัพยากรของคุณ (นี่คือโฟลเดอร์ที่ manifest.json อยู่)
  • บรรทัดที่ 20 - เปลี่ยนค่าพารามิเตอร์ applicationCode เป็น Pushwoosh App Id ของคุณ

โปรดทราบว่าสคริปต์นี้ยังจับคู่การแจ้งเตือนพุชที่เน้นผู้ใช้เป็นศูนย์กลางของ Pushwoosh กับ Lead Identifier ของ Marketo: userId:leadId (บรรทัดที่ 26)

อัปโหลดไฟล์ผลลัพธ์ไปยังโฟลเดอร์ “Images and Files” ตอนนี้คุณควรมีไฟล์เหล่านี้อยู่ในโฟลเดอร์:

3. การสร้างหน้าแลนดิ้งเพจพร้อมการสมัครรับการแจ้งเตือนพุช

Anchor link to

รับไฟล์ pushwoosh-template.html จาก gist ต่อไปนี้:
https://gist.github.com/shaders/2b518e3acaf9b4712d5260205243343d#file-pushwoosh-template-html

เปิดไฟล์และแก้ไขบรรทัดต่อไปนี้:

  • บรรทัดที่ 47 - เปลี่ยนค่าพารามิเตอร์ scope เป็น URL ของโฟลเดอร์ทรัพยากรของคุณ
  • บรรทัดที่ 65 - เปลี่ยนลิงก์เป็น URL ของไฟล์ push-subscription.html ที่อัปโหลดในขั้นตอนก่อนหน้า
  • บรรทัดที่ 43 - เปลี่ยนค่าพารามิเตอร์ applicationCode เป็น Pushwoosh App Id ของคุณ

สคริปต์นี้เช่นเดียวกับสคริปต์ก่อนหน้า ยังจับคู่การแจ้งเตือนพุชที่เน้นผู้ใช้เป็นศูนย์กลางของ Pushwoosh กับ Lead Identifier ของ Marketo: userId:leadId (บรรทัดที่ 49)

ตอนนี้ไปที่ส่วน “Templates” ของหน้าแลนดิ้งเพจ Marketo ของคุณ สร้างเทมเพลต (ในภาพหน้าจอด้านล่างเรียกว่า “pushwoosh-template”) และคัดลอก-วางเนื้อหาของไฟล์ผลลัพธ์ที่นั่น

ตอนนี้เรามาสร้างหน้าแลนดิ้งเพจใหม่โดยใช้เทมเพลตนี้กัน

ในตัวอย่างของเรา เพื่อแสดงความสามารถของการผสานรวม Pushwoosh กับระบบอัตโนมัติของแคมเปญ Marketo เพื่อความเรียบง่าย เราจะเพิ่มลิงก์ง่ายๆ ไปยังหน้าแลนดิ้งเพจ เราจะสร้างแคมเปญที่จะทริกเกอร์การแจ้งเตือนพุชส่วนบุคคลเมื่อผู้ใช้คลิกลิงก์นี้

เราจะใช้ URL เดียวกันกับหน้าแลนดิ้งเพจ

<a href="https://na-ab24.marketo.com/lp/765-IWA-819/pushwoosh-landing.html">ส่งข้อเสนอให้ฉัน!</a>

4. การสร้าง Pushwoosh Webhook

Anchor link to

ไปที่ส่วน “Admin” ของ Marketo และสร้าง Webhook ใหม่ด้วยพารามิเตอร์ต่อไปนี้:

วางโค้ดต่อไปนี้เป็นเทมเพลต

{
"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"}}"]
}]
}
}

โปรดทราบว่าเราใช้ Marketo Lead ID เพื่ออ้างอิงถึงผู้ใช้ใน Pushwoosh ดูเพิ่มเติมเกี่ยวกับการแจ้งเตือนพุชที่เน้นผู้ใช้เป็นศูนย์กลางได้ที่นี่

ในตัวอย่างที่ง่ายมากของเรา เราใช้ข้อความพุชแบบคงที่ อย่างไรก็ตาม คุณสามารถใช้ฟังก์ชันการทำงานทั้งหมดของ /createMessage ได้

หากต้องการปรับแต่งการแจ้งเตือนพุชให้เหมาะกับแต่ละบุคคล คุณสามารถใช้ Preset จาก Pushwoosh และส่งค่าจาก Marketo ในพารามิเตอร์ “dynamic_content_placeholders” ของการเรียก /createMessage เพื่อปรับแต่งพุช

5. การผสานรวมกับแคมเปญอัตโนมัติของ Marketo

Anchor link to

ไปที่ส่วน “Marketing Activities” ของ Marketo และสร้างแคมเปญ

สำหรับตัวอย่างของเรา เราจะทริกเกอร์แคมเปญเมื่อผู้ใช้คลิกลิงก์ (ลิงก์ที่เราสร้างไว้เมื่อสองขั้นตอนก่อนหน้านี้) บนหน้าแลนดิ้งเพจของเรา

b. เลือก Webhook “send_push” ในส่วน “Flow”

  • ตอนนี้เปิด URL ของหน้าแลนดิ้งเพจ
  • คลิกที่ปุ่ม “Yes, I Want” เพื่อเปิดกล่องโต้ตอบการสมัครรับการแจ้งเตือนพุช
  • สมัครรับการแจ้งเตือนพุช
  • คลิกที่ลิงก์ “Send me an Offer!”

คุณได้รับการแจ้งเตือนพุชอัตโนมัติจาก Marketo แล้ว!