Swift के लिए शुरुआती निर्देश

इस गाइड में Swift में iOS ऐप्लिकेशन बनाने और उसे लागू करने का तरीका बताया गया है, ताकि Google Tag Manager (GTM) की मदद से, खुली हुई स्क्रीन और बटन दबाए गए इवेंट को ट्रैक किया जा सके.

1. नया प्रोजेक्ट बनाना

  1. Xcode खोलें. नया प्रोजेक्ट बनाओ
  2. एक नया Xcode प्रोजेक्ट बनाएं पर क्लिक करें.
  3. सिंगल व्यू ऐप्लिकेशन चुनें. सिंगल व्यू ऐप्लिकेशन चुनें
  4. आगे बढ़ें पर क्लिक करें.
  5. अपने प्रोजेक्ट को नाम दें और उसके लिए अतिरिक्त विकल्प चुनें. आपके प्रोजेक्ट का नाम और ऐप्लिकेशन का नाम, प्रॉडक्ट का नाम एक ही होगा.
    प्रॉडक्ट का नाम और अन्य विकल्प डालें
  6. आगे बढ़ें पर क्लिक करें.
  7. प्रोजेक्ट की जगह (डायरेक्ट्री) चुनें.
  8. बनाएं पर क्लिक करें.

2. Google Tag Manager डिपेंडेंसी इंस्टॉल करें

  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 Tag Manager (GTM) डिपेंडेंसी डाउनलोड और इंस्टॉल करने के लिए, यह कमांड चलाएं:
    $ pod install
    

    इस निर्देश से GtmSwiftTutorial.xcworkspace वर्क स्पेस भी बन जाता है. अब से, इस वर्क स्पेस का इस्तेमाल करके, GtmSwiftTutorial ऐप्लिकेशन बनाएं.

3. ऑब्जेक्टिव-सी लाइब्रेरी के लिए ब्रिजिंग हेडर जोड़ें

ब्रिडिंग हेडर फ़ाइल बनाने के लिए:

  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. एडिटर एरिया में, सेटिंग बनाएं पर क्लिक करें.
    बिल्ड सेटिंग पर क्लिक करें
  3. सभी और एक साथ मिलाए गए को चुनें और ब्रिज खोजें.
    खोज ब्रिजिंग
  4. ऑब्जेक्ट-सी ब्रिजिंग हेडर वाली लाइन के दाएं कॉलम में, BridgingHeader.h डालें.
    BridgingHeader.h को ऑब्जेक्टिव-सी ब्रिजिंग हेडर के तौर पर जोड़ें

4. अपने प्रोजेक्ट में डिफ़ॉल्ट कंटेनर जोड़ना

अपने प्रोजेक्ट में एक डिफ़ॉल्ट कंटेनर जोड़ने से पहले, एक मोबाइल कंटेनर बाइनरी डाउनलोड करें:

  1. अपने Google Tag Manager खाते में साइन इन करें.
  2. मोबाइल कंटेनर चुनें.
  3. मेन्यू बार में वर्शन पर क्लिक करें.
  4. चुने गए कंटेनर वर्शन पर, कार्रवाइयां > डाउनलोड करें पर क्लिक करें.
  5. डाउनलोड की गई फ़ाइल का नाम कंटेनर आईडी है, उदाहरण के लिए, GTM-PT3L9Z.

अपने प्रोजेक्ट में डिफ़ॉल्ट कंटेनर बाइनरी जोड़ने के लिए:

  1. Xcode खोलें.
  2. डॉक पर Finder आइकॉन पर क्लिक करें.
  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. स्क्रीन व्यू टाइटल वाला GTM टैग बनाएं.
  4. स्क्रीन ट्रैकिंग कोड जोड़ें.

