Як адсочваць прадстаўленні формы Elementor у падзеях Google Analytics з дапамогай JQuery

Як адсочваць прадстаўленні формы Elementor у падзеях Google Analytics

Я працаваў над кліенцкім сайтам WordPress апошнія некалькі тыдняў, які мае даволі шмат складанасцяў. Яны выкарыстоўваюць WordPress з інтэграцыяй у ActiveCampaign для выхавання патэнцыйных кліентаў і а Zapier інтэграцыя ў Зендэск прадаюць праз Формы Elementor. Гэта цудоўная сістэма ... пачынаючы кропельныя кампаніі для людзей, якія запытваюць інфармацыю, і даведваючыся да адпаведнага гандлёвага прадстаўніка, калі яго запытваюць. Я сапраўды ўражаны гнуткасцю формы і выглядам Elementor.

Апошнім крокам было прадастаўленне кліенту панэлі аналітыкі праз Google Analytics, якая забяспечвала ім паказчыкі па адпраўках формаў за месяц. У іх усталяваны Дыспетчар тэгаў Google, таму мы ўжо фіксуем транзакцыі электроннай камерцыі і прагляд YouTube на сайце.

Я рабіў некалькі спробаў выкарыстоўваць DOM, трыгеры і падзеі ў Менеджары тэгаў Google, каб зафіксаваць паспяховую адпраўку формы для Elementor, але мне не пашанцавала. Я пратэставаў мноства розных спосабаў маніторынгу старонкі, назіраючы за паведамленнем аб поспеху, якое з'явіцца праз AJAX, і гэта проста не працуе. Такім чынам ... Я пашукаў і знайшоў выдатнае рашэнне ад тэлеканала Tracking Chef Адсочванне формы куленепрабівальнага элемента з GTM.

Сцэнар выкарыстоўвае JQuery і Google Tag Manager, каб націснуць кнопку Падзея 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 для ўсіх вашых кліентаў. Гэта трывалая платформа, і колькасць партнёрскіх інтэграцый працягвае расці. Злучыце яго з такім убудовай, як Кантактная форма БД і вы таксама можаце сабраць усе прадстаўленыя формы.

Elementor Pro мае выдатны варыянт кіравання сцэнарамі. Увядзіце код:

Карыстальніцкі код Elementor

  • перайдзіце да Elementor> Карыстальніцкі код
  • Назавіце свой код
  • Усталюйце месцазнаходжанне, у дадзеным выпадку канец тэг цела.
  • Усталюйце прыярытэт, калі ў вас ёсць некалькі сцэнарыяў, якія вы хочаце ўставіць, і задайце іх парадак.

Адпраўка формы Elementor на мерапрыемства GA праз GTM

  • Націсніце абнавіць
  • Вам будзе прапанавана ўсталяваць умову і проста ўсталяваць па змаўчанні для ўсіх старонак.
  • Абнавіце кэш, і ваш сцэнар жывы!

Папярэдні прагляд вашай інтэграцыі Google Tag Manager

Дыспетчар тэгаў Google мае фантастычны механізм для падлучэння да асобніка браўзэра і на самай справе правярае ваш код, каб назіраць, ці правільна адпраўлены зменныя. Гэта вельмі важна, таму што Google Analytics не працуе ў рэжыме рэальнага часу. Вы можаце праверыць, праверыць і праверыць і сапраўды расчаравацца ў тым, што дадзеныя не адлюстроўваюцца ў Google Analytics, калі вы гэтага не разумелі.

Я не збіраюся даваць тут падручнік, як гэта зрабіць папярэдні прагляд і адладка Менеджара тэгаў Google... Я збіраюся выказаць здагадку, што вы ведаеце. Я магу адправіць сваю форму на падлучаную тэставую старонку і ўбачыць, як дадзеныя перадаюцца ў дадзеныя GTM, як гэта павінна быць:

ўзровень дадзеных менеджэра тэгаў Google

У гэтым выпадку катэгорыя была жорстка закадавана як Форма, мэтай была форма Звязацца з намі, а пазнака-Адпраўка.

У Дыспетчары тэгаў Google Наладзьце зменныя дадзеных, падзеі, трыгер і тэг

Апошні крок у гэтым - наладзіць Дыспетчар тэгаў Google для ўліку гэтых зменных і адпраўкі іх у тэг Google Analytics, створаны для падзеі. Элад Леві падрабязна апісвае гэтыя крокі ў сваім іншым паведамленні - Агульнае адсочванне падзей у Google Tag Manager.

Пасля таго, як яны будуць настроены, вы зможаце ўбачыць падзеі ў Google Analytics!

Атрымайце Elementor Pro

Раскрыццё інфармацыі: Я выкарыстоўваю свае партнёрскія спасылкі на працягу гэтага артыкула.

6 Каментары

  1. 1
  2. 3

    Я выкарыстоўваю некалькі крокаў у форме elementor, але я хачу адсочваць падзею, калі карыстальнік націскае кнопку «Далей».
    Вы можаце ведаць мне гэтую падзею. Дзякуй!

  3. 5

Што вы думаеце?

Гэты сайт выкарыстоўвае Akismet для барацьбы са спамам. Даведайцеся, як дадзеныя апрацоўваюцца каментар.