ผู้เขียน ร่วม : Asim Chatterjee

โพสต์นี้จะอธิบายวิธีที่Adobe Experience PlatformและAdobe Experience Cloudสามารถรวมเข้ากับแอปพลิเคชันมือถือ React Native และวิธีที่เราสามารถขับเคลื่อนการปรับให้เป็นส่วนตัวผ่านAdobe Targetบนแอปพลิเคชันและเปิดใช้งานAdobe Analytics เป็นแหล่งการรายงานสำหรับ Adobe Target (A4T )

การ ใช้งาน Adobe Experience Platformเพิ่มขึ้นอย่างมากเนื่องจากมีข้อเสนอและความสามารถมากมายโดยการจัดหาแพลตฟอร์มแบบเปิดที่ชาญฉลาดแบบเรียลไทม์ที่ช่วยแก้ปัญหาของลูกค้าโดยเร่งเวลาให้เกิดมูลค่า ฝ่ายไอทีและธุรกิจส่วนใหญ่มุ่งสู่เทคโนโลยี React Native ซึ่งช่วยให้สร้างแอปข้ามแพลตฟอร์มที่มีประสิทธิภาพซึ่งดูเป็นธรรมชาติทั้งหมด ง่าย และคุ้มค่า

สำหรับโพสต์นี้ เรากำลังทำตามขั้นตอนด้านล่าง:

• การสร้าง React Native App
• การติดตั้งAdobe Experience Platform Mobile SDKและแพ็คเกจที่จำเป็นในแอป
• การตั้งค่าสภาพแวดล้อม Adobe Experience Platform สำหรับการผสานรวมขั้นพื้นฐาน การสร้างกลุ่มสำหรับการปรับเปลี่ยนในแบบของคุณ และการเปิดใช้งานกลุ่มเหล่านั้นกับ Adobe Target
• ปรับแต่งประสบการณ์ผู้ใช้ให้เป็นส่วนตัวในแอพมือถือผ่าน Adobe Target และบันทึกเมตริกประสิทธิภาพใน Adobe Analytics

สร้างแอป React Native

บทความต่อไปนี้จะอธิบายวิธีสร้างแอปพลิเคชันมือถือ React Native อย่างง่าย:

https://reactnative.dev/docs/getting-started#interactive-examples

ติดตั้งแพ็คเกจ Adobe Experience Platform NPM

ตอนนี้ เราจำเป็นต้องติดตั้ง แพ็คเกจ Adobe Experience Platform NPM ในแอปพลิเคชันมือถือ สามารถติดตั้งได้จากคำสั่ง NPM:

npm install @adobe/react-native-aep{extension}

@adobe/react-native-aepcore
@adobe/react-native-aepuserprofile
@adobe/react-native-aepedge
@adobe/react-native-aepedgeidentity
@adobe/react-native-aepassurance
@adobe/react-native-aeptarget

ให้เราย้ายไป ที่ Adobe Experience Platformขั้นตอนแรกคือการสร้างสคีมาและชุดข้อมูลที่จะใช้ข้อมูลจากแพลตฟอร์ม Mobile App สำหรับกรณีการใช้งานนี้ เราจะสร้างสคีมาเหตุการณ์และจะสร้างชุดข้อมูลเพื่อจับคู่สิ่งนั้นกับสคีมาเหตุการณ์นี้ ข้อกำหนดในการติดตามจะเป็นการติดตามข้อมูลวงจรชีวิตที่จำกัด การโหลดหน้าจอและการติดตามข้อมูลเหตุการณ์การคลิก ดังนั้นเราจะออกแบบสคีมาตามนั้น ข้อมูลประจำตัวหลักและข้อมูลประจำตัวรองของเราจะถูกแมปกับ ECID และ ID อีเมลที่แฮชตามลำดับ เราจำเป็นต้องสร้างชุดข้อมูลและแมปกับสคีมาเหตุการณ์ที่เราเพิ่งสร้างขึ้น

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

สำหรับรายละเอียดเพิ่มเติมโปรดดูที่https://experienceleague.adobe.com/docs/experience-platform/xdm/schema/composition.html

การกำหนดค่าขอบ