a. ट्रैकिंग आईडी को स्टोर करने के लिए वैरिएबल बनाना

  1. Google Tag Manager खाते में साइन इन करें.
  2. मोबाइल कंटेनर चुनें.
  3. बाईं ओर मौजूद नेविगेशन बार में, वैरिएबल पर क्लिक करें.
  4. उपयोगकर्ता के तय किए गए वैरिएबल में नया पर क्लिक करें.
  5. वैरिएबल का नाम ट्रैकिंग आईडी डालने के लिए, बिना टाइटल वाले वैरिएबल पर क्लिक करें.
  6. वैरिएबल टाइप के तौर पर कॉन्सटेंट चुनें.
  7. वैरिएबल की वैल्यू के तौर पर ट्रैकिंग आईडी (UA-XXXXXXXX-X के रूप में, जहां X एक अंक है) डालें.
    UA-47605289-5 का इस्तेमाल करें (मिटाने के लिए).
  8. वैरिएबल बनाएं पर क्लिक करें.

b. screenName नाम का एक डेटा लेयर वैरिएबल बनाएं

  1. Google Tag Manager खाते में साइन इन करें.
  2. मोबाइल कंटेनर चुनें.
  3. बाईं ओर मौजूद नेविगेशन बार में, वैरिएबल पर क्लिक करें.
  4. उपयोगकर्ता के तय किए गए वैरिएबल में नया पर क्लिक करें.
  5. स्क्रीन का नाम टाइटल डालने के लिए, बिना टाइटल वाले वैरिएबल पर क्लिक करें.
  6. वैरिएबल टाइप के तौर पर डेटा लेयर वैरिएबल चुनें.
  7. डेटा लेयर वैरिएबल के नाम के तौर पर screenName डालें.
  8. डिफ़ॉल्ट वैल्यू सेट करें पर क्लिक करें.
  9. डिफ़ॉल्ट वैल्यू के तौर पर स्क्रीन की जानकारी नहीं है डालें.
  10. वैरिएबल बनाएं पर क्लिक करें.

c. 'स्क्रीन व्यू' टाइटल वाला GTM टैग बनाएं

  1. Google Tag Manager खाते में साइन इन करें.
  2. मोबाइल कंटेनर चुनें.
  3. बाएं नेविगेशन बार में, टैग पर क्लिक करें.
  4. नया पर क्लिक करें.
  5. टैग का नाम स्क्रीन व्यू डालने के लिए, बिना टाइटल वाला टैग पर क्लिक करें.
  6. Google Analytics प्रॉडक्ट चुनें.
  7. सूची से ट्रैकिंग आईडी चुनें.
  8. ट्रैक टाइप के तौर पर ऐप्लिकेशन व्यू चुनें.
  9. ज़्यादा सेटिंग पर क्लिक करें.
  10. सेट किए जाने वाले फ़ील्ड पर क्लिक करें.
  11. + फ़ील्ड जोड़ें पर क्लिक करें.
  12. फ़ील्ड का नाम screenName और उसकी वैल्यू स्क्रीन नाम चुनें.
  13. जारी रखें पर क्लिक करें.
  14. चालू करें में जाकर, कोई भी इवेंट चुनें.
  15. टैग बनाएं पर क्लिक करें.

d. स्क्रीन ट्रैकिंग कोड जोड़ें

  1. ViewController.swift फ़ाइल को Xcode में खोलें.
  2. ViewController क्लास में dataLayer नाम का एक वैरिएबल तय करें:
    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. बटन दबाया गया टाइटल वाला GTM टैग बनाएं.
  4. यह ट्रैक करने के लिए कि बटन दबाया गया है, एक बटन बनाएं और कोड जोड़ें.

a. eventAction नाम का डेटा लेयर वैरिएबल बनाएं

  1. Google Tag Manager खाते में साइन इन करें.
  2. मोबाइल कंटेनर चुनें.
  3. बाईं ओर मौजूद नेविगेशन बार में, वैरिएबल पर क्लिक करें.
  4. उपयोगकर्ता के तय किए गए वैरिएबल में नया पर क्लिक करें.
  5. इवेंट की कार्रवाई टाइटल डालने के लिए, बिना टाइटल वाले वैरिएबल पर क्लिक करें.
  6. वैरिएबल टाइप के तौर पर डेटा लेयर वैरिएबल चुनें.
  7. डेटा लेयर वैरिएबल के नाम के तौर पर eventAction डालें.
  8. डिफ़ॉल्ट वैल्यू सेट करें पर क्लिक करें.
  9. डिफ़ॉल्ट वैल्यू के तौर पर अज्ञात इवेंट डालें.
  10. वैरिएबल बनाएं पर क्लिक करें.

