دليل البدء لـ Swift

يوضّح هذا الدليل كيفية إنشاء تطبيق iOS وتنفيذه في Swift لتتبُّع أحداث فتح الشاشة وضغط الزر باستخدام أداة "إدارة العلامات من Google" (GTM).

1. إنشاء مشروع جديد

  1. افتح Xcode. إنشاء مشروع جديد
  2. انقر على إنشاء مشروع Xcode جديد.
  3. اختَر تطبيق عرض واحد. اختيار تطبيق عرض واحد
  4. انقر على التالي.
  5. أدخِل اسمًا لمشروعك واختَر خيارات إضافية له. سيكون اسم المشروع واسم التطبيق هو نفسه اسم المنتج.
    إدخال اسم المنتج والخيارات الأخرى
  6. انقر على التالي.
  7. اختَر موقع المشروع (الدليل).
  8. انقر على إنشاء.

2. تثبيت متطلّبات أداة "إدارة العلامات من Google"

  1. عليك إنهاء Xcode.
  2. في وحدة طرفية، شغِّل الأمر التالي لتثبيت Cocoapods:
    $ sudo gem install cocoapods
    
  3. انتقِل إلى دليل مشروعك.
  4. شغِّل الأمر التالي لإنشاء ملف باسم Podfile:
    $ pod init
    
  5. في Podfile، أزِل التعليق التوضيحي من use_frameworks! وأضِف pod 'GoogleTagManager' إلى الاستهداف:
  6. # Uncomment this line if you're using Swift
    use_frameworks!
    
    target 'GtmSwiftTutorial' do
      pod 'GoogleTagManager'
    end
    
  7. شغِّل الأمر التالي لتنزيل وتركيب تبعيات أداة "إدارة العلامات من Google" في مشروعك:
    $ pod install
    

    ينشئ هذا الأمر أيضًا مساحة العمل GtmSwiftTutorial.xcworkspace. من الآن فصاعدًا، استخدِم مساحة العمل هذه لتطوير تطبيق GtmSwiftTutorial.

3- إضافة رأس ربط لمكتبات Objective-C

لإنشاء ملف رأس ربط:

  1. افتح Xcode.
  2. انقر على ملف > جديد > ملف.
  3. ضمن iOS > المصدر، اختَر ملف الرأس.
  4. انقر على التالي.
  5. أدخِل اسم ملف العنوان BridgingHeader.h.
    إنشاء ملف عنوان ربط
  6. انقر على إنشاء.
  7. أضِف عبارات import هذه إلى ملف العنوان:
    #ifndef BridgingHeader_h
    #define BridgingHeader_h
    
    #import <GoogleTagManager/TAGManager.h>
    #import <GoogleTagManager/TAGContainer.h>
    #import <GoogleTagManager/TAGContainerOpener.h>
    #import <GoogleTagManager/TAGDataLayer.h>
    #import <GoogleTagManager/TAGLogger.h>
    
    #endif /* BridgingHeader_h */
    

لإضافة عنوان جسر هدف-ج في إعدادات الإصدار:

  1. في Xcode، انقر على مشروعك.
  2. انقر على إعدادات الإنشاء في منطقة المحرِّر.
    انقر على &quot;إعدادات الإصدار&quot;.
  3. اختَر الكل ومدمجة وابحث عن جسر.
    ربط نتائج البحث
  4. في العمود الأيمن من الصف الذي يحتوي على Objective-C Bridging Header، أدخِل BridgingHeader.h.
    إضافة BridgingHeader.h كعنوان ربط Objective-C

4. إضافة حاوية تلقائية إلى مشروعك

قبل إضافة حاوية تلقائية إلى مشروعك، نزِّلملف ثنائي للحاوية المتوافقة مع الأجهزة الجوّالة:

  1. سجِّل الدخول إلى حسابك على أداة "إدارة العلامات من Google".
  2. اختَر حاوية للأجهزة الجوّالة.
  3. انقر على الإصدارات في شريط القوائم.
  4. انقر على الإجراءات > تنزيل في إصدار الحاوية المحدّد.
  5. اسم الملف الذي تم تنزيله هو رقم تعريف الحاوية، على سبيل المثال، GTM-PT3L9Z.

