AMP

amp-access-laterpay

Description

Allows publishers to easily integrate with the LaterPay micropayments platform.

 

Required Scripts

<script async custom-element="amp-access-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.2.js"></script>
<script async custom-element="amp-access-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.1.js"></script>

أمثلة

يتيح المكوِّن amp-access-laterpay للناشرين سهولة التكامل مع منصة LaterPay للدفعات الصغيرة. ويستند المكّوِن إلى AMP Access كما يتطلبه أيضًا.

النصوص البرمجية المطلوبة لاحظ أنك تحتاج إلى نصوص برمجية لكل من "amp-access-laterpay" و"amp-access" و"amp-analytics".
<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-access-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.2.js"></script>
أمثلة يمكن الاطّلاع على مثال amp-access-laterpay بالشرح في الموقع "AMP بالمثال".

السلوك

LaterPay عبارة عن منصة للدفعات الصغيرة تتيح للمستخدِمين شراء أي محتوى على الإنترنت بنقرتين فقط والحصول على إمكانية الوصول الفوري إلى المحتوى - بدون تسجيل مسبق أو تقديم بيانات شخصية أو إجراء دفع. ولا يدفع المستخدِمون إلا بعد أن يبلغ مجموع مشترياتهم قيمة 5 دولارات أو 5 يورو على جميع مواقع الويب. يمكن لموفري المحتوى بيع عناصر فردية أو بطاقات محددة الوقت، مما يسمح بالوصول إلى المحتوى بسعر موحد أو لوقت محدد.

إذا كنت تُجري التكامل مع LaterPay من خلال تكامل Connector Script، لن تتمكن من استخدام هذا التكامل على صفحات AMP. أما amp-access-laterpay فهو يماثل Connector Script، حيث يوفر مجموعة مماثلة من الميزات لكن تم إنشاؤه لصفحات AMP.

من الممكن أيضًا بيع المحتوى عبر LaterPay ببساطة من خلال استخدام amp-access-laterpay كطريقة وحيدة للتكامل.

يستخدم المكوِّن amp-access-laterpay AMP Access داخليًا لتوفير سلوك مشابه "للوصول إلى AMP"، لكنه مصمم للاستخدام مع خدمة LaterPay.

إذا كانت خدمة "نظام حظر الاشتراك غير المدفوع" مملوكة لك، وتريد استخدامها مع AMP Access ومع LaterPay في نفس الصفحة، من الممكن أيضًا تحقيق ذلك.

لا يتطلب المكوِّن amp-access-laterpay تفويضًا أو تهيئة الرد على فحص الاتصال لأنه يتم تهيئته مسبقًا للعمل مع خدمة LaterPay. ولا يتطلب كذلك إعدادًا يدويًا لروابط تسجيل الدخول.

يمكن تهيئة خيارات الشراء المختلفة على حساب الناشر على LaterPay، وسيعمل المكوِّن على استرداد التهيئة وإنشاء قائمة بخيارات الشراء المتاحة.

لمعرفة خطوات تهيئة خيارات الشراء، يمكنك الرجوع إلى المستندات التي تتناول تهيئة LaterPay Connector، وهو عبارة عن التكامل مع واجهة LaterPay الأمامية الحالية.

يمكن تصميم القائمة التي تم إنشاؤها وعرضها وفقًا لتفضيلات الناشر.

يعتمد هذا المكّوِن أيضًا على ترميز المحتوى المتوفر بحق الوصول لإظهار المحتوى وإخفائه.

التهيئة

تشبه التهيئة AMP Access، لكن لا يلزمها التفويض ولا الرد على فحص الاتصال ولا روابط تسجيل الدخول.

<script id="amp-access" type="application/json">
  {
    "vendor": "laterpay",
    "laterpay": {
      "property": value
    }
  }
</script>

يمكن تعيين القيم التالية في كائن التهيئة laterpay:

