JavaScript בצד הלקוח

דוגמה לתיבת דו-שיח שמבקשת מהמנוי לקשר את המינוי שלו

באמצעות קישור מינויים, JavaScript בצד הלקוח הוא הדרך היחידה ליצור שיוך חדש בין PPID לחשבון Google של קורא. במכשיר מוגדר מוצגת לקורא תיבת דו-שיח שמבקשת ממנו לקשר במינוי. אחרי שהקורא ילחץ על הלחצן 'המשך עם Google' לחצן, הם יכול לבחור חשבון לקישור, ולשלוח אותו חזרה לדף שהוגדר .

שיוך ה-PPID לחשבון הקורא מתבצע באמצעות שיטת linkSubscription ב-swg.js. השימוש דומה לחשבון הקודם תכונת הקישור (דוגמה), אבל במקום להעביר הבטחה, השיטה מקבלת אובייקט שמכיל את PPID.

דוגמאות לקוד

דוגמאות הקוד האלה בצד הלקוח ממחישות איך יוצרים קישור, איך נראה תגובה תקינה ואיך משתמשים ב-eventManager‏ swg.js כדי להאזין לאירועי Analytics ולנתב אותם בהתאם (אופציונלי).

הפעלת תיבת הדו-שיח 'קישור מינויים'

const result = await subscriptions.linkSubscription({publisherProvidedId:6789})

דוגמה לתשובה

תשובות תקפות מחשבון שקושר בהצלחה מכילות גם את השדות PPID שנעשה בהם שימוש בקישור ובסטטוס success בוליאני.

console.log(result) //{publisherProvidedId: 6789, success: true}

כדי לקשר מינויים לא צריך להשתמש ב- לקורא הנתונים של צד שלישי או לסשן פעיל ב-Google. כך אפשר להפעיל את חוויית הקישור בכל שלב בחוויית הקריאה, ולא רק אחרי רכישה. אם קורא לא מחובר לחשבון Google, ניתנת להם הזדמנות לעשות זאת כחלק מהתהליך.

דוגמה מלאה בצד הלקוח

<script
  async
  type="application/javascript"
  subscriptions-control="manual"
  src="https://news.google.com/swg/js/v1/swg.js">
</script>

<script>

  function linkSubscription(ppid) {
    self.SWG.push(async (subscriptions) => {
      try {
        const result = await subscriptions.linkSubscription({
          publisherProvidedId: ppid,
        })
        console.log(result)
      } catch(e) {
        console.log(e)
      }
    })
  }

  document.addEventListener('DOMContentLoaded', function () {
    (self.SWG = self.SWG || []).push(subscriptions => {
      subscriptions.init("PUBLICATION_ID");

      //Configure the event manager for analytics integration
      subscriptions.getEventManager().then(manager => {
        manager.registerEventListener((event) => {
            // Add code here to send the event to your analytics
            // sendToAnalytics(event);
          console.log(event);
        });
      });
    });

    document
      .querySelector("SELECTOR")
      .addEventListener('click', function(){
        linkSubscription(PPID)
      })
  });
</script>

יצירת מזהה לקוח ב-OAuth

אומנם לא נדרש לקוח OAuth לצורך קישור מינויים, אבל לקוח OAuth אפשר להשתמש בו כדי ליצור את רשימת ההיתרים של הדומיינים המורשים של הפרויקט. דומיינים מורשים הם רשימה של דומיינים שמהם ה-JavaScript בצד הלקוח מורשה לבצע קריאות. כנראה לאתר החדשות שלך כבר יש OAuth מזהה לקוח שהוגדר ב-Publisher Center, לשימוש עם swg.js.

בדיקה

כדי לבדוק את ההטמעה של Subscription Linking מצד הלקוח, צריך להריץ את הקוד משרת עם מקור JavaScript מורשה.

  1. לשימוש בסביבת ייצור, מקורות מורשים יכולים להגיע מהמקורות שהוגדרו לקוח OAuth או מרשימת הדומיינים המאומתים בהגדרות של אתר החדשות. ב-Publisher Center.
  2. לשימוש בפיתוח או ב-Staging, עם דומיין שלא ניתן לאימות (למשל, Localhost או שרת לא ציבורי), הדומיין צריך להיות רשום ב-OAuth שהוגדר לקוח.

פתרון בעיות במקרה של שגיאות

הבעיה הנפוצה ביותר בבדיקת JavaScript בצד הלקוח היא קבלת אירעה שגיאה 403 - Not Authorized בניסיון להריץ את ה-JavaScript. כדי לפתור את הבעיה, צריך לוודא שאתם מריצים את ה-JavaScript מדומיין מאומת ב-Publisher Center, או שאתם מריצים את הקוד במארח שנמצא במקורות ה-JS המורשים של לקוח ה-OAuth המקושר.

השלב הבא

ברכות על השלמת השילוב של JavaScript בצד הלקוח. היום אפשר לעבור לשילוב בצד השרת. זהו שלב נדרש כדי לסנכרן את הקוראים שלך . כשמטמיעים את הפונקציה UpdateReaderEntitlements הנדרשת בצד השרת ומשתמשים בה, אפשר לוודא שהמאמרים המתאימים מודגשים למנויים המתאימים.