מדריך ליצירת אירוע המרה בגוגל Ads באמצעות JavaScript באתר וורדפרס

כתובת מייל

צרו קשר

מדריך ליצירת אירוע המרה בגוגל Ads באמצעות JavaScript באתר וורדפרס

*מתאים גם לאירוע המרה של google analytics 4.
היום נלמד כיצד ליצור אירוע המרה בגוגל Ads באופן דינמי באתר וורדפרס. האירוע יתרחש כאשר מוצגת למשתמש הודעת הצלחה לאחר מילוי טופס, למשל טופס יצירת קשר. המטרה היא לשלוח מידע ל-Google Ads על הצלחה של פעולה (Conversion), מה שיסייע לכם למדוד ולייעל קמפיינים ממומנים.

מה תפקיד הקוד?

הקוד נועד לזהות מתי אלמנט (במקרה שלנו, הודעת ההצלחה) הופך לגלוי (Visible) על המסך, וברגע שזה קורה – להפעיל את האירוע של גוגל Ads.

הסבר הקוד צעד-אחר-צעד:

1. טעינת ספריית jQuery הקוד עטוף בפונקציה jQuery(document).ready() שמוודאת שהקוד ירוץ רק לאחר שכל דף האתר נטען במלואו:

Copy to Clipboard

2. יצירת דגל (Flag) המשתנה conversionTracked נועד לוודא שהאירוע מופעל רק פעם אחת, כדי למנוע ספירת כפילויות:

Copy to Clipboard

3. שימוש ב-MutationObserver הקוד משתמש ב-MutationObserver, שמאזין לשינויים בדף ה-HTML. בכל פעם שהאלמנט משתנה (למשל הופך לגלוי), הקוד בודק את המצב ומפעיל אירוע:

כאשר תנאי זה מתקיים (אלמנט גלוי), יישלח אירוע ל-Google Ads בעזרת הפונקציה gtag.

Copy to Clipboard

4. איתור האלמנט להאזנה הקוד מחפש את הודעת ההצלחה לפי ה-selector הספציפי:

Copy to Clipboard

אם האלמנט קיים בדף, ה-MutationObserver יתחיל להאזין לשינויים במאפייני ה-style של האלמנט. במידה ולא קיים, יוצג warning בקונסול.

הקוד המלא

Copy to Clipboard

jQuery(document).ready(function($) {
        // Flag to track whether the message has been logged
        var conversionTracked = false;

// Monitor DOM changes to detect when the success message is displayed
        var observer = new MutationObserver(function(mutations) {
            var x = 0;
            mutations.forEach(function(mutation)  {
                if (!conversionTracked && mutation.target.style.display === 'block') { // Check if element is visible
                    gtag('event', 'conversion', {
                        'send_to': 'AW-', // your google ads Conversion code
                        'value': 1.0,
                        'currency': 'ILS'
                    });
                    console.log('Conversion tracked!' + x);
                    x++;
                    conversionTracked = true; // Set the flag to true
                    observer.disconnect(); // Stop observing further changes
                }
            });
        });
    
        // Target the success message element
        var target = document.querySelector('#contact_us_big_form #form_messages .alert-success');
        if (target) {
            observer.observe(target, { attributes: true, attributeFilter: ['style'] });
        }
        else {
            console.warn('Target element not found.');
        }
    });

איך להטמיע את הקוד באתר וורדפרס?

הטמיעו את קוד ה-JavaScript בדף הספציפי שבו מופיע הטופס.
ודאו שמזהה הטופס (selector) תואם בדיוק את הטופס שלכם.
וודאו שתג ה-gtag של גוגל אנליטיקס או Google Ads מותקן באתר שלכם.
סיכום
הקוד הנ"ל מאפשר יצירת אירועים דינמיים לשיפור המעקב אחר הצלחת הקמפיינים שלכם בגוגל Ads, ויעזור לכם לקבל החלטות שיווקיות מדויקות ומבוססות נתונים.

Categories: כללי /

מדריך ליצירת אירוע המרה בגוגל Ads באמצעות JavaScript באתר וורדפרס

מדריך ליצירת אירוע המרה בגוגל Ads באמצעות JavaScript באתר וורדפרס

מה תפקיד הקוד?

📰🚀 "חדשות, טיפים וסיפורים מהעולם הדיגיטלי – בלי באגים, רק באזז!"

מדריך ליצירת אירוע המרה בגוגל Ads באמצעות JavaScript באתר וורדפרס

אבטחת אתרי וורדפרס wordpress

העסק/החברה שלכם – המשימה שלנו.