導入または問題の説明
説明したソリューションは、顧客開発を管理する能力がなく、コンバージョントラッキングを設定する必要のないマーケティング代理店に最適です。
Webサイトおよびオンラインストアの開発者は、最終的にサーバーに送信される前にフォームフィールドのAJAX検証を使用し、同時にサンキューページが存在しないため、Web分析ツールがフォームを正常に送信したときを識別する別のURLがないことがよくあります（Google AnalyticsまたはYandex Metric）。
一部のウェブアナリストは、「送信」ボタンのクリックごとに再度ストレスをかけたくない（または単にできない）コンバージョンコードの送信を設定しますが、この方法はコンバージョン数の過大評価とマーケティング広告結果のデータの歪みにつながることを理解していますキャンペーン（RC）Yandex.Direct、Google Adwords、その他の広告プラットフォームの代表者。 ユーザーが電子メールまたは電話番号を間違った形式で入力または入力し忘れ、「送信」ボタンをクリックするたびに、歪みが発生します。 この場合、変換はカウントされますが、アプリケーションは実際には送信されません。
ユーザーのフォーム送信が成功すると、ポップアップモーダルウィンドウが表示されます。このモーダルウィンドウは、ページコードで非表示になっているこのモーダルウィンドウのdivのCSSクラス（クラス属性）の変更によりポップアップします。
また、CMSテンプレート（コンテンツ管理システム：Bitrix、OpenCart、Wordpress、およびその他のWeb動物相の代表者）のコードを編集することで行われる変換コードを配置するパスは、Google Tag Managerタグを設定するよりも簡単ではないことにも注意してくださいこの記事を行う予定です。 この事実は、今日、さまざまなサイトおよびランディングページデザイナー（UKit、Wix、Flexbeなど）が非常に人気があり、通常の定命のユーザーには編集できないコントロールに独自のJSライブラリセットを使用するという事実によっても裏付けられています。
提案されたソリューション
アナリストは何をしますか？ フォームの送信時に標準のJavaScriptイベントをキャッチしようとすると、フォームが正常に送信された瞬間を正しく識別できません。 別の方法で、コードの変更を追跡して必要な瞬間をキャッチしようとし、フィードバックフォームが表示された瞬間をキャッチした後、対応するイベントをGoogleタグマネージャーに送信します。
お客様の許可を得て、GTMコンテナの作成と基本的なWeb分析タグのセットアップの瞬間をスキップし、必要なタグの構成に直接進みます。
したがって、まずは、申請書が正常に送信されたときにどのような突然変異が起こるかを正確に把握します。 これを行うには、Chrome開発者ツールを呼び出して、フォームを正常に送信するためのモーダルウィンドウのコードを検討します。
div "m_modal m_65730_done show"のCSSクラスに注目すると、フォームが正常に送信された後にshow addが表示されると推測できます。
これを確認するには、モーダルウィンドウを閉じて、コードクラスm_65730_doneでdivを見つけます。
次に、jQueryクエリを使用してミューテーションサブジェクトを準備およびインストールします。この場合、$（ 'div [data-id = "65730_done"]'）になります。
次は？ 次に、MutationObserverインターフェースにDOM変更のオブザーバーをアタッチできる特別なJavaScript関数の形式で少し助けが必要です。
MutationObserverは、すべての既存のブラウザーでサポートされているわけではないことに注意してください。 MutationObserverインターフェースは、Opera 15以降、Firefox 14以降、Chrome 26以降でサポートされています。 また、Internet Explorer 11およびSafari 6.1でもサポートされます。 Safari 6.0とChrome 18-25はMutationObserverをサポートしていますが、WebKitプレフィックス（WebKitMutationObserver）が付いています。
MutationObserverの詳細については、 こちらをご覧ください 。
関数は次のようになります。
$(function() { (function($) { var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; $.fn.attrchange = function(callback) { if (MutationObserver) { var options = { subtree: false, attributes: true }; var observer = new MutationObserver(function(mutations) { mutations.forEach(function(e) { callback.call(e.target, e.attributeName); }); }); return this.each(function() { observer.observe(this, options); }); } } })(jQuery);
さて、今度はターゲットのdivにattrchangeをアタッチするだけで、ミューテーションがウィンドウのクローズではなく、オープンにつながったことを確認します。
$('div[data-id="65730_done"]').attrchange(function(attrName) { if(attrName=='class') if ($('.m_65730_done.show').length >0) {dataLayer.push({'event': 'POPROBOVAT_BESPLATNO_ZAYAVKA'}); if (testMode) console.log('65730 POPROBOVAT_BESPLATNO_ZAYAVKA');}
GoogleタグマネージャーでHTMLタグを作成して公開します。
完全なタグコード：
<script> var testMode=true; $(function() { (function($) { var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; $.fn.attrchange = function(callback) { if (MutationObserver) { var options = { subtree: false, attributes: true }; var observer = new MutationObserver(function(mutations) { mutations.forEach(function(e) { callback.call(e.target, e.attributeName); }); }); return this.each(function() { observer.observe(this, options); }); } } })(jQuery); // " " $('div[data-id="65730_done"]').attrchange(function(attrName) { if(attrName=='class') if ($('.m_65730_done.show').length >0) {dataLayer.push({'event': 'POPROBOVAT_BESPLATNO_ZAYAVKA'}); if (testMode) console.log('65730 POPROBOVAT_BESPLATNO_ZAYAVKA');} }); </script>
この例では、イベントをdataLayerに送信し、その後GTMの個別のHTMLタグで処理します。次に、このタグはGoogle AnalyticsおよびYandex Metrika変換送信コードを呼び出します。
<script> var str = '{{Event}}'; if (str.indexOf('ZAYAVKA')>0) ga('send', 'event', 'form', 'send', str); else ga('send', 'event', 'button', 'click', str); yaCounter12345678.reachGoal(str); </script>
ほら、問題は解決しました！ コンバージョントラッキングコードは、コンバージョンが実際に発生した後にのみ実行され、[送信]ボタンのクリック数と比較して、より正確なコンバージョン数を取得します。