لإضافة ملف ثنائي للحاويات التلقائية إلى مشروعك:

  1. افتح Xcode.
  2. انقر على رمز Finder في شريط Dock.
  3. انقر على مجلد Downoloads.
  4. اسحب الملف الثنائي للحاوية في مجلد Downloads وأفلِته في المجلد الجذر في مشروع Xcode.
  1. في Xcode، افتح الملف AppDelegate.swift.
  2. اطلب من الفئة AppDelegate تمديد الفئة TAGContainerOpenerNotifier:
    import UIKit
    
    @UIApplicationMain
    class AppDelegate: UIResponder, UIApplicationDelegate, TAGContainerOpenerNotifier {
      // ...
    }
    
    .

    بعد تمديد فترة الصف الدراسي، ستظهر لك رسالة الخطأ Type 'AppDelegate' does not conform to protocol 'TAGContainerOpenerNotifier'. ستؤدي الخطوة التالية إلى إصلاح هذا الخطأ.

  3. أضِف الدالة التالية إلى أسفل تعريف فئة AppDelegate:
    func containerAvailable(container: TAGContainer!) {
      container.refresh()
    }
    
  4. في دالة application، أضِف الرمز البرمجي التالي قبل عبارة return true:
    let GTM = TAGManager.instance()
    GTM.logger.setLogLevel(kTAGLoggerLogLevelVerbose)
    
    TAGContainerOpener.openContainerWithId("GTM-PT3L9Z",  // change the container ID "GTM-PT3L9Z" to yours
        tagManager: GTM, openType: kTAGOpenTypePreferFresh,
        timeout: nil,
        notifier: self)
    

6- تتبُّع حدث فتح الشاشة

لتتبُّع حدث فتح شاشة:

  1. أنشئ متغيّرًا لتخزين رقم تعريف التتبّع.
  2. أنشئ متغيّر طبقة بيانات باسم screenName.
  3. أنشئ علامة "إدارة العلامات من Google" بعنوان عرض الشاشة.
  4. أضِف رمز تتبُّع الشاشة.

أ. أنشئ متغيّرًا لتخزين معرّف التتبّع.

  1. سجِّل الدخول إلى حسابك على إدارة العلامات من Google.
  2. اختَر حاوية متنقلة.
  3. في شريط التنقّل الأيمن، انقر على المتغيّرات.
  4. ضمن المتغيّرات التي يحدّدها المستخدِم، انقر على جديد.
  5. انقر على متغيّر بلا عنوان لإدخال اسم المتغيّر رقم تعريف التتبُّع.
  6. اختَر ثابت كنوع المتغيّر.
  7. أدخِل رقم تعريف التتبّع (في شكل UA-XXXXXXXX-X، حيث يمثّل X رقمًا) كقيمة للمتغيّر.
    استخدِم UA-47605289-5 (لحذفه).
  8. انقر على إنشاء متغيّر.

ب- أنشئ متغيّر طبقة بيانات باسم screenName.

  1. سجِّل الدخول إلى حسابك على إدارة العلامات من Google.
  2. اختَر حاوية متنقلة.
  3. في شريط التنقّل الأيمن، انقر على المتغيّرات.
  4. ضمن متغيّرات من تحديد المستخدِم، انقر على جديد.
  5. انقر على متغيّر بلا عنوان لإدخال العنوان اسم الشاشة.
  6. اختَر متغيّر طبقة البيانات كنوع المتغيّر.
  7. أدخِل screenName باعتباره اسم متغير طبقة البيانات.
  8. انقر على ضبط القيمة التلقائية.
  9. أدخِل القيمة التلقائية شاشة غير معروفة.
  10. انقر على إنشاء متغيّر.

ج. أنشئ علامة "إدارة العلامات من Google" بعنوان "عرض الشاشة".

  1. سجِّل الدخول إلى حسابك على إدارة العلامات من Google.
  2. اختَر حاوية متنقلة.
  3. في شريط التنقّل الأيمن، انقر على العلامات.
  4. انقر على جديد.
  5. انقر على علامة بلا عنوان لإدخال اسم العلامة مشاهدة الشاشة.
  6. اختَر المنتج إحصاءات Google.
  7. اختَر رقم تعريف التتبّع من القائمة.
  8. اختَر مشاهدة التطبيق كـ نوع التتبُّع.
  9. انقر على إعدادات إضافية.
  10. انقر على الحقول المطلوب إعدادها.
  11. انقر على + إضافة حقل.
  12. اختَر اسم الحقل screenName وقيمته اسم الشاشة.
  13. انقر على متابعة.
  14. ضمن تفعيل، اختَر أي حدث.
  15. انقر على إنشاء علامة.

د- إضافة رمز تتبّع الشاشة

  1. افتح الملف ViewController.swift في Xcode.
  2. حدِّد متغيّرًا باسم dataLayer داخل الفئة ViewController:
    var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer
    
  3. في دالة viewDidLoad()، أرسِل حدث OpenScreen إلى طبقة البيانات:
    dataLayer.push(["event": "OpenScreen", "screenName": "Home Screen"])
    

يظهر تعريف فئة ViewController على النحو التالي:

import UIKit

class ViewController: UIViewController {
  var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer

  override func viewDidLoad() {
    super.viewDidLoad()
    dataLayer.push(["event": "OpenScreen", "screenName": "Home Screen"])
  }

  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that cant be recreated
  }
}

7- تتبُّع حدث الضغط على الزر

