Google Tag Manager (GTM) से हीटमैप कैसे इंस्टॉल करें (बिना कोड एडिट किए, 5 मिनट में)

लेख सारांश

GTM की मदद से आप अपनी साइट के कोड को बिल्कुल भी छुए बिना हीटमैप इंस्टॉल कर सकते हैं

पाँच स्टेप्स: एक Custom HTML tag बनाएँ → उसमें All Pages trigger जोड़ें → publish करें

सफलता का मतलब है कि आपके HeatMapX डैशबोर्ड पर नंबर्स बढ़ रहे हैं — सिर्फ़ "कोई एरर नहीं" काफ़ी नहीं है

अगर आपकी साइट पहले से Google Tag Manager (GTM) के ज़रिए tags मैनेज करती है, तो हीटमैप ट्रैकिंग जोड़ने का सबसे साफ़-सुथरा तरीका यही है: सब कुछ GTM के interface में होता है, कोड में कोई बदलाव नहीं करना पड़ता। यह गाइड आपको यह पूरा प्रोसेस स्टेप-बाय-स्टेप दिखाती है।

शुरू करने से पहले: अपनी site key लें

HeatMapX पर साइन अप करें (एक free plan उपलब्ध है, किसी credit card की ज़रूरत नहीं), अपनी साइट रजिस्टर करें, और आपको एक site key मिलेगी।

site key मिलने के बाद, आप इस फ़ॉर्म वाला एक tag इस्तेमाल करेंगे — YOUR-SITE-KEY की जगह अपनी असली key डालें:

<script src="https://heatmapx.com/tracker.js?key=YOUR-SITE-KEY" data-site-key="YOUR-SITE-KEY"></script>

ज़रूरी बात: पूरा tag पेस्ट करें, सिर्फ़ URL नहीं। data-site-key="..." attribute यह बताता है कि data किस साइट का है — अगर आप इसे छोड़ देते हैं, या सिर्फ़ src वाला URL पेस्ट करते हैं, तो कुछ भी ट्रैक नहीं होगा।

GTM में सेटअप (5 स्टेप्स)

GTM console (tagmanager.google.com) खोलें और अपनी साइट का container (workspace) चुनें
बाईं ओर के मेनू में "Tags" → "New" पर जाएँ, और tag type के तौर पर "Custom HTML" चुनें
ऊपर वाला पूरा tag HTML फ़ील्ड में पेस्ट करें
triggering में जाकर "All Pages (Page View)" चुनें, tag को कोई पहचानने लायक नाम दें (जैसे HeatMapX), और save करें
ऊपर दाईं ओर "Submit / Publish" पर क्लिक करें ताकि बदलाव live हो जाए

बस इतना ही — अब आपकी साइट के हर पेज पर ट्रैकिंग चल रही है।

Publish करने से पहले जाँचना चाहते हैं? (Preview mode)

live जाने से पहले GTM में "Preview" पर क्लिक करें और अपने ही ब्राउज़र में tag को टेस्ट करें। preview screen (Tag Assistant) के ज़रिए अपनी साइट खोलें — अगर आपका HeatMapX tag "Fired" के नीचे दिखता है, तो यह काम कर रहा है।

अगर tag fire नहीं होता — चेकलिस्ट

क्या आपने Publish दबाया? सिर्फ़ save करने से बदलाव live नहीं होते। यह सबसे common वजह है
क्या trigger All Pages पर सेट है? किसी एक पेज तक सीमित trigger का मतलब है कि बाकी पेजेस ट्रैक नहीं होंगे
क्या cookie consent banner (consent mode) इसे ब्लॉक कर रहा है? कुछ consent management tools में, विज़िटर के consent देने तक Custom HTML tags को रोक कर रखा जाता है। tag की consent settings और आपका CMP इसे किस तरह categorize करता है, यह चेक करें
क्या data-site-key सही है? किसी दूसरी साइट की key पेस्ट करने से आपका data गलत साइट में चला जाता है

Claude Code से पूरा प्रोसेस करवाएँ

अगर आप GTM के interface में इधर-उधर नहीं ढूँढना चाहते, तो Claude Code जैसे किसी AI agent से गाइड करवाया जा सकता है। नीचे दिया गया prompt कॉपी करें, अपनी site key डालें, और उसे पेस्ट कर दें।

I want to deploy the HeatMapX heatmap tracking tag via Google Tag Manager.
Walk me through the GTM interface one step at a time, waiting for my reply at each step.

The tag to use (Custom HTML, All Pages trigger):
<script src="https://heatmapx.com/tracker.js?key=YOUR-SITE-KEY" data-site-key="YOUR-SITE-KEY"></script>

अगर आप GTM इस्तेमाल नहीं करते और tag सीधे अपनी साइट के कोड में डालना चाहते हैं, तो यह वर्शन Claude Code से file edits भी करवा लेता है:

Install the HeatMapX heatmap tracking tag in this project.
Make sure the following tag is included right before </head> on every page, and tell me which files you changed.

<script src="https://heatmapx.com/tracker.js?key=YOUR-SITE-KEY" data-site-key="YOUR-SITE-KEY"></script>

HeatMapX इस तरह बनाया गया है कि आपका data pull और analyze करना भी Claude Code (CLI integration) से हो सकता है — setup पूरा होने के बाद अपने डैशबोर्ड पर "CLI & Skills" page देखें।

यह वाकई काम कर रहा है या नहीं, ऐसे जाँचें: नंबर्स को बढ़ना चाहिए

इंस्टॉल करने के बाद, अपनी साइट के कुछ पेजेस ब्राउज़ करें, फिर अपना HeatMapX डैशबोर्ड खोलें। अगर आपकी साइट के लिए "Sessions today" बढ़ रहा है, तो ट्रैकिंग live है।

सफलता की निशानी "कोई एरर नहीं" नहीं है — यह है डैशबोर्ड पर नंबर्स का बढ़ना। अगर कुछ भी नहीं बढ़ता, तो ऊपर दी गई चेकलिस्ट को क्रम से चेक करें।