JQuery көмегімен Google Analytics оқиғаларында элементтік форманың жіберілуін қалай бақылауға болады

Мен соңғы бірнеше аптада WordPress клиенттік сайтында жұмыс жасадым, оның күрделілігі аз. Олар қолданады WordPress интеграциясымен ActiveCampaign жетекшілерді тәрбиелеу үшін және а Zapier интеграциялау Zendesk сату арқылы Элементорлық формалар. Бұл тамаша жүйе ... ақпарат сұрайтын адамдарға тамшылату науқандарын бастайды және сұраныс бойынша тиісті сату өкілін шақырады. Мен Элементордың пішінінің икемділігі мен келбеті мен сезіміне қатты таң қалдым.

Соңғы қадам клиентке Google Analytics арқылы аналитикалық бақылау тақтасын ұсыну болды, бұл оларға ай сайын форманы жіберу бойынша өнімділікті қамтамасыз етті. Оларда Google тегтер менеджері орнатылған, сондықтан біз қазірдің өзінде сайтта электронды коммерциялық операциялар мен YouTube көру әрекетін жазып отырмыз.

Мен Google Tag Manager ішіндегі DOM -ды, триггерлерді және оқиғаларды Elementor -ге сәтті жіберу формасын алу үшін бірнеше рет жасадым, бірақ сәттілік болмады. Мен AJAX арқылы шығатын сәттілік туралы хабарды қарап, бетті бақылаудың көптеген әдістерін сынап көрдім және ол жұмыс істемеді. Сонымен ... мен біраз іздестірдім және Бақылаушы аспазшы деп аталатын тамаша шешімді таптым GTM көмегімен оқ өткізбейтін Elementor формасын бақылау.

Сценарий пайдаланады айдағыштарды және Google тегтер менеджері түймесін басыңыз Google Analytics оқиғасы форма сәтті жіберілген кезде. Кішкене түзетулер мен бір синтаксисті жақсартудың арқасында менде қажеттінің бәрі болды. Міне код:

<script>
jQuery(document).ready(function($) {
    $(document).on('submit_success', function(evt) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
            'event': 'ga_event',
            'eventCategory': 'Form ',
            'eventAction': evt.target.name,
            'eventLabel': 'Submission'
        });
    });
});
</script>

Бұл өте тапқыр, сәтті тапсыруды күтіп, содан кейін өтеді форма санаты ретінде баратын жердің атауы әрекет ретінде және ұсыну белгісі ретінде. Мақсатты бағдарламалық түрде жасай отырып, сіз форманы жіберуді бақылау үшін бұл кодты әр беттің төменгі колонтитулінде ұстай аласыз. Сонымен ... формаларды қосқанда немесе өзгерткенде, сценарийді жаңарту немесе оны басқа бетке қосу туралы ешқашан алаңдамайсыз.

Сценарийді Elementor Custom Code арқылы орнатыңыз

Егер сіз агенттік болсаңыз, мен сіздің барлық клиенттеріңізге Elementor -ді шексіз жаңартуды және қолдануды ұсынамын. Бұл сенімді платформа және серіктестер интеграциясының саны өсуді жалғастыруда. Оны плагин сияқты қосыңыз DB байланыс формасы және сіз өзіңіздің барлық формаларыңызды жинай аласыз.

Elementor Pro сценарийді басқарудың керемет нұсқасы бар. Мұнда кодты қалай енгізуге болады:

• Шарлау тармағына өтіңіз Элемент> Жеке код
• Кодыңызды атаңыз
• Орнын орнатыңыз, бұл жағдайда соңы дене белгісі.
• Егер сізде бірнеше сценарий енгізгіңіз келсе және олардың ретін орнатсаңыз, басымдықты орнатыңыз.

• Жаңарту түймесін басыңыз
• Сізден шартты орнату сұралады және оны барлық беттердің әдепкі мәніне орнатыңыз.
• Кэшіңізді жаңартыңыз, сценарийіңіз тірі!

Google тегтер менеджерінің интеграциясын алдын ала қарау

Google тегтер менеджерінде браузер данасына қосылудың және айнымалылардың дұрыс жіберілмегенін бақылау үшін кодты тексерудің керемет механизмі бар. Бұл өте маңызды, себебі Google Analytics нақты уақыт режимінде емес. Сіз мұны байқамасаңыз, Google Analytics -те деректер көрсетілмейтініне сынап, сынап көре аласыз және шынымен ашуланасыз.

Мен мұнда қалай жасау керектігі туралы оқулық бермеймін Google тегтер менеджерін алдын ала қарау және күйін келтіру... Сіз білесіз деп ойлаймын. Мен форманы байланысқан сынақ бетіне жібере аламын және GTM деректеріне жіберілген деректерді қажет болған жағдайда көре аламын:

Бұл жағдайда санат форма ретінде қатаң кодталған, мақсат-бізбен байланысу формасы, ал жапсырма-жіберу.

Google тег менеджерінде деректер айнымалысын, оқиғаны, триггерді және тегті орнатыңыз

Бұл үшін соңғы қадам - ​​бұл айнымалыларды алу үшін Google тегтер менеджерін орнату және оларды оқиғаға орнатылған Google Analytics тегіне жіберу. Элад Леви бұл қадамдарды басқа жазбасында егжей -тегжейлі баяндайды - Google тегтер менеджеріндегі оқиғаларды бақылау.

Олар орнатылғаннан кейін сіз Google Analytics -те оқиғаларды көре аласыз!

Elementor Pro алыңыз

Ақпаратты ашу: Мен осы мақалада серіктестік сілтемелерімді қолданып жүрмін.