ข้ามไปยังเนื้อหา
เอกสารสำหรับนักพัฒนาการสนับสนุน ขอสาธิต เข้าสู่ระบบ
Pushwoosh.com

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

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

ตัวอย่างเช่น ลองนึกภาพผู้ใช้เข้าชม landing page ของ Marketo ของคุณแต่ไม่ได้ดำเนินการใดๆ ที่นั่น คุณจะสามารถเข้าถึงผู้ใช้รายนี้ด้วย web push notification เพื่อเป็นการเตือนความจำได้ web push notification นี้ยังสามารถปรับแต่งให้เป็นส่วนตัวด้วยข้อมูล 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 ไปยังโฟลเดอร์นี้

การอัปโหลดไฟล์ manifest.json และ service worker ไปยัง Marketo

2. การสร้างหน้าสมัครรับ push

Anchor link to

ดังที่ได้กล่าวไว้ข้างต้น Marketo สามารถอัปโหลดไฟล์ไปยังโฟลเดอร์ทรัพยากรเท่านั้น ซึ่งแตกต่างจากขอบเขตของ landing pages ตัวอย่างเช่น หากคุณคลิกที่ไฟล์ใดๆ ที่อัปโหลดข้างต้นและตรวจสอบ URL ของไฟล์ คุณจะเห็นบางอย่างเช่น “https://your-host-name.com/rs/765-IWA-819/images/pushwoosh-service-worker.js” อย่างไรก็ตาม หากคุณคลิกที่ landing page และตรวจสอบ URL ของมัน จะเป็นบางอย่างเช่น: “https://your-host-name.com/lp/765-IWA-819/pushwoosh-landing.html” สังเกตส่วน “lp” ใน URL ของ landing pages และ “rs” ใน URL ของสคริปต์

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

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

รับไฟล์ 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 ของคุณ

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

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

ไฟล์ที่อัปโหลดไปยังโฟลเดอร์ Images and Files ของ Marketo

3. การสร้าง landing page พร้อมการสมัครรับ push

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 ของคุณ

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

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

การสร้าง pushwoosh-template ในส่วน Templates ของ Marketo

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

การสร้าง landing page ใหม่โดยใช้เทมเพลต pushwoosh

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

เราจะใช้ URL เดียวกันกับ landing page

<a href="https://na-ab24.marketo.com/lp/765-IWA-819/pushwoosh-landing.html">Send me an Offer!</a>
Landing page พร้อมลิงก์สำหรับข้อเสนอ push notification

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": "We've got a new offer for you!",
                "users" : ["{{lead.Id:default="ABCD-EFGH"}}"]
            }]
        }
    }

โปรดทราบว่าเราใช้ Marketo Lead ID เพื่ออ้างอิงผู้ใช้ใน Pushwoosh ดูเพิ่มเติมเกี่ยวกับ push notifications ที่เน้นผู้ใช้ ที่นี่

การกำหนดค่า Webhook ในส่วน Admin ของ Marketo

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

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

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

Anchor link to

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

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

การกำหนดค่าทริกเกอร์สำหรับเหตุการณ์การคลิกของผู้ใช้ในแคมเปญ Marketo

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

การเลือก Webhook send_push ในส่วน flow ของแคมเปญ
  • ตอนนี้เปิด URL ของ landing page
  • คลิกที่ปุ่ม “Yes, I Want” เพื่อเปิดกล่องโต้ตอบการสมัครรับ push
  • สมัครรับ push notifications
  • คลิกที่ลิงก์ “Send me an Offer!”

คุณได้รับ push notification อัตโนมัติจาก Marketo แล้ว!

ส่ง push notification อัตโนมัติจาก Marketo สำเร็จแล้ว