在 asp netcore 的剃刀頁面上設置谷歌分析的正確方法

Question

我目前有一些表格，總共 6 個，是基於 razor 構建的，所以我想跟蹤每個表格發送了多少次。

在 Google Analytics 上，我創建了一個目標並將其設置為自定義，類別為計數，操作為點擊，標簽為 houseform，值為 0。

在我的表單解決方案中，我有以下內容，我從儀表板復制粘貼的分析代碼。

我遵循或嘗試遵循 Analytics 指南，但我無法讓它發揮作用，在我的目標儀表板上，這個目標顯示為 0，我讓超過 24 小時來獲取信息，以防它不會立即出現。

有人可以就如何使這項工作給我建議嗎，我必須在更多表格上做這件事，所以非常感謝任何幫助。

_Layout.cshtml

這是在 head 標簽內

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X"></script>
<script>
            window.dataLayer = window.dataLayer || [];
            function gtag()

            {dataLayer.push(arguments);}

            gtag('js', new Date());

            gtag('config', 'UA-XXXXXX-X');
</script>

這是我正在使用的表單標簽

@{
ViewData["Title"] = "Create";
}

<hr />
<div class="row">
    <div class="form-row">
        <form method="post" id="razorForm">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group col-md-6">
                <label asp-for="HouseQuote.Name" class="control-label">Nombre</label>
                <input asp-for="HouseQuote.Name" class="form-control" placeholder="Nombre" />
                <span asp-validation-for="HouseQuote.Name" class="text-danger"></span>
            </div>
            <div class="form-group col-md-6">
                <label asp-for="HouseQuote.Email" class="control-label">Email</label>
                <input asp-for="HouseQuote.Email" class="form-control" placeholder="Email" />
                <span asp-validation-for="HouseQuote.Email" class="text-danger"></span>
            </div>
            <div class="form-group col-md-6">
                <label asp-for="HouseQuote.OwnerType">¿Eres?</label>
                <select class="form-control" id="exampleFormControlSelect1" asp-for="HouseQuote.OwnerType">
                    <option value="Propietario">Propietario</option>
                    <option value="Inquilino">Inquilino</option>
                    <option value="Arrendador">Arrendador</option>
                </select>
                <span asp-validation-for="HouseQuote.OwnerType" class="text-danger"></span>
            </div>
            <div class="form-group col-md-6">
                <label asp-for="HouseQuote.HouseValue" class="control-label">¿Cuál es el valor de la casa?</label>
                <input asp-for="HouseQuote.HouseValue" class="form-control" placeholder="¿Cuál es el valor de la casa?" type="number" min="0" />
                <span asp-validation-for="HouseQuote.HouseValue" class="text-danger"></span>
            </div>
            <div class="form-group col-md-6">
                <label asp-for="HouseQuote.HouseContentValue" class="control-label">¿Cuál es el valor de los contenidos?</label>
                <input asp-for="HouseQuote.HouseContentValue" class="form-control" placeholder="¿Cuál es el valor de los contenidos?" type="number" min="0" />
                <span asp-validation-for="HouseQuote.HouseContentValue" class="text-danger"></span>
            </div>
            <div class="form-group col-md-6">
                <label asp-for="HouseQuote.ZipCode" class="control-label">Código Postal</label>
                <input asp-for="HouseQuote.ZipCode" class="form-control" placeholder="Código Postal" type="number" min="0" />
                <span asp-validation-for="HouseQuote.ZipCode" class="text-danger"></span>
            </div>
            <div class="form-group" style="margin-left: 15px; margin-right: 15px;">
                <label asp-for="HouseQuote.TelephoneNumber" class="control-label">Teléfono</label>
                <input asp-for="HouseQuote.TelephoneNumber" class="form-control" placeholder="Teléfono" type="number" min="0"/>
                <span asp-validation-for="HouseQuote.TelephoneNumber" class="text-danger"></span>
            </div>
            <div class="form-group" style="margin-left:15px;">
                <input type="submit" id="submitProcess" value="Enviar" class="btn btn-primary" onclick="gtag('event', 'click', {'event_category':'count','event_label':'houseform','value':'0'});" />
            </div>
        </form>
        <div id="load-container">
            <div id="loader" class="loader my-auto text-center"></div>
            <p class="text-center">Por favor espere, estamos enviando su solicitud</p>
        </div>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

}

Answer 1

許多瀏覽器會在下一頁開始加載時立即停止執行 JavaScript，這意味着您的 gtag.js 事件命令可能永遠不會運行。

解決方案是攔截事件以停止加載下一頁，以便您可以將事件發送到 Google Analytics。 發送事件后，以編程方式提交表單。

https://developers.google.com/analytics/devguides/collection/gtagjs/sending-data

// Get a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('razorForm');

// Add a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevent the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Send the event to Google Analytics and
  // resubmit the form once the hit is done.
  gtag('event', 'signup_form_complete', {
    'event_callback': function() {
      form.submit();
    }
  });
});