Adobe Experience Platform Edge Networkเป็นเกตเวย์เดียวสำหรับการถ่ายโอนข้อมูลหลายรายการ เราใช้ Edge เพื่อส่งข้อมูลไปยังAdobe Experience Platform ในโพสต์นี้ เราจะมุ่งเน้นไปที่การรวมAdobe Experience Platformกับแพลตฟอร์ม React Native ซึ่งรวมถึงขั้นตอนมาตรฐานบางส่วน และคุณสามารถดูคำแนะนำโดยละเอียดได้ที่นี่: https://developer.adobe.com/client-sdks/documentation/

การกำหนดค่า DataStream & เปิดใช้งานการกำหนดค่า

จำเป็นต้องมี DataStream เพื่อกำหนดเส้นทางข้อมูลจากAdobe Experience Platform Edge Networkไปยังหนึ่งในระบบปลายทาง เช่นAdobe Analytics , Audience Manager , Adobe Experience Platformเป็นต้น เราจะสลับบนAdobe Experience PlatformและAdobe Targetสำหรับกรณีการใช้งานนี้ เมื่อกำหนดค่า DataStream แล้ว เราจำเป็นต้องกำหนดค่าคุณสมบัติ Launch ติดตั้งส่วนขยาย และเผยแพร่การเปลี่ยนแปลง

รวมสคีมาแบบจำลองข้อมูลประสบการณ์ (XDM) ในแอปพลิเคชันมือถือ

ตอนนี้เราต้องเพิ่มการออกแบบสคีมาตามกรณีการใช้งานของเราในไฟล์ App.js ทั้งเมื่อคลิกและเมื่อโหลด เรายังจำเป็นต้องนำเข้าแพ็คเกจAdobe Experience Platform

import { MobileCore} from '@adobe/react-native-aepcore';
import {Edge, ExperienceEvent} from '@adobe/react-native-aepedge';
import {Identity} from '@adobe/react-native-aepedgeidentity'
import {
  Target,
  TargetOrder,
  TargetParameters,
  TargetPrefetchObject,
  TargetProduct,
  TargetRequestObject
} from '@adobe/react-native-aeptarget';

โหลดหน้าจอ

var xdmData  = {"eventType":"web.webpagedetails.pageViews",
"_atag": {
    "customschema": {
        "pageInfo": {
            "pageName":"welcomescreen",
            "Channel":"reactapp",
            "userType":"testprofile3",
                           }
    }
},
"web" : {
    "webPageDetails":{
        "pageViews":{
            "value" : 1
        }
    } 
}
}
let experienceEvent = new ExperienceEvent(xdmData);
Edge.sendEvent(experienceEvent);