لتتبُّع حدث الضغط على زر:

  1. أنشئ متغيّر طبقة بيانات باسم eventAction.
  2. أنشئ متغيّر حدث مخصّصًا باسم الحدث.
  3. أنشئ علامة "إدارة العلامات من Google" بعنوان الضغط على الزر.
  4. أنشئ زرًا وأضِف رمزًا لتتبُّع الضغط على الزر.

أ. إنشاء متغيّر طبقة بيانات باسم eventAction

  1. سجِّل الدخول إلى حسابك على أداة إدارة العلامات من Google.
  2. اختَر حاوية للأجهزة الجوّالة.
  3. في شريط التنقّل الأيمن، انقر على المتغيّرات.
  4. ضمن المتغيّرات التي يحدّدها المستخدِم، انقر على جديد.
  5. انقر على متغيّر بلا عنوان لإدخال العنوان إجراء الحدث.
  6. اختَر متغيّر طبقة البيانات كنوع المتغيّر.
  7. أدخِل eventAction كـ اسم متغيّر طبقة البيانات.
  8. انقر على ضبط القيمة التلقائية.
  9. أدخِل القيمة التلقائية حدث غير معروف.
  10. انقر على إنشاء متغيّر.

ب- أنشئ متغيّر حدث مخصّصًا باسم "الحدث".

  1. سجِّل الدخول إلى حسابك على أداة إدارة العلامات من Google.
  2. اختَر حاوية متنقلة.
  3. في شريط التنقّل الأيمن، انقر على المتغيّرات.
  4. ضمن المتغيّرات التي يحدّدها المستخدِم، انقر على جديد.
  5. انقر على متغيّر بدون عنوان لإدخال اسم المتغيّر الحدث.
  6. اختَر حدث مخصّص كنوع المتغيّر.
  7. انقر على إنشاء متغيّر.

ج. أنشئ علامة "إدارة العلامات من Google" بعنوان "الضغط على الزر".

  1. سجِّل الدخول إلى حسابك على إدارة العلامات من Google.
  2. اختَر حاوية متنقلة.
  3. في شريط التنقّل الأيمن، انقر على العلامات.
  4. انقر على جديد.
  5. انقر على علامة بلا عنوان لإدخال اسم العلامة تم الضغط على زر.
  6. اختر المنتج إحصاءات Google.
  7. اختَر رقم تعريف التتبّع من القائمة.
  8. اختَر الحدث كـ نوع التتبُّع.
  9. اختَر فئة الحدث.
  10. اختَر إجراء الحدث.
  11. انقر على متابعة.
  12. ضمن تفعيل، اختَر أي حدث.
  13. انقر على إنشاء علامة.

د- إنشاء زر وإضافة رمز لتتبّع الضغط على الزر

  1. افتح مشروع Xcode.
  2. فتح "Main.storyboard"
  3. انقر على الزر في أعلى يسار شريط أدوات Xcode لفتح منطقة الأدوات (الشريط الجانبي الأيسر). لوحة القصة ومنطقة الأدوات
  4. في أسفل منطقة المرافق،
    زر أزرق لفتح مكتبة العناصر

    انقر على الزر عرض مكتبة العناصر (الزر الأزرق):

    نافذة مكتبة العناصر المنبثقة
  5. أدخِل button في مربّع البحث.
    زر في مكتبة الكائنات
  6. اسحب الزر إلى لوحة القصة وأفلِته في أعلى يمين الشاشة.
    اسحب الزر وأفلِته في لوحة القصة.
  7. انقر على زر "مساعِد المحرِّر" زر &quot;محرِّر المساعد&quot; في شريط أدوات Xcode.
  8. أثناء الضغط مع الاستمرار على مفتاح Ctrl، اسحب الزر وأفلِته في أسفل تعريف الفئة ViewController.
    اسحب الزر وأفلِته في تعريف فئة ViewController.
  9. في مربّع الحوار، اختَر اتصال الإجراء، وأدخِل اسم الدالة buttonPressed، ثم انقر على اتصال.
    إنشاء رمز لمعالجة حدث الضغط على الزر

    يؤدي ذلك إلى إضافة الدالة التالية إلى نهاية تعريف فئة ViewController:

    @IBAction func buttonPressed(sender: AnyObject) {
    }
    

    يتم تنفيذ الدالة في كل مرة يتم فيها الضغط على الزر.

  10. في الدالة buttonPressed، أضِف الرمز التالي لإرسال حدث ButtonPressed إلى طبقة اليوم:
    @IBAction func buttonPressed(sender: AnyObject) {
      dataLayer.push(["event": "ButtonPressed", "eventAction": "Test Event"])
    }
    

8. إنشاء تطبيقك وتشغيله

في Xcode، انقر على المنتجات > تشغيل. سينشئ Xcode التطبيق ويشغّله:

لقطة شاشة للتطبيق الذي تم تشغيله