المتطلبات الأساسية
أكمِل إعداد الأحداث المخصّصة.
طلب إعلان مدمج مع المحتوى
عند الوصول إلى العنصر الخاص بالحدث المخصّص في سلسلة التوسّط للعرض الإعلاني بدون انقطاع، يتمّ
استدعاء الأسلوب loadNativeAd:adConfiguration:completionHandler:
على اسم
الفئة الذي قدّمته عند إنشاء حدث
مخصّص. في هذه الحالة،
تظهر هذه الطريقة في SampleCustomEvent
، والتي تستدعي بدورها
طريقة loadNativeAd:adConfiguration:completionHandler:
في
SampleCustomEventNative
.
لطلب إعلان مدمج مع المحتوى، أنشئ فئة تنفِّذ
GADMediationAdapter
وloadNativeAd:adConfiguration:completionHandler:
أو عدِّلها. إذا كانت هناك
فئة تمديد GADMediationAdapter
متوفّرة، يمكنك تنفيذ
loadNativeAd:adConfiguration:completionHandler:
فيها. بالإضافة إلى ذلك، أنشئ
صفًا جديدًا لتنفيذ GADMediationNativeAd
.
في مثال الحدث المخصّص، ينفِّذ
SampleCustomEvent
واجهة GADMediationAdapter
ثم يفوِّض المعالجة إلى
SampleCustomEventNative
.
Swift
import GoogleMobileAds class SampleCustomEvent: NSObject, GADMediationAdapter { fileprivate var nativeAd: SampleCustomEventNativeAd? func loadNativeAd( for adConfiguration: GADMediationNativeAdConfiguration, completionHandler: @escaping GADMediationNativeAdLoadCompletionHandler ) { self.nativeAd = SampleCustomEventNativeAd() self.nativeAd?.loadNativeAd( for: adConfiguration, completionHandler: completionHandler) } }
Objective-C
#import "SampleCustomEvent.h" @implementation SampleCustomEvent SampleCustomEventNativeAd *sampleNativeAd; - (void)loadNativeAdForAdConfiguration: (GADMediationNativeAdConfiguration *)adConfiguration completionHandler: (GADMediationNativeAdLoadCompletionHandler) completionHandler { sampleNative = [[SampleCustomEventNativeAd alloc] init]; [sampleNative loadNativeAdForAdConfiguration:adConfiguration completionHandler:completionHandler]; }
تتحمّل SampleCustomEventNative` مسؤولية المهام التالية:
تحميل الإعلان المدمج مع المحتوى
تنفيذ بروتوكول
GADMediationNativeAd
تلقّي عمليات الاستدعاء لأحداث الإعلان وإعداد تقارير عنها في حزمة "SDK لإعلانات Google على الأجهزة الجوّالة"
يتم تضمين المَعلمة الاختيارية المحدّدة في واجهة مستخدم "مدير إعلانات Google"
في إعداد الإعلان.
يمكن الوصول إلى المَعلمة من خلال
adConfiguration.credentials.settings[@"parameter"]
. هذه المَعلمة هي عادةً معرّف وحدة إعلانية تتطلّبه حزمة تطوير برامج (SDK) لشبكة إعلانية عند إنشاء مثيل لعنصر إعلان.
Swift
class SampleCustomEventNativeAd: NSObject, GADMediationNativeAd { /// The Sample Ad Network native ad. var nativeAd: SampleNativeAd? /// The ad event delegate to forward ad rendering events to the Google Mobile /// Ads SDK. var delegate: GADMediationNativeAdEventDelegate? /// Completion handler called after ad load var completionHandler: GADMediationNativeLoadCompletionHandler? func loadNativeAd( for adConfiguration: GADMediationNativeAdConfiguration, completionHandler: @escaping GADMediationNativeLoadCompletionHandler ) { let adLoader = SampleNativeAdLoader() let sampleRequest = SampleNativeAdRequest() // The Google Mobile Ads SDK requires the image assets to be downloaded // automatically unless the publisher specifies otherwise by using the // GADNativeAdImageAdLoaderOptions object's disableImageLoading property. If // your network doesn't have an option like this and instead only ever // returns URLs for images (rather than the images themselves), your adapter // should download image assets on behalf of the publisher. This should be // done after receiving the native ad object from your network's SDK, and // before calling the connector's adapter:didReceiveMediatedNativeAd: method. sampleRequest.shouldDownloadImages = true sampleRequest.preferredImageOrientation = NativeAdImageOrientation.any sampleRequest.shouldRequestMultipleImages = false let options = adConfiguration.options for loaderOptions: GADAdLoaderOptions in options { if let imageOptions = loaderOptions as? GADNativeAdImageAdLoaderOptions { sampleRequest.shouldRequestMultipleImages = imageOptions.shouldRequestMultipleImages // If the GADNativeAdImageAdLoaderOptions' disableImageLoading property is // YES, the adapter should send just the URLs for the images. sampleRequest.shouldDownloadImages = !imageOptions.disableImageLoading } else if let mediaOptions = loaderOptions as? GADNativeAdMediaAdLoaderOptions { switch mediaOptions.mediaAspectRatio { case GADMediaAspectRatio.landscape: sampleRequest.preferredImageOrientation = NativeAdImageOrientation.landscape case GADMediaAspectRatio.portrait: sampleRequest.preferredImageOrientation = NativeAdImageOrientation.portrait default: sampleRequest.preferredImageOrientation = NativeAdImageOrientation.any } } } // This custom event uses the server parameter to carry an ad unit ID, which // is the most common use case. adLoader.delegate = self adLoader.adUnitID = adConfiguration.credentials.settings["parameter"] as? String self.completionHandler = completionHandler adLoader.fetchAd(sampleRequest) } }
Objective-C
#import "SampleCustomEventNativeAd.h" @interface SampleCustomEventNativeAd () <SampleNativeAdDelegate, GADMediationNativeAd> { /// The sample native ad. SampleNativeAd *_nativeAd; /// The completion handler to call when the ad loading succeeds or fails. GADMediationNativeLoadCompletionHandler _loadCompletionHandler; /// The ad event delegate to forward ad rendering events to the Google Mobile /// Ads SDK. id<GADMediationNativeAdEventDelegate> _adEventDelegate; } @end - (void)loadNativeAdForAdConfiguration: (GADMediationNativeAdConfiguration *)adConfiguration completionHandler:(GADMediationNativeLoadCompletionHandler) completionHandler { __block atomic_flag completionHandlerCalled = ATOMIC_FLAG_INIT; __block GADMediationNativeLoadCompletionHandler originalCompletionHandler = [completionHandler copy]; _loadCompletionHandler = ^id<GADMediationNativeAdEventDelegate>( _Nullable id<GADMediationNativeAd> ad, NSError *_Nullable error) { // Only allow completion handler to be called once. if (atomic_flag_test_and_set(&completionHandlerCalled)) { return nil; } id<GADMediationNativeAdEventDelegate> delegate = nil; if (originalCompletionHandler) { // Call original handler and hold on to its return value. delegate = originalCompletionHandler(ad, error); } // Release reference to handler. Objects retained by the handler will also // be released. originalCompletionHandler = nil; return delegate; }; SampleNativeAdLoader *adLoader = [[SampleNativeAdLoader alloc] init]; SampleNativeAdRequest *sampleRequest = [[SampleNativeAdRequest alloc] init]; // The Google Mobile Ads SDK requires the image assets to be downloaded // automatically unless the publisher specifies otherwise by using the // GADNativeAdImageAdLoaderOptions object's disableImageLoading property. If // your network doesn't have an option like this and instead only ever returns // URLs for images (rather than the images themselves), your adapter should // download image assets on behalf of the publisher. This should be done after // receiving the native ad object from your network's SDK, and before calling // the connector's adapter:didReceiveMediatedNativeAd: method. sampleRequest.shouldDownloadImages = YES; sampleRequest.preferredImageOrientation = NativeAdImageOrientationAny; sampleRequest.shouldRequestMultipleImages = NO; sampleRequest.testMode = adConfiguration.isTestRequest; for (GADAdLoaderOptions *loaderOptions in adConfiguration.options) { if ([loaderOptions isKindOfClass:[GADNativeAdImageAdLoaderOptions class]]) { GADNativeAdImageAdLoaderOptions *imageOptions = (GADNativeAdImageAdLoaderOptions *)loaderOptions; sampleRequest.shouldRequestMultipleImages = imageOptions.shouldRequestMultipleImages; // If the GADNativeAdImageAdLoaderOptions' disableImageLoading property is // YES, the adapter should send just the URLs for the images. sampleRequest.shouldDownloadImages = !imageOptions.disableImageLoading; } else if ([loaderOptions isKindOfClass:[GADNativeAdMediaAdLoaderOptions class]]) { GADNativeAdMediaAdLoaderOptions *mediaOptions = (GADNativeAdMediaAdLoaderOptions *)loaderOptions; switch (mediaOptions.mediaAspectRatio) { case GADMediaAspectRatioLandscape: sampleRequest.preferredImageOrientation = NativeAdImageOrientationLandscape; break; case GADMediaAspectRatioPortrait: sampleRequest.preferredImageOrientation = NativeAdImageOrientationPortrait; break; default: sampleRequest.preferredImageOrientation = NativeAdImageOrientationAny; break; } } else if ([loaderOptions isKindOfClass:[GADNativeAdViewAdOptions class]]) { _nativeAdViewAdOptions = (GADNativeAdViewAdOptions *)loaderOptions; } } // This custom event uses the server parameter to carry an ad unit ID, which // is the most common use case. NSString *adUnit = adConfiguration.credentials.settings[@"parameter"]; adLoader.adUnitID = adUnit; adLoader.delegate = self; [adLoader fetchAd:sampleRequest]; }
سواء تم جلب الإعلان بنجاح أو حدث خطأ،
ستستدعي GADMediationNativeAdLoadCompletionHandler
. في حال النجاح،
استخدم الفئة التي تنفِّذ GADMediationNativeAd
مع قيمة nil
لمَعلمة الخطأ. وفي حال تعذُّر التنفيذ،
استخدم الخطأ الذي واجهته.
يتم عادةً تنفيذ هذه الطرق داخل عمليات الاستدعاء من
حزمة SDK التابعة لجهة خارجية التي ينفّذها المحوِّل. في هذا المثال، تحتوي حزمة SDK النموذجية
على SampleNativeAdDelegate
مع عمليات ردّ الاتصال ذات الصلة:
Swift
func adLoader( _ adLoader: SampleNativeAdLoader, didReceive nativeAd: SampleNativeAd ) { extraAssets = [ SampleCustomEventConstantsSwift.awesomenessKey: nativeAd.degreeOfAwesomeness ?? "" ] if let image = nativeAd.image { images = [GADNativeAdImage(image: image)] } else { let imageUrl = URL(fileURLWithPath: nativeAd.imageURL) images = [GADNativeAdImage(url: imageUrl, scale: nativeAd.imageScale)] } if let mappedIcon = nativeAd.icon { icon = GADNativeAdImage(image: mappedIcon) } else { let iconURL = URL(fileURLWithPath: nativeAd.iconURL) icon = GADNativeAdImage(url: iconURL, scale: nativeAd.iconScale) } adChoicesView = SampleAdInfoView() self.nativeAd = nativeAd if let handler = completionHandler { delegate = handler(self, nil) } } func adLoader( _ adLoader: SampleNativeAdLoader, didFailToLoadAdWith errorCode: SampleErrorCode ) { let error = SampleCustomEventUtilsSwift.SampleCustomEventErrorWithCodeAndDescription( code: SampleCustomEventErrorCodeSwift .SampleCustomEventErrorAdLoadFailureCallback, description: "Sample SDK returned an ad load failure callback with error code: \(errorCode)" ) if let handler = completionHandler { delegate = handler(nil, error) } }
Objective-C
- (void)adLoader:(SampleNativeAdLoader *)adLoader didReceiveNativeAd:(SampleNativeAd *)nativeAd { if (nativeAd.image) { _images = @[ [[GADNativeAdImage alloc] initWithImage:nativeAd.image] ]; } else { NSURL *imageURL = [[NSURL alloc] initFileURLWithPath:nativeAd.imageURL]; _images = @[ [[GADNativeAdImage alloc] initWithURL:imageURL scale:nativeAd.imageScale] ]; } if (nativeAd.icon) { _icon = [[GADNativeAdImage alloc] initWithImage:nativeAd.icon]; } else { NSURL *iconURL = [[NSURL alloc] initFileURLWithPath:nativeAd.iconURL]; _icon = [[GADNativeAdImage alloc] initWithURL:iconURL scale:nativeAd.iconScale]; } // The sample SDK provides an AdChoices view (SampleAdInfoView). If your SDK // provides image and click through URLs for its AdChoices icon instead of an // actual UIView, the adapter is responsible for downloading the icon image // and creating the AdChoices icon view. _adChoicesView = [[SampleAdInfoView alloc] init]; _nativeAd = nativeAd; _adEventDelegate = _loadCompletionHandler(self, nil); } - (void)adLoader:(SampleNativeAdLoader *)adLoader didFailToLoadAdWithErrorCode:(SampleErrorCode)errorCode { NSError *error = SampleCustomEventErrorWithCodeAndDescription( SampleCustomEventErrorAdLoadFailureCallback, [NSString stringWithFormat:@"Sample SDK returned an ad load failure " @"callback with error code: %@", errorCode]); _adEventDelegate = _loadCompletionHandler(nil, error); }
ربط الإعلانات المدمجة مع المحتوى
تتضمّن حِزم تطوير البرامج (SDK) المختلفة أشكالًا فريدة للإعلانات المدمجة مع المحتوى. قد يعرض أحدهما مثلاً عناصر تحتوي على حقل "العنوان"، بينما قد يعرض الآخر "العنوان الرئيسي". بالإضافة إلى ذلك، يمكن أن تختلف الطرق المستخدَمة لتتبُّع مرّات الظهور ومعالجة النقرات من حزمة SDK إلى أخرى.
لحلّ هذه المشاكل، عندما يتلقّى حدث مخصّص عنصر إعلان مدمج مع المحتوى من
حزمة SDK التوسّطية، يجب أن يستخدِم فئة تنفِّذ GADMediationNativeAd
،
مثل SampleCustomEventNativeAd
، من أجل "ربط" عنصر الإعلان المدمج مع المحتوى لحزمة SDK التوسّطية
كي يتطابق مع الواجهة المتوقّعة من حزمة "SDK لإعلانات Google على الأجهزة الجوّالة".
لنلقِ نظرة عن كثب الآن على تفاصيل تنفيذ
SampleCustomEventNativeAd
.
تخزين عمليات الربط
من المتوقّع أن تُنفِّذ حزمة GADMediationNativeAd
خصائص معيّنة يتم
ربطها بخصائص حِزم SDK الأخرى:
Swift
var nativeAd: SampleNativeAd? var headline: String? { return nativeAd?.headline } var images: [GADNativeAdImage]? var body: String? { return nativeAd?.body } var icon: GADNativeAdImage? var callToAction: String? { return nativeAd?.callToAction } var starRating: NSDecimalNumber? { return nativeAd?.starRating } var store: String? { return nativeAd?.store } var price: String? { return nativeAd?.price } var advertiser: String? { return nativeAd?.advertiser } var extraAssets: [String: Any]? { return [ SampleCustomEventConstantsSwift.awesomenessKey: nativeAd?.degreeOfAwesomeness ?? "" ] } var adChoicesView: UIView? var mediaView: UIView? { return nativeAd?.mediaView }
Objective-C
/// Used to store the ad's images. In order to implement the /// GADMediationNativeAd protocol, we use this class to return the images /// property. NSArray<GADNativeAdImage *> *_images; /// Used to store the ad's icon. In order to implement the GADMediationNativeAd /// protocol, we use this class to return the icon property. GADNativeAdImage *_icon; /// Used to store the ad's ad choices view. In order to implement the /// GADMediationNativeAd protocol, we use this class to return the adChoicesView /// property. UIView *_adChoicesView; - (nullable NSString *)headline { return _nativeAd.headline; } - (nullable NSArray<GADNativeAdImage *> *)images { return _images; } - (nullable NSString *)body { return _nativeAd.body; } - (nullable GADNativeAdImage *)icon { return _icon; } - (nullable NSString *)callToAction { return _nativeAd.callToAction; } - (nullable NSDecimalNumber *)starRating { return _nativeAd.starRating; } - (nullable NSString *)store { return _nativeAd.store; } - (nullable NSString *)price { return _nativeAd.price; } - (nullable NSString *)advertiser { return _nativeAd.advertiser; } - (nullable NSDictionary<NSString *, id> *)extraAssets { return @{SampleCustomEventExtraKeyAwesomeness : _nativeAd.degreeOfAwesomeness}; } - (nullable UIView *)adChoicesView { return _adChoicesView; } - (nullable UIView *)mediaView { return _nativeAd.mediaView; } - (BOOL)hasVideoContent { return self.mediaView != nil; }
يمكن أن تقدّم بعض الشبكات التوسّطية مواد عرض إضافية غير تلك التي تحدّدها
حزمة تطوير البرامج (SDK) لإعلانات Google على الأجهزة الجوّالة. يتضمّن بروتوكول GADMediationNativeAd
طريقة تدعى extraAssets
تستخدمها حزمة "SDK لإعلانات Google على الأجهزة الجوّالة" لاسترداد أيّ من مواد العرض "الإضافية" هذه من أداة الربط.
مواد عرض الصور للخريطة
إنّ ربط مواد عرض الصور أكثر تعقيدًا من ربط أنواع بيانات
أبسط مثل NSString
أو double
. قد يتم تنزيل الصور تلقائيًا أو
عرضها كقيم عناوين URL. ويمكن أن تختلف أيضًا كثافة البكسل فيها.
لمساعدتك في إدارة هذه التفاصيل، توفّر حزمة "SDK لإعلانات Google على الأجهزة الجوّالة" فئة
GADNativeAdImage
. يجب عرض معلومات مادة عرض الصورة (سواء كانت عناصر UIImage
فعلية أو قيم NSURL
فقط) في حزمة SDK لإعلانات Google على الأجهزة الجوّالة
باستخدام هذه الفئة.
في ما يلي كيفية تعامل فئة "المخطِّط" مع إنشاء GADNativeAdImage
لتضمين
صورة الرمز:
Swift
if let image = nativeAd.image { images = [GADNativeAdImage(image: image)] } else { let imageUrl = URL(fileURLWithPath: nativeAd.imageURL) images = [GADNativeAdImage(url: imageUrl, scale: nativeAd.imageScale)] }
Objective-C
if (nativeAd.image) { _images = @[ [[GADNativeAdImage alloc] initWithImage:nativeAd.image] ]; } else { NSURL *imageURL = [[NSURL alloc] initFileURLWithPath:nativeAd.imageURL]; _images = @[ [[GADNativeAdImage alloc] initWithURL:imageURL scale:nativeAd.imageScale] ]; }
أحداث الظهور والنقر
يجب أن تعرف كلّ من "حزمة SDK لإعلانات Google على الأجهزة الجوّالة" وحزمة SDK التوسّطية وقت حدوث أثر إعلاني أو نقرة، ولكن يجب أن تتتبّع هذه الأحداث حزمة SDK واحدة فقط. هناك طريقتان مختلفتان يمكن أن تستخدمهما الأحداث المخصّصة، وذلك استنادًا إلى ما إذا كانت حزمة SDK الوسيطة تتيح تتبُّع مرّات الظهور والنقرات من تلقاء نفسها.
تتبُّع النقرات ومرّات الظهور باستخدام حزمة "SDK لإعلانات Google على الأجهزة الجوّالة"
إذا كانت حزمة SDK التوسّط لا تُجري عملية تتبُّع مرّات الظهور والنقرات الخاصة بها، ولكنها
توفّر طُرقًا لتسجيل النقرات ومرّات الظهور، يمكن لحزمة "SDK لإعلانات Google على الأجهزة الجوّالة"
تتبُّع هذه الأحداث وإرسال إشعار إلى المحوِّل. يتضمّن بروتوكول GADMediationNativeAd
طريقتَين: didRecordImpression:
و
didRecordClickOnAssetWithName:view:viewController:
يمكن للأحداث المخصّصة تنفيذهما لطلب الطريقة المقابلة في عنصر الإعلان الأصلي الذي تمّت التوسّط فيه:
Swift
func didRecordImpression() { nativeAd?.recordImpression() } func didRecordClickOnAsset( withName assetName: GADUnifiedNativeAssetIdentifier, view: UIView, wController: UIViewController ) { nativeAd?.handleClick(on: view) }
Objective-C
- (void)didRecordImpression { if (self.nativeAd) { [self.nativeAd recordImpression]; } } - (void)didRecordClickOnAssetWithName:(GADUnifiedNativeAssetIdentifier)assetName view:(UIView *)view viewController:(UIViewController *)viewController { if (self.nativeAd) { [self.nativeAd handleClickOnView:view]; } }
بما أنّ الفئة التي تنفِّذ بروتوكول GADMediationNativeAd
تحتوي على إشارة إلى عنصر الإعلان الأصلي في حِزمة تطوير البرامج (SDK) النموذجية، يمكنها استدعاء الأسلوب المناسب في هذا العنصر للإبلاغ عن نقرة أو مرّة ظهور. يُرجى العِلم أنّ الإجراء
didRecordClickOnAssetWithName:view:viewController:
يأخذ مَعلمة واحدة: عنصر View
المقابل لمادة عرض الإعلان المدمَجة التي تلقّت
النقرة.
تتبُّع النقرات ومرّات الظهور باستخدام حزمة تطوير البرامج (SDK) التوسّطية
قد تفضّل بعض حِزم تطوير البرامج (SDK) التوسّط في تتبُّع النقرات ومرّات الظهور بنفسها. في
هذه الحالة، عليك تنفيذ الطريقتَين handlesUserClicks
و
handlesUserImpressions
كما هو موضّح في المقتطف أدناه. من خلال عرض القيمة
YES
، تشير إلى أنّ الحدث المخصّص يتحمّل مسؤولية تتبُّع
هذه الأحداث، وسيتم إرسال إشعار إلى حزمة "SDK لإعلانات Google على الأجهزة الجوّالة" عند وقوع هذه الأحداث.
يمكن للأحداث المخصّصة التي تلغي تتبُّع النقرات ومرّات الظهور استخدام رسالة
didRenderInView:
لتمرير عرض الإعلان المدمج إلى ملف تعريف الإعلان المدمج في حزمة SDK التوسّطية للسماح لحزمة SDK التوسّطية بإجراء التتبُّع الفعلي. لا يستخدم نموذج
حزمة تطوير البرامج (SDK) من مثال المشروع المخصّص للأحداث (الذي تم أخذ مقتطفات الرمز البرمجي
لهذا الدليل منه) هذا النهج، ولكن إذا كان يستخدمه، سيستدعي رمز الحدث المخصّص
طريقة setNativeAdView:view:
كما هو موضّح في المقتطف أدناه:
Swift
func handlesUserClicks() -> Bool { return true } func handlesUserImpressions() -> Bool { return true } func didRender( in view: UIView, clickableAssetViews: [GADNativeAssetIdentifier: UIView], nonclickableAssetViews: [GADNativeAssetIdentifier: UIView], viewController: UIViewController ) { // This method is called when the native ad view is rendered. Here you would pass the UIView // back to the mediated network's SDK. self.nativeAd?.setNativeAdView(view) }
Objective-C
- (BOOL)handlesUserClicks { return YES; } - (BOOL)handlesUserImpressions { return YES; } - (void)didRenderInView:(UIView *)view clickableAssetViews:(NSDictionary<GADNativeAssetIdentifier, UIView *> *) clickableAssetViews nonclickableAssetViews:(NSDictionary<GADNativeAssetIdentifier, UIView *> *) nonclickableAssetViews viewController:(UIViewController *)viewController { // This method is called when the native ad view is rendered. Here you would // pass the UIView back to the mediated network's SDK. Playing video using // SampleNativeAd's playVideo method [_nativeAd setNativeAdView:view]; }
إعادة توجيه أحداث التوسّط إلى "مجموعة تطوير البرامج (SDK) لإعلانات Google على الأجهزة الجوّالة"
بعد استدعاء
GADMediationNativeLoadCompletionHandler
مع إعلان محمّل، يمكن للمحوِّل استخدام GADMediationNativeAdEventDelegate
المفوَّض المعروض
الوارد لإعادة توجيه أحداث العرض من
حزمة SDK التابعة لجهة خارجية إلى "حزمة SDK لإعلانات Google على الأجهزة الجوّالة".
من المهم أن يعيد حدثك المخصّص توجيه أكبر عدد ممكن من عمليات تسجيل الإحالات الناجحة هذه، لكي يتلقّى تطبيقك هذه الأحداث المماثلة من حزمة SDK لإعلانات Google على الأجهزة الجوّالة. في ما يلي مثال على استخدام وظائف الاستدعاء:
يُكمِل ذلك تنفيذ الأحداث المخصّصة للإعلانات المدمجة مع المحتوى. يتوفّر المثال الكامل على GitHub.