JQueryを使用してGoogleAnalyticsイベントでElementorフォームの送信を追跡する方法

私はここ数週間、かなり複雑なクライアントのWordPressサイトに取り組んできました。 彼らは使用しています WordPress との統合により ActiveCampaign リードと Zapier への統合 Zendesk販売 、 Elementorフォーム。 これは素晴らしいシステムです…情報を要求する人々にドリップキャンペーンを開始し、要求されたときに適切な営業担当者にリードをプッシュします。 Elementorのフォームの柔軟性とルックアンドフィールに本当に感銘を受けました。

最後のステップは、Google Analyticsを介してクライアントに分析ダッシュボードを提供し、フォーム送信で月ごとのパフォーマンスを提供することでした。 Google Tag Managerがインストールされているため、サイトでのeコマーストランザクションとYouTubeビューアクティビティをすでにキャプチャしています。

Elementorのフォーム送信の成功をキャプチャするために、Google Tag Manager内でDOM、トリガー、およびイベントを利用しようと何度か試みましたが、まったく運がありませんでした。 AJAXを介してポップアップする成功メッセージを監視しながら、ページを監視するためのさまざまな方法をテストしましたが、機能していませんでした。 それで…私はいくつかの検索を行い、TrackingChefから呼ばれる素晴らしい解決策を見つけました GTMによる防弾Elementorフォームトラッキング.

スクリプトはを利用します jQueryの とGoogleタグマネージャーをプッシュする GoogleAnalyticsイベント フォームが正常に送信されたとき。 いくつかのマイナーな編集とXNUMXつの構文の改善により、必要なものはすべて揃った。 コードは次のとおりです。

<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を利用することを強くお勧めします。 これは堅固なプラットフォームであり、パートナー統合の数は急増し続けています。 のようなプラグインと組み合わせてください お問い合わせフォームDB また、すべてのフォーム送信を収集することもできます。

Elementorプロ 優れたスクリプト管理オプションが組み込まれています。コードを入力する方法は次のとおりです。

• 案内する Elementor>カスタムコード
• コードに名前を付ける
• 場所、この場合は終わりを設定します ボディタグ.
• 挿入するスクリプトが複数ある場合は優先順位を設定し、それらの順序を設定します。

• 更新をクリックします
• 条件を設定して、すべてのページのデフォルトに設定するように求められます。
• キャッシュを更新すると、スクリプトが有効になります。

Googleタグマネージャーの統合をプレビューする

Google Tag Managerには、ブラウザインスタンスに接続し、実際にコードをテストして、変数が適切に送信されているかどうかを確認するための素晴らしいメカニズムがあります。 Google Analyticsはリアルタイムではないため、これは不可欠です。 あなたはテストし、テストし、テストすることができます、そしてあなたがこれに気づかなかったならばデータがグーグルアナリティクスに表示されないことに本当に不満を感じることができます。

ここでは、その方法に関するチュートリアルは提供しません。 Googleタグマネージャーのプレビューとデバッグ…あなたが知っていると思います。 接続されたテストページでフォームを送信すると、必要に応じてGTMデータにプッシュされたデータを確認できます。

この場合、カテゴリはフォームとしてハードコードされ、ターゲットはお問い合わせフォームであり、ラベルは送信です。

Googleタグマネージャーで、データ変数、イベント、トリガー、タグを設定します

この最後のステップは、これらの変数をキャプチャして、イベント用に設定されたGoogleアナリティクスタグに送信するようにGoogleタグマネージャーを設定することです。 Elad Levyは、他の投稿でこれらの手順について詳しく説明しています– Googleタグマネージャーでの一般的なイベント追跡.

これらを設定すると、Googleアナリティクスでイベントを確認できるようになります。

ElementorProを入手する

開示：私はこの記事を通して私のアフィリエイトリンクを使用しています。