الخاصية القيم الوصف
articleTitleSelector محدد CSS مطلوب محدد CSS الذي يحدد العنصر في الصفحة الذي يحتوي على عنوان المقالة. وسيضمن ذلك احتواء الصفحة المعروضة لشراء المقالة على هذا العنوان بحيث يكون المستخدِم على علم بما يشتريه.
articleId قائمة المعرفات المفصولة بفواصل يتم تلقائيًا استخدام عنوان URL لمقالة لمطابقته بخيار شراء، ولكن بدلاً من تحديد مسار عنوان URL لخيار الشراء، يمكنك تعيين معرّف المقالة في LaterPay Connector-UI ثم استخدام الخاصية articleId لمطابقة المقالة مع خيار الشراء.
يعد ذلك ضروريًا في الحالات التي تكون فيها مطابقة خيار الشراء بعنوان URL للمقالة غير مرنة بدرجة كافية. راجِع صفحة تهيئة LaterPay Connector() للتعرّف على بعض الأمثلة للسيناريوهات التي يكون فيها هذا مفيدًا.
jwt رمز JWT مميز لتهيئة الدفع الديناميكي يتيح لك هذا الخيار تحديد "رمز JSON مميز للويب" مُوقّع باستخدام تهيئة للمحتوى المدفوع المتاح. هذا يعني أنه يمكنك توفير تهيئة في الصفحة، يتم إنشاؤه برمجيًا في صفحاتك بدلاً من تحديدها يدويًا على واجهة Connector Admin في LaterPay. قد يفيد هذا بشكل خاص عند تهيئة عمليات الشراء الفردية لعدة مقالات مختلفة.
إذا أردت الحصول على مزيد من المعلومات عن إنشاء هذا الرمز المميز والمحتوى الذي يمكن تحديده فيه، يرجى الرجوع إلى مستندات واجهة برمجة تطبيقات JWT للمحتوى المدفوع في LaterPay لمعرفة تكامل Connector Script.
locale سلسلة تحدد نمط تنسيق السعر المناسب للمنطقة المحلية.
localeMessages كائن تسمح للناشر بتخصيص النص في قائمة خيارات الشراء التي تم إنشاؤها أو أقلمته. يُرجى مراجعة قسم الأقلمة للحصول على مزيد من المعلومات.
scrollToTopAfterAuth منطقي إذا كانت القيمة true، تعمل الخاصية على تمرير الصفحة إلى الأعلى بعد نجاح عملية التفويض. قد يفيد هذا إذا كان مكان ظهور مربع الحوار منخفضًا للغاية في الصفحة، ويمكن أن يلتبس على المستخدِم موضع التمرير الحالي بعد العودة إلى الصفحة.
region سلسلة حدِّد هل أنت في eu أو us من منطقتي LaterPay.
sandbox منطقي تكون مطلوبة فقط إذا كنت تستخدم وضع الحماية لاختبار تهيئة الخادم. تحتاج أيضًا إلى استخدام وضع مطوّر البرامج في AMP.

استخدام ترميز المحتوى المتوفر بحق الوصول وعرض قائمة الشراء

يجب استخدام "ترميز المحتوى المتوفر بحق الوصول" بالطريقة نفسها المستخدَمة مع AMP Access.

يعرض العنصر الذي يحتوي على المعرّف amp-access-laterpay-dialog قائمة بخيارات الشراء عندما لا يكون لدى المستخدِم حق الوصول إلى المقالة. تحتوي هذه القائمة على تصميم أساسي ويمكن تخصيصها لجعلها أكثر اندماجًا مع صفحة الناشر.

احرص على إضافة الفئة amp-access-laterpay إذا أردت استخدام التصميم التلقائي.

<section amp-access="NOT error AND NOT access" amp-access-hide>
  <div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div>
</section>

<section amp-access="error" amp-access-hide class="error-section">
  Oops... Something broke.
</section>

<div amp-access="access" amp-access-hide>
  <p>...article content...</p>
</div>

التصميم

يتم تطبيق فئات متعددة على بعض العناصر في الترميز الذي تم إنشاؤه. يمكن إحالة العناصر التي لا تحتوي على فئات بشكل لا لبس فيه من خلال محددات عناصر CSS.

توجد بعض تنسيقات CSS الأساسية، لكننا ننصح بأن يعمل الناشرون على تصميم مربع الحوار بحيث يتناسب مع روح وشكل صفحاتهم.

تبدو البنية التي تم إنشاؤها لمربع الحوار كما يلي:

<div id="amp-access-laterpay-dialog" class="amp-access-laterpay">
  <div class="amp-access-laterpay-container">
    <p class="amp-access-laterpay-header">
      Optional, appears if header locale message is defined.
    </p>
    <ul>
      <li>
        <label>
          <input name="purchaseOption" type="radio" />
          <div class="amp-access-laterpay-metadata">
            <span class="amp-access-laterpay-title">Purchase option title</span>
            <p class="amp-access-laterpay-description">Purchase option description</p>
          </div>
        </label>
        <p class="amp-access-laterpay-price-container">
          <span class="amp-access-laterpay-price">0.15</span>
          <sup class="amp-access-laterpay-currency">USD</sup>
        </p>
      </li>
      <!-- ... more list items for other purchase options ... -->
    </ul>
    <button class="amp-access-laterpay-purchase-button">Buy Now</button>
    <p class="amp-access-laterpay-already-purchased-container">
      <a href="...">I already bought this</a>
    </p>
    <p class="amp-access-laterpay-footer">
      Optional, appears if footer locale message is defined.
    </p>
  </div>
  <p class="amp-access-laterpay-badge">Powered by <a href="https://laterpay.net" target="_blank">LaterPay</a></p>
