Google Tag Manager मध्ये Custom CSS आणि HTML Code जोडायचा आहे? परंतु <style>Your css code</style> असे कस्टम HTML मध्ये जोडल्यास ते trigger माझ्या वेबसाईटवर काम करत नाही, यावर काय करावे?

Question

Google Tag Manager मध्ये Custom CSS आणि HTML Code जोडायचा आहे? परंतु <style>Your css code</style> असे कस्टम HTML मध्ये जोडल्यास ते trigger माझ्या वेबसाईटवर काम करत नाही, यावर काय करावे?

2 उत्तरे

2 answers

Google Tag Manager मध्ये Custom CSS आणि HTML Code जोडायचा आहे? परंतु <style>Your css code</style> असे कस्टम HTML मध्ये जोडल्यास ते trigger माझ्या वेबसाईटवर काम करत नाही, यावर काय करावे?

0

तुम्ही Google Tag Manager (GTM) मध्ये कस्टम CSS आणि HTML कोड जोडण्याचा प्रयत्न करत आहात, परंतु <style>Your css code</style> असा कोड कस्टम HTML मध्ये जोडल्यास तो तुमच्या वेबसाइटवर अपेक्षेप्रमाणे काम करत नाही आहे, असे दिसते. या समस्येचं कारण आणि उपाय खालीलप्रमाणे:

समस्या

CSS योग्यरित्या लागू होत नाही: <style> टॅग HTML मध्ये योग्य ठिकाणी (उदा. <head> विभागात) ठेवणे आवश्यक आहे. GTM द्वारे इंजेक्ट केलेले CSS नेहमी अपेक्षेप्रमाणे काम करत नाही, कारण ते डॉक्यूमेंटच्या <body> मध्ये जोडले जाते.
Triggering चा मुद्दा: तुमचा trigger योग्यरित्या सेट नसेल, तर कोड फायर होणार नाही.

उपाय

CSS साठी इनलाइन स्टाईल वापरा:
- प्रत्येक HTML एलिमेंटमध्ये थेट CSS प्रॉपर्टीज जोडा.
- उदाहरण: <p >This is a paragraph.</p>
- फायदा: हे सुनिश्चित करते की CSS थेट एलिमेंटला लागू होईल.
- तोटा: हे CSS ला जास्त प्रमाणात वाढवते आणि कोड वाचायला किचकट वाटू शकतो.
जावास्क्रिप्ट वापरून CSS जोडा:
- एक कस्टम HTML टॅग तयार करा आणि खालील जावास्क्रिप्ट कोड वापरा:
```
<script>
  var style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = 'Your CSS code here';
  document.getElementsByTagName('head')[0].appendChild(style);
</script>
```
- फायदा: हे <head> विभागात CSS जोडते, ज्यामुळे ते योग्यरित्या लागू होते.
- तोटा: यासाठी तुम्हाला जावास्क्रिप्टची मूलभूत माहिती असणे आवश्यक आहे.
लिंक टॅग वापरा (External CSS):
- तुमच्या CSS कोडला एका स्वतंत्र फाईलमध्ये (उदा. style.css) सेव्ह करा.
- त्या फाईलला तुमच्या वेब होस्टिंगवर अपलोड करा.
- GTM मध्ये एक कस्टम HTML टॅग तयार करा आणि खालील कोड वापरा:
```
<link rel="stylesheet" type="text/css" href="your-css-file.css">
```
- your-css-file.css ला तुमच्या CSS फाईलच्या URL ने बदला.
- फायदा: CSS कोड व्यवस्थित ठेवला जातो आणि तो अनेक पानांवर वापरला जाऊ शकतो.
- तोटा: यासाठी तुम्हाला CSS फाईल होस्ट करण्याची आवश्यकता आहे.
ट्रिगर (Trigger) तपासा:
- तुमचा ट्रिगर योग्यरित्या कॉन्फिगर केलेला आहे का ते तपासा. तो पेज व्ह्यू (Page View) किंवा तुमच्या गरजेनुसार इतर इव्हेंटवर सेट केलेला असावा.
- ट्रिगर फायर होत आहे की नाही हे पाहण्यासाठी GTM च्या Preview मोडचा वापर करा.
GTM Preview मोड:
- GTM च्या Preview मोडमध्ये, तुम्ही तुमची वेबसाइट तपासू शकता आणि पाहू शकता की तुमचे टॅग आणि ट्रिगर अपेक्षेप्रमाणे काम करत आहेत की नाही.

उदाहरण

समजा तुम्हाला एका विशिष्ट ID असलेल्या div चा रंग बदलायचा आहे, तर तुम्ही खालीलप्रमाणे करू शकता:

1. इनलाइन स्टाईल:

<div id="myDiv" >This is my div.</div>

2. जावास्क्रिप्ट आणि कस्टम HTML टॅग:

<script>
  var style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = '#myDiv { color: red; }';
  document.getElementsByTagName('head')[0].appendChild(style);
</script>
<div id="myDiv">This is my div.</div>

टीप:

GTM मध्ये कोणताही कोड जोडताना काळजी घ्या. चुकीच्या कोडमुळे वेबसाइटवर अनपेक्षित परिणाम होऊ शकतात.
कोणताही बदल करण्यापूर्वी आपल्या वेबसाइटचा बॅकअप घ्या.

उत्तर लिहिले · 25/3/2025

उत्तर रोबोट

कर्म · 680

Related Questions