amp-access-laterpay

0.2 0.1

<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 كما يتطلبه أيضًا.

السلوك

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:

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

يجب استخدام "ترميز المحتوى المتوفر بحق الوصول" بالطريقة نفسها المستخدَمة مع 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>

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

التحليلات

بالنظر إلى استناد 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
• LaterPay: كيف تجري الدفعات الصغيرة؟
• LaterPay Connector - يشبه AMP Access LaterPay لكنه يُستخدم للصفحات غير AMP.

التحقق

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