Friends get Friends Campaign LIFF Share Target Picker

Transcript

1. Friends get Friends Campaign LIFF Share Target Picker
2. Atchariya Darote CEO AIYA LINE Certified Coach for API 2022 Friends get Friends Campaign LIFF Share Target Picker
3. • Friends get Friends Campaign Overview • LINE Front-end Framework (LIFF) Kick-off • LIFF Share Target Picker Insight • Scale up on Production Agenda
4. Friends get Friends Campaign Overview
5. Our Challenge How to increase the number of registration?
6. Our Challenges • Accessibility • Traceability • Compatibility
7. 50 Million LINE User Access (every day)
8. Friends get Friends LINE Journey Registration Invite to join Campaign Landing LIFF Share Target Picker Send Flex Message
9. Friends get Friends Social Journey แช ร์ ลิ ง ค์ ชวนเ พื ่ อน คั ดลอก ลิ ง ค์ รอง รั บโซเ ซี ยล อื่ น Registration
10. Default RichMenu RichMenu after join campaign Personalized RichMenu
11. Friends get Friends Campaign Demonstration
13. • Share campaign via LINE • Collect point • Other social platforms 
 compatibility Features
14. Campaign Performance 120%
15. How we made the solution? Tech Stack Cloudfront Amazon S3 Amazon
16. LINE Front-end Framework (LIFF)
17. https://liff-playground.netlify.app/ LIFF Playground
18. LIFF Starter CLI https://github.com/line/create-liff-app
19. // Execute liff.init() when the app is initialized useEffect(() => { // to avoid `window is not defined` error import("@line/liff").then((liff) => { console.log("start liff.init()..."); liff .init({ liffId: process.env.LIFF_ID }) .then(() => { console.log("liff.init() done"); setLiffObject(liff); }) .catch((error) => { console.log(`liff.init() failed: ${error}`); if (!process.env.liffId) { console.info( "LIFF Starter: Please make sure that you provided `LIFF_ID` as an environmental variable." ); } setLiffError(error.toString()); }); }); }, []); Import LIFF SDK in NextJS https://github.com/line/line-liff-v2-starter/blob/master/src/nextjs/pages/_app.js
20. What’s LIFF Share Target Picker?
21. liff.shareTargetPicker([ { type: 'text', text: 'Hello, World!', }, ]); Sending messages to a user's friend Double-click to edit
22. if (liff.isApiAvailable('shareTargetPicker')) { liff.shareTargetPicker([ { type: 'text', text: 'Hello, World!', }, ]); } Is LIFF Share Target Picker available? Target picker is supported on 10.3.0 or later for both LINE for iOS and LINE for Android.
23. Enable LIFF Share Target Picker https://developers.line.biz/console/
24. LIFF Share Target Picker Syntax Ref: https://developers.line.biz/en/reference/liff/#share-target-picker liff.shareTargetPicker(messages, options); liff.shareTargetPicker( [ { type: "text", text: "Hello, World!", }, ], { isMultiple: true, } ) .then(function (res) { if (res) { // succeeded in sending a message through TargetPicker console.log(`[${res.status}] Message sent!`) } }).catch(function (error) { // something went wrong before sending a message console.log('something wrong happen') }) 5 Bubbles
25. Types of Messaging API messages Image Video Audio Location Audio Video Text basic message type
26. Template messages Only a URI action can be set as an action Button Carousel Image Carousel
27. Flex Message Only a URI action can be set as an action
28. LIFF Share Target Picker Policy Unknown friend’s profile Unknown number
29. How to retrieve share statistic?
30. const liffId = "LIFF_ID" await liff.init({ liffId }) await liff.ready if (!liff.isLoggedIn()) { liff.login({ redirectUri: "https://example.com/path" }); } else { const idToken = liff.getDecodedIDToken(); const profile = { userId: idToken?.sub, displayName: idToken?.name, pictureUrl: idToken?.picture, }; ... } LINE Login https://developers.line.biz/en/reference/liff/#login
31. { "iss": "https://access.line.me", "sub": "U1234567890abcdef1234567890abcdef", "aud": "1234567890", "exp": 1504169092, "iat": 1504263657, "amr": ["pwd"], "name": "Taro Line", "picture": "https://sample_line.me/aBcdefg123456" } liff.getDecodedIDToken() EXAMPLE DECODED ID TOKEN ====> USER ID ====> PICTURE URL ====> DISPLAY NAME
32. liff.getFriendship() liff.getFriendship().then((friendship) => { if (!friendship.friendFlag) { window.location.href = `https://line.me/R/oaMessage/ @premium-id/?${encodeURIComponent( '"กด ส่ ง"เพื่อรับลิง ก์ ชวนเพื่อน' )}`; } else { … } });
33. Set Personalized Richmenu https://developers.line.biz/en/reference/messaging-api/#rich-menu const line = require("@line/bot-sdk"); const client = new line.Client({ channelAccessToken: "<channel access token>", }); client.linkRichMenuToUser("<user_id>", "<rich_menu_id>");
34. Save Data to Redis https://samsung-invite-friend.aiya.ai/R/cOkrVS const body = {...} const code = "cOkrVS" const userId = "Uxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" await redis.set(`fgf-user:${userId}`, code); await redis.set(`fgf-code:${code}`,JSON.stringify(body));
35. Traceable Unique Affiliate Link https://samsung-invite-friend.aiya.ai/R/cOkrVS
36. The Open Graph Protocol https://ogp.me/ <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@samsungthailand" /> <meta name="twitter:creator" content="@samsungthailand" /> <meta name="twitter:url" content={config.TWITTER.url} /> <meta property="twitter:title" content={config.TWITTER.title} /> <meta property="twitter:description" content={config.TWITTER.description} /> <meta property="twitter:image:src" content={config.TWITTER.image} /> <meta property="twitter:image:alt" content="SAMSUNG Invite Friend" /> <meta property="og:title" content={config.OG.title} /> <meta property="og:description" content={config.OG.description} /> <meta property="og:image" content={config.OG.image} /> <meta property="og:url" content={config.OG.url} />
37. The Open Graph Display
38. In-app Browser Challenge
39. https://invite.aiya.ai/xxx/join Mobile Detection export const isMobile = (userAgent: string) => { let mobile = false; let ua = userAgent.toLowerCase(); if ( /(android|bb\d+|meego).+mobile|liff|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|…/i.test( ua ) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|…/i.test( ua.substr(0, 4) ) ) { mobile = true; } else if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) { mobile = true; } return mobile; };
40. LINE URL scheme https://bit.ly/3B8eYNo • https://line.me/R/ • https://liff.line.me/ • line:// (Deprecated)
41. Local Storage
42. Scale up on Production
43. Our Challenges • Slow insert database • 500 concurrent for API • Heavy page load traffic
44. Serverless https://github.com/serverless-nextjs/serverless-next.js pageAppDev: component: '@sls-next/serverless-component@3.7.0' inputs: description: "aiya-ai" removeOldLambdaVersions: true tags: - cloudfront - nextjs bucketRegion: ap-southeast-1 bucketName: "aiya-ai-ap" bucketTags: - "cloudfront" cloudfront: distributionId: E1I4P19Z5XXXX aliases: [ 'invite.aiya.ai', ] … … 
 enableHTTPCompression: true timeout: defaultLambda: 15 apiLambda: 15 imageLambda: 15 name: defaultLambda: aiya-ai-default apiLambda: aiya-ai-api imageLambda: aiya-ai-image publicDirectoryCache: value: public, max-age=604800 test: /\.(gif|jpe?g|png|txt|xml)$/i policy: "arn:aws:iam::XXXXXXXX:policy/aiya-ai-policy" roleArn: "arn:aws:iam::XXXXXXXX:role/aiya-ai-role" build: cmd: 'yarn' args: ['build', 'page']
45. AWS Cloud Service Cloudfront Amazon S3 Amazon
46. Atchariya Darote CEO AIYA LINE Certified Coach for API 2022 Follow me: @aiyaclub
47. the power of platform and community