b. इवेंट नाम का कस्टम इवेंट वैरिएबल बनाना

  1. Google Tag Manager खाते में साइन इन करें.
  2. मोबाइल कंटेनर चुनें.
  3. बाईं ओर मौजूद नेविगेशन बार में, वैरिएबल पर क्लिक करें.
  4. उपयोगकर्ता के तय किए गए वैरिएबल में नया पर क्लिक करें.
  5. वैरिएबल का नाम इवेंट डालने के लिए, बिना टाइटल वाले वैरिएबल पर क्लिक करें.
  6. वैरिएबल टाइप के तौर पर कस्टम इवेंट चुनें.
  7. वैरिएबल बनाएं पर क्लिक करें.

c. 'बटन दबाया गया' टाइटल वाला GTM टैग बनाएं

  1. Google Tag Manager खाते में साइन इन करें.
  2. मोबाइल कंटेनर चुनें.
  3. बाएं नेविगेशन बार में, टैग पर क्लिक करें.
  4. नया पर क्लिक करें.
  5. टैग का नाम बटन दबाया गया डालने के लिए, बिना टाइटल वाले टैग पर क्लिक करें.
  6. Google Analytics प्रॉडक्ट चुनें.
  7. सूची से ट्रैकिंग आईडी चुनें.
  8. ट्रैक टाइप के तौर पर इवेंट चुनें.
  9. इवेंट की कैटगरी चुनें.
  10. इवेंट की कार्रवाई चुनें.
  11. जारी रखें पर क्लिक करें.
  12. चालू करें में जाकर, कोई भी इवेंट चुनें.
  13. टैग बनाएं पर क्लिक करें.

d. यह ट्रैक करने के लिए कि बटन दबाया गया है, एक बटन बनाएं और कोड जोड़ें

  1. अपना Xcode प्रोजेक्ट खोलें.
  2. Main.storyboard खोलें.
  3. यूटिलिटी एरिया (दायां साइडबार) खोलने के लिए, Xcode टूलबार में सबसे ऊपर दाईं ओर मौजूद बटन पर क्लिक करें. स्टोरी बोर्ड और उसके काम की जगह
  4. बिजली, पानी जैसी सुविधाओं की खपत वाली जगह में सबसे नीचे,
    ऑब्जेक्ट लाइब्रेरी खोलने के लिए नीला बटन

    ऑब्जेक्ट लाइब्रेरी दिखाएं बटन (नीला बटन) पर क्लिक करें:

    ऑब्जेक्ट लाइब्रेरी की पॉप-अप विंडो
  5. खोज बॉक्स पर बटन डालें.
    ऑब्जेक्ट लाइब्रेरी में बटन
  6. बटन को स्टोरीबोर्ड में खींचें और छोड़ें और उसे सबसे ऊपर बाएं कोने में छोड़ें.
    बटन को स्टोरीबोर्ड पर खींचें और छोड़ें
  7. Xcode टूलबार में Assistant एडिटर बटन Assistant एडिटर बटन पर क्लिक करें.
  8. Ctrl बटन को दबाकर रखें. इसके बाद, बटन को खींचकर ViewController क्लास की परिभाषा के नीचे छोड़ दें.
    ViewController क्लास की परिभाषा में आने वाले बटन को खींचें और छोड़ें
  9. डायलॉग बॉक्स में, Action कनेक्शन चुनें. इसके बाद, फ़ंक्शन का नाम 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 से ऐप्लिकेशन बनेगा और चलेगा:

लॉन्च किए गए ऐप्लिकेशन का स्क्रीनशॉट