function expLink(){
var xdmData  = {"eventType":"web.webinteraction.linkClicks",
"_atag": {
    "customschema": {
    "linkInteraction": {
            "linkName":"test_link",
            "linkType":"other",
                           },
    "pageInfo": {
                  "pageName":"welcomescreen",
                  "Channel":"reactapp",
                  "userType":"testprofile3"
               }
    }
},
"web" : {
    "webInteraction":{
              "linkClicks":{
                    "value" : 1
                }
    }
  }
}
let experienceEvent = new ExperienceEvent(xdmData);
Edge.sendEvent(experienceEvent);

การเริ่มต้น SDK ควรทำในโค้ดเนทีฟภายใน AppDelegate (iOS) และ MainApplication (Android) สามารถดูรายละเอียดเกี่ยวกับวิธีการติดตั้งและลงทะเบียนส่วนขยายที่จำเป็นสำหรับการติดตั้งใช้งานปัจจุบันและบันทึกการติดตามวงจรชีวิตได้ที่นี่

https://developer.adobe.com/client-sdks/documentation/getting-started/get-the-sdk/

การตรวจสอบผ่าน Adobe Experience Platform Assurance

เราจะใช้การรับประกัน Adobe Experience Platformสำหรับการตรวจสอบ ในกรณีที่คุณต้องการรายละเอียดเกี่ยวกับการเริ่มต้น Assurance โปรดดูที่

https://experienceleague.adobe.com/docs/platform-learn/implement-mobile-sdk/app-implementation/assurance.html?lang=th

ตรวจสอบการโทรตลอดอายุการใช้งาน

ไปที่ส่วนเหตุการณ์ของแผงการนำทาง และค้นหาประเภทเหตุการณ์รอบการใช้งาน — ตรวจสอบให้แน่ใจว่าเหตุการณ์รอบการใช้งานเริ่มทำงานตามการดำเนินการรอบการใช้งานแอป

การสร้างกลุ่มใน Adobe Experience Platform

ตอนนี้เราต้องการสร้างกลุ่มอย่างง่ายสำหรับผู้ใช้ที่มี userType เท่ากับ “testprofile3” นี่คือขั้นตอนการสร้างกลุ่มมาตรฐานใน Adobe Experience Platform

https://experienceleague.adobe.com/docs/platform-learn/tutorials/segments/create-segments.html?lang=th

กำหนดค่าปลายทางส่วนบุคคล

ตอนนี้เราสามารถเริ่มกำหนดค่าปลายทางส่วนบุคคลได้แล้ว สำหรับกรณีการใช้งานของเรา เราจะใช้Adobe Targetเป็นปลายทาง โปรดดูที่นี่สำหรับรายละเอียดเพิ่มเติม

https://experienceleague.adobe.com/docs/experience-platform/destinations/catalog/personalization/adobe-target-connection.html?lang=th

สร้างนโยบายการผสาน Active-On-Edge

หลังจากที่เราสร้างการเชื่อมต่อปลายทางแล้ว เราต้องสร้างนโยบายการผสาน Active-On-Edge โปรดดูที่นี่สำหรับรายละเอียดเพิ่มเติม

https://experienceleague.adobe.com/docs/experience-platform/profile/merge-policies/ui-guide.html?lang=th

เปิดใช้งานส่วนไปยังปลายทาง

ตอนนี้เราจะเปิดใช้งานส่วนที่เราสร้างขึ้นไปยังปลายทางAdobe Target

ออกแบบ Personalization บน Application

เนื่องจากข้อกำหนดเบื้องต้นทั้งหมดของAdobe Experience Platformเสร็จสมบูรณ์แล้ว เราจะดำเนินการสร้างกิจกรรมต่อไป เพื่อให้บรรลุกรณีการใช้งานส่วนบุคคลในเพจ เราจะเพิ่มพารามิเตอร์ตำแหน่งสำหรับAdobe Targetเมื่อคลิก แนวคิดนี้คือการแสดงประสบการณ์ในการคลิกสำหรับผู้ใช้ที่มีประเภทผู้ใช้เท่ากับ "testprofile3"

ให้เราเพิ่มสคริปต์สองสามบรรทัดในไฟล์ App.js ซึ่งจะถูกเรียกใช้เมื่อคลิกปุ่ม

var request1 = new TargetRequestObject(
  'testpoctarget1',
  null,
  'defaultContent1',
  (error, content) => {
    if (error) {
      console.error(error);
    } else {
       console.log(
          "Adobe Target content:" +
            content +
            " Text Content: " +
            JSON.parse(content).text
        );
  targetresponse = JSON.parse(content).text;
        console.log(targetresponse);
    }
}
);

ขณะนี้เราสามารถสร้างกิจกรรมในAdobe Targetได้โดยเพิ่มพารามิเตอร์ตำแหน่งเดียวกันกับที่เพิ่มใน App.js ในขั้นตอนก่อนหน้า นั่นคือ “testpoctarget1” มาเลือกส่วนที่เราเปิดใช้งานไปยังปลายทาง Adobe Target

หากต้องการตรวจสอบความถูกต้องของกิจกรรมที่จัดส่งสำหรับกลุ่มที่เกี่ยวข้อง ให้คลิกเพื่อเริ่มการโทร mbox และคุณจะสามารถเห็น JSON ที่เราเพิ่มในAdobe Target

ตั้งค่ารายงาน [แหล่งการรายงานเป็น Adobe Analytics]

ขั้นตอนต่อไปคือการเลือกเป้าหมาย ครั้งนี้เราจะเลือก Adobe Analytics เป็นแหล่งการรายงาน เพื่อให้เรามีรายงาน A4T เพื่อวัดประสิทธิภาพ

ในที่นี้ เราจำเป็นต้องระมัดระวังอย่างมากในการทำขั้นตอนสองสามขั้นตอนตามข้อกำหนดเบื้องต้นเพื่อเปิดใช้งานการรายงาน A4T ซึ่งเราจะกล่าวถึงในส่วนถัดไป

การเปิดใช้งาน A4T สำหรับการตอบสนองแบบเนทีฟ

ในการเปิดใช้งาน A4T เราต้องทำตามขั้นตอน -

ก) เพิ่ม ส่วนขยาย Adobe Analyticsเพื่อเปิดไลบรารี