</div>

الأقلمة

يحدد الناشر في LaterPay Connector UI النص المعروض في مربع حوار خيارات الشراء.

النص المتبقي هو جزء من المكّوِن الموسَع ويمكن تغييره وأقلمته من خلال خيارات التهيئة كما يلي:

<script id="amp-access" type="application/json">
  {
    "vendor": "laterpay",
    "laterpay": {
      "localeMessages": {
        "messageKey": "message value"
      }
    }
  }
</script>

يمكن ترجمة مفاتيح الرسائل التالية أو تخصيصها، لكن مع ملاحظة وجوب احتفاظها بمعناها الأصلي وهدفها.

المفتاح الوصف القيمة التلقائية
payLaterButton النص المعروض في زر الشراء للخيارات التي يمكن دفعها لاحقًا. 'Buy Now، Pay Later'
payNowButton النص المعروض في زر الشراء للخيارات التي يجب دفعها عند لحظة الشراء. 'Buy Now'
defaultButton النص التلقائي المعروض على زر الشراء قبل تحديد أي خيار. 'Buy Now'
alreadyPurchasedLink إذا اشترى المستخدِم المقالة في الماضي لكنه فقد ملفات تعريف الارتباط لديه (أو يستخدم جهازًا آخرًا)، يمكنه استخدام هذا الرابط لتسجيل الدخول إلى LaterPay واستعادة مشترياته. 'I already bought this'
header نص رأس اختياري.
footer نص تذييل اختياري.

التحليلات

بالنظر إلى استناد amp-access-laterpay إلى amp-access، فإنه يتيح جميع أحداث التحليلات التي أرسلها amp-access.

تمت تهيئة جميع الأمثلة على https://ampexample.laterpay.net/ لإرسال أحداث التحليلات لذا يمكنك الاطّلاع عليها للحصول على أمثلة أكثر اكتمالًا عن شكل هذا عمليًا.

استخدام AMP Access LaterPay مع AMP Access

إذا كان لديك نظام اشتراك حالي وتعتزم استخدام LaterPay فقط لمبيعات المقالات الفردية، من الممكن أن تتعايش طريقتا البيع على نفس الصفحة، باستخدام كل من AMP Access وAMP Access LaterPay معًا.

يُرجى أولاً الرجوع إلى مستندات AMP Access لمعرفة خطوات تهيئة "AMP Access" باستخدام "نظام حظر الاشتراك غير المدفوع" الحالي.

يشرح القسم تعدد موفري خدمات الوصول كيفية إعداد عدة موفري خدمات باستخدام مساحات الأسماء.

عند استخدامه مع LaterPay ومع تكامل مع "نظام حظر الاشتراك غير المدفوع"، يمكن أن تبدو التهيئة الضرورية كما يلي:

<script id="amp-access" type="application/json">
  [
    {
      "vendor": "laterpay",
      "laterpay": {
        "region": "us"
      },
      "namespace": "laterpay"
    },
    {
      "authorization":
          "https://pub.com/amp-access?rid=READER_ID&url=SOURCE_URL",
      "pingback":
          "https://pub.com/amp-ping?rid=READER_ID&url=SOURCE_URL",
      "login":
          "https://pub.com/amp-login?rid=READER_ID&url=SOURCE_URL",
      "authorizationFallbackResponse": {"error": true},
      "namespace": "publishername"
    }
  ]
</script>

حيث يمكن أن يكون ترميز المحتوى المتوفر بحق الوصول في النهاية بالشكل التالي:

<section amp-access="NOT error AND NOT laterpay.access AND NOT publishername.access" amp-access-hide>
  <p>
    <a on="tap:amp-access.login-publishername">Login here to access your PublisherName subscription.</a>
  </p>

  <div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div>
</section>

<section amp-access="error" amp-access-hide class="error-section">
  Oops... Something broke.
</section>

<div amp-access="laterpay.access OR publishername.access" amp-access-hide>
  <p>...article content...</p>
</div>

يمكنك الحصول على مثال أكثر اكتمالاً على https://ampexample.laterpay.net/dual-amp-access.html

مستندات ذات صلة

التحقق

اطِّلع على قواعد amp-access-laterpay في مواصفات مدقق AMP.

هل تحتاج إلى مزيد من المساعدة؟

لقد قرأت هذا المستند عشرات المرات ولكن ألم يُجِب عن جميع أسئلتك؟ ربما حصل ذات الأمر مع أشخاص آخرين: تواصل معهم على Stack Overflow.

الذهاب إلى Stack Overflow
هل وجدت خطأ أو تفتقد لميزة؟

يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

الانتقال إلى GitHub