时间戳

首页 > 解决方案 > 在asp netcore的剃须刀页面上设置谷歌分析的正确方法

c# - 在asp netcore的剃须刀页面上设置谷歌分析的正确方法

问题描述

我目前有一些表格，总共 6 个，建立在剃须刀上，所以我想跟踪每个表格被发送了多少次。

在 Google Analytics 上，我创建了一个目标并将其设置为自定义，类别为计数，操作为点击，标签为 houseform，值为 0。

在我的表单解决方案中，我从仪表板复制粘贴的分析代码。

我遵循或尝试遵循分析指南，但我无法让它发挥作用，在我的目标仪表板上，这个目标显示为 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");}

}

标签： c#razorasp.net-coregoogle-analytics

解决方案

许多浏览器会在下一页开始加载后立即停止执行 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();
    }
  });
});

推荐阅读