b) เลือก ชุดรายงาน Adobe Analyticsเราจำเป็นต้องสร้างชุดรายงานหากยังไม่ได้สร้าง

c) เพิ่มแพ็คเกจ NPM อีกหนึ่งแพ็คเกจสำหรับการเปิดใช้งาน A4T

@adobe/react-native-acpanalytics

import {ACPAnalytics} from '@adobe/react-native-acpanalytics';

Analytics.registerExtension();

สร้างแดชบอร์ดพื้นที่ทำงาน A4T เพื่อวัดประสิทธิภาพ

ให้เราสร้างแดชบอร์ด A4T ด่วนในพื้นที่ทำงานการวิเคราะห์เพื่อดูว่า A4T ทำงานตามที่คาดไว้หรือไม่

สรุป

ตามที่กล่าวไว้ข้างต้น การรวมAdobe Experience Platformกับ React Native Mobile Application โดยใช้ Mobile Edge SDK จำเป็นต้องมีแพ็คเกจ npm เฉพาะที่จะติดตั้งเพื่อให้มีการติดตามการวัด สามารถ ใช้ Adobe Experience Platform Assuranceสำหรับการตรวจสอบได้ A4T ช่วยให้คุณสามารถติดตามประสิทธิภาพของกิจกรรมการปรับให้เป็นส่วนตัวของAdobe Targetและสามารถทำได้โดยการนำเข้าแพ็คเกจ npm เฉพาะตามที่กล่าวไว้ข้างต้น

เทคโนโลยีอุปกรณ์พกพากำลังพัฒนาไปทุกวัน และที่ Adobe เราทำงานอย่างไม่รู้จักเหน็ดเหนื่อยเพื่อให้ทันกับแนวเทคโนโลยีที่เปลี่ยนแปลงตลอดเวลา เพื่อสนับสนุนลูกค้าของเราในการช่วยเหลือพวกเขาและลดเวลาในการสร้างการผสานรวมต่างๆ กับ Adobe Experience Cloud

กำลังพิจารณาที่จะย้ายไปที่ Adobe Experience Cloud Platform? ติดต่อ Adobe Professional Servicesเพื่อประสบการณ์ที่ราบรื่นและสมบูรณ์แบบ

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

ผู้ร่วมให้ข้อมูล

Asim Chatterjeeเป็นสถาปนิกด้านการตลาดดิจิทัลที่ทำงานร่วมกับ Adobe โดยมีประสบการณ์มากกว่า 12 ปีในธุรกิจและการให้คำปรึกษาด้านเทคโนโลยี Asim ช่วยให้องค์กรผ่านการเปลี่ยนแปลงการตลาดดิจิทัล โดยใช้การตัดสินใจที่ขับเคลื่อนด้วยข้อมูล และมอบประสบการณ์ลูกค้าทุกช่องทาง

Shikhar Saxenaเป็นสถาปนิกระดับองค์กรอาวุโสของ Adobe ซึ่งมีประสบการณ์มากกว่า 17 ปี เขาเป็นนักเทคโนโลยีภาคปฏิบัติที่มีผลงานเป็นที่ยอมรับในการสร้างระบบนิเวศด้านประสบการณ์ลูกค้า และนำทีมธุรกิจและไอทีมาทำงานร่วมกันเพื่อบรรลุเป้าหมายขององค์กร นั่นคือการออกแบบและมอบประสบการณ์ที่ยอดเยี่ยมแก่ลูกค้า