आम तौर पर, तेज़ी से लोड होने वाले लैंडिंग पेजों से ज़्यादा कन्वर्ज़न मिलते हैं. साथ ही, एएमपी की मदद से, आकर्षक और तेज़ी से लोड होने वाले Google Ads लैंडिंग पेज बनाए जा सकते हैं. amp.dev, वेब डेवलपर को ऐसे संसाधन उपलब्ध कराता है जिनकी मदद से वे आकर्षक और बेहतर परफ़ॉर्म करने वाले पेज बना सकते हैं. इस सिलसिलेवार गाइड में, एएमपी पेजों में Google Ads और विज्ञापन से जुड़ी अन्य टेक्नोलॉजी का इस्तेमाल करने का तरीका बताया गया है.
पहला चरण: एएमपी पेज बनाना और उनकी पुष्टि करना
एएमपी पेज बनाना
बेसिक एएमपी पेज बनाने का तरीका जानने के लिए, एएमपी प्रोजेक्ट का अपना पहला एएमपी पेज बनाएं ट्यूटोरियल देखें. ज़्यादा जानकारी और चरण-दर-चरण निर्देश पाने के लिए, एचटीएमएल को एएमपी में बदलना और एएमपी की बेहतर सुविधाएं जोड़ना ट्यूटोरियल देखें. एएमपी वेबसाइट के उदाहरण और एएमपी टेंप्लेट पर, एएमपी कॉम्पोनेंट के सैंपल कोड और टेंप्लेट देखे जा सकते हैं.
नीचे दी गई सूची में, एएमपी पेजों पर इस्तेमाल किए जाने वाले कुछ कॉम्पोनेंट के बारे में बताया गया है. रेफ़रंस के लिए, कॉम्पोनेंट की पूरी सूची देखें.
- amp-bind: JavaScript जैसे इवेंट के आधार पर, उपयोगकर्ता के स्टेटस के हिसाब से काम करने वाली कस्टम इंटरैक्टिविटी जोड़ें.
- amp-form: ऐसे लैंडिंग पेज बनाएं जिनमें उपयोगकर्ता के इनपुट की ज़रूरत होती है.
- amp-list: सीओआरएस JSON एंडपॉइंट से, कॉन्टेंट को डाइनैमिक तौर पर फ़ेच करें.
- amp-carousel: इमेज गैलरी को स्क्रोल करने के लिए इमेज कैरसेल.
- amp-lightbox: किसी कॉम्पोनेंट के साथ इंटरैक्ट करने पर, उसे फ़ुल स्क्रीन व्यू में दिखाएं.
- amp-call-tracking, कॉल ट्रैकिंग के लिए हाइपरलिंक में मौजूद फ़ोन नंबर को डाइनैमिक तौर पर बदल देता है.
- amp-mustache: Mustache.js की मदद से रेंडर करने की अनुमति देता है.
- amp-date-picker: तारीखें चुनने के लिए विजेट उपलब्ध कराता है. तारीख चुनने वाला टूल, इनपुट फ़ील्ड के हिसाब से ओवरले के तौर पर या स्टैटिक कैलेंडर विजेट के तौर पर रेंडर हो सकता है.
एएमपी पेजों की पुष्टि करना
डेवलपमेंट के दौरान, आपको यह पक्का करना होगा कि आपके एएमपी पेज मान्य हों. आपके दस्तावेज़ों की पुष्टि करने के लिए, एएमपी में कई अलग-अलग तरीके उपलब्ध हैं. एएमपी पेज की पुष्टि करने का सबसे सामान्य तरीका, वेब वैलिडेटर या Google Webmaster Tools के वैलिडेटर का इस्तेमाल करना है. Chrome ब्राउज़र प्लग इन और डेवलपर कंसोल का भी इस्तेमाल किया जा सकता है. इसके अलावा, अपने बिल्ड में amphtml-validator npm मॉड्यूल को इंटिग्रेट किया जा सकता है.
AMPBench का भी इस्तेमाल किया जा सकता है. यह एक ओपन सोर्स वेब ऐप्लिकेशन और सेवा है. इसका इस्तेमाल, एएमपी पेजों के डिप्लॉयमेंट से जुड़ी समस्याओं की पुष्टि करने और उन्हें डीबग करने के लिए किया जाता है.
एएमपी टेस्टिंग से जुड़ी मदद पाने के लिए, एएमपी प्रोजेक्ट के सहायता पाएं पेज पर जाएं.
दूसरा चरण: कन्वर्ज़न ट्रैकिंग और आंकड़ों के लिए AMP सेट अप करना
Google Ads कन्वर्ज़न ट्रैकिंग
Google Ads कन्वर्ज़न ट्रैक करने के लिए, amp-analytics कॉम्पोनेंट का इस्तेमाल करें. इसे सेट अप करने का तरीका जानने के लिए, एएमपी लैंडिंग पेजों के लिए Google Ads कन्वर्ज़न मेज़रमेंट सेट अप करना लेख में दिया गया तरीका अपनाएं.
Google Analytics
Google Analytics, amp-analytics के साथ काम करने वाले विश्लेषण के तरीकों में से एक है. एएमपी और बिना एएमपी वाले पेजों पर एक जैसे सेशन बनाने के लिए, एएमपी के लिए Google Analytics सेशन यूनिफ़िकेशन सेट अप करना लेख में दिया गया तरीका अपनाएं.
Google Tag Manager
amp-analytics घटक में, Google Tag Manager के लिए पहले से सहायता मौजूद होती है. Google Ads कन्वर्ज़न के अलावा, Google Tag Manager का इस्तेमाल करके रीमार्केटिंग, DoubleClick Floodlight, Google Universal Analytics, और मिलते-जुलते मेज़रमेंट प्रॉडक्ट जोड़े जा सकते हैं. काम करने वाले टैग की पूरी सूची देखें.
Adobe Analytics (पहले इसे Omniture के नाम से जाना जाता था)
Adobe Analytics, amp-analytics कॉम्पोनेंट की मदद से, वेबसाइट की परफ़ॉर्मेंस ट्रैक करने के लिए दो तरीके उपलब्ध कराता है: iframe (adobeanalytics_nativeConfig
) और नॉन-iframe (adobeanalytics
) लागू करना. हर तरीके के फ़ायदों/नुकसानों और लागू करने के बारे में पढ़ें.
Google Ads से जुड़ी अन्य सामान्य टेक्नोलॉजी को इंटिग्रेट करना
उपयोगकर्ता की कार्रवाइयों और इवेंट को ट्रैक करने के लिए, amp-analytics कॉम्पोनेंट का इस्तेमाल किया जा सकता है. एएमपी Analytics में, 40 से ज़्यादा ऐनलिटिक्स वेंडर की नेटिव मदद मिलती है. यह फ़्रेमवर्क आसानी से इस्तेमाल किया जा सकता है. साथ ही, इससे कस्टम कॉन्फ़िगरेशन का इस्तेमाल करके, यूआरएल को मेज़र और ट्रिगर किया जा सकता है. इससे, अपने सर्वर या उन वेंडर को Analytics की जानकारी भेजी जा सकती है जहां नेटिव AMP की सहायता उपलब्ध नहीं है. अगर किसी ऐसी टेक्नोलॉजी का इस्तेमाल किया जा रहा है जो फ़िलहाल काम नहीं करती, तो अपने वेंडर से सहायता जोड़ने के लिए कहें.
एएमपी Analytics में, वैरिएबल को आसानी से बदला जा सकता है. ज़्यादा जानकारी के लिए, वैरिएबल बदलने का दस्तावेज़ देखें.
तीसरा चरण: Google Ads यूज़र इंटरफ़ेस (यूआई) में AMP सेविंग की सुविधा चालू करना
Google Search में एएमपी पेजों को आपके पेजों से लिंक करके, अपने-आप खोजा जाता है. हालांकि, विज्ञापन देने वालों को Google Ads में एएमपी पेज का यूआरएल साफ़ तौर पर डालना होगा. Google Ads यूज़र इंटरफ़ेस (यूआई) में एएमपी यूआरएल सेट अप करने के बारे में जानने के लिए, Google Ads के साथ एएमपी का इस्तेमाल करने का तरीका लेख पढ़ें.
फ़िलहाल, कैश मेमोरी में सेव करके दिखाने की सुविधा, Google के खोज नतीजों वाले पेजों पर टेक्स्ट विज्ञापनों के लिए उपलब्ध है. ये पेज, ज़्यादातर मुख्य ब्राउज़र पर दिखाए जाते हैं. इनमें Android Chrome, Android Google Search ऐप्लिकेशन, और Mobile Safari शामिल हैं. हम आने वाले महीनों में और ज़्यादा कवरेज जारी कर रहे हैं.
अगर आपको यह जांचना है कि Google Search व्यूअर में, Google एएमपी कैश से डिलीवर किए जाने पर एएमपी पेज कैसा दिखता है, तो Search के एएमपी जांच टूल में अपना एएमपी लेख डालें और झलक का लिंक पर क्लिक करें.
अगर आपको Google Ads ट्रैफ़िक को अपने एएमपी लैंडिंग पेज पर लाना है, लेकिन आपको उसे ऑर्गैनिक सर्च के नतीजों में नहीं दिखाना है, तो अपने robots.txt
में काम के एएमपी पेजों के लिए, 'अनुमति न दें' निर्देश जोड़ें. यह ठीक वैसा ही है जैसे किसी सामान्य वेब पेज के लिए किया जाता है.
लैंडिंग पेजों पर एएमपी कॉन्टेंट अपडेट करना
जब कोई उपयोगकर्ता Google एएमपी कैश से किसी एएमपी दस्तावेज़ का अनुरोध करता है, तो कैश अपने-आप अपडेट का अनुरोध करता है. इससे कॉन्टेंट के कैश मेमोरी में सेव होने के बाद, उस पेज पर आने वाले अगले व्यक्ति को नया कॉन्टेंट दिखता है. इस मॉडल की मदद से, एएमपी दस्तावेज़ों में किए गए अपडेट अपने-आप और तेज़ी से लागू हो जाते हैं. इसलिए, आपके अपडेट करने के बाद, कुछ ही उपयोगकर्ताओं को अपडेट नहीं किया गया वर्शन दिखेगा. इसके अलावा, ज़रूरत पड़ने पर, एएमपी कैश मेमोरी से कॉन्टेंट को अपडेट करने या हटाने के लिए, update-cache API का इस्तेमाल किया जा सकता है.
AMP प्रोजेक्ट में हर दिन नई सुविधाएं और कॉम्पोनेंट जोड़े जा रहे हैं. अगर आपको कोई ऐसा फ़ंक्शन मिलता है जो मौजूद नहीं है, तो GitHub पर गड़बड़ी की शिकायत करके, योगदान दें या उसे जोड़ने का अनुरोध करें.
एएमपी पेज को हैंडल करने का तरीका अमान्य है
जब कोई पेज अमान्य हो जाता है, तो एएमपी कैश मेमोरी को कुछ अनुरोधों के अंदर ही इसकी जानकारी मिल जाती है. इसके बाद, वह एएमपी पेज पर रीडायरेक्ट करना शुरू कर देता है जिसे ऑरिजिन से दिखाया गया है. AMP कैश मेमोरी सेट अप करने में एक से दो दिन लग सकते हैं.