forms - 使用 Analytics 跟踪 AJAX 表单提交
问题描述
所以这是我花了无数个小时试图弄清楚的一个......
我在 force.com 上建立的网站上工作，需要使用分析跟踪表单提交。唯一的问题是表单是动态的，只是为您提供一个弹出对话框以供确认。
关于如何实现此页面的跟踪表单提交，我的最佳选择是什么？
({
doInit: function(component, event, helper) {
// Prepare a new record from template
component.find("leadRecordCreator").getNewRecord(
"Lead", // sObject type (entityApiName)
null, // recordTypeId
false, // skip cache?
$A.getCallback(function() {
var rec = component.get("v.newLead");
var error = component.get("v.newLeadError");
if (error || (rec === null)) {
console.log("Error initializing record template: " + error);
return;
}
component.set("v.simpleNewLead.LeadSource", "GreenLight Interest");
})
);
},
handleSaveLead: function(component, event, helper) {
// Get and set zipcode value
var zipCodeInput = component.get("v.zipcode");
if (zipCodeInput) {
component.set("v.simpleNewLead.PostalCode", zipCodeInput.toString());
}
var errorMessage = 'Complete this field.';
var isValidEmail = true;
var emailField = component.find("leadEmail");
var emailFieldValue = emailField.get("v.value");
var regExpEmailformat = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
// Validate email field
if(emailFieldValue){
if(emailFieldValue.match(regExpEmailformat)){
emailField.set("v.errors", [{message: null}]);
$A.util.removeClass(emailField, 'error');
$A.util.addClass(emailField, 'inputBorder');
isValidEmail = true;
}else{
$A.util.addClass(emailField, "error");
$A.util.removeClass(emailField, 'inputBorder');
emailField.set("v.errors", [{message: "Please Enter a Valid Email Address"}]);
isValidEmail = false;
}
}else{
$A.util.addClass(emailField, "error");
$A.util.removeClass(emailField, 'inputBorder');
emailField.set("v.errors", [{message: errorMessage}]);
isValidEmail = false;
}
if (
component.get("v.simpleNewLead").FirstName &&
component.get("v.simpleNewLead").LastName &&
component.get("v.simpleNewLead").Email &&
component.get("v.simpleNewLead").MobilePhone &&
component.get("v.simpleNewLead").Company &&
component.get("v.simpleNewLead").PostalCode &&
component.get("v.simpleNewLead").PostalCode.length >= 5
) {
component.find("leadRecordCreator").saveRecord(function(saveResult) {
if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
$A.get('e.force:refreshView').fire();
// Display success message
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
title: "Success!",
message: 'Thank you.',
key: 'info_alt',
type: 'success'
});
toastEvent.fire();
} else if (saveResult.state === "INCOMPLETE") {
// handle the incomplete state
console.log("User is offline, device doesn't support drafts.");
} else if (saveResult.state === "ERROR") {
// handle the error state
console.log('Problem saving contact, error: ' +JSON.stringify(saveResult.error));
} else {
console.log('Unknown problem, state: ' + saveResult.state + ',error: ' + JSON.stringify(saveResult.error));
}
});
} else {
// Add required field error for zip code field. If blank
if (!zipCodeInput) {
var zip = component.find("zip");
zip.set("v.errors", [{message: errorMessage}]);
$A.util.removeClass(zip, "inputBorder");
$A.util.addClass(zip, "error");
}
// Add required field error for other field. If blank
var leadFields = component.find("leadField");
var i = 0;
for (i = 0; i < leadFields.length; i++) {
var value = leadFields[i].get("v.value");
if(value){
$A.util.removeClass(leadFields[i], "error");
$A.util.addClass(leadFields[i], "inputBorder");
leadFields[i].set("v.errors", []);
}else{
leadFields[i].set("v.errors", [{message: errorMessage}]);
$A.util.removeClass(leadFields[i], "inputBorder");
$A.util.addClass(leadFields[i], "error");
}
}
}
},
handleZipChange : function(component, event, helper) {
// Validate zip code field lenght. Must be equal to or greator than 5
helper.removeErrorMessage(component, event, "zip");
var zip = component.find("zip");
var zipInput = component.get("v.zipcode");
console.log('zipInput>>>'+zipInput);
var regPostalCode = /^[0-9]*$/gm;
var isNum = regPostalCode.test(component.get("v.zipcode"));
var islessthan5digit = (component.get("v.zipcode").length < 5);
console.log('isNum>>'+isNum);
console.log('islessthan5digit>>'+islessthan5digit);
if(!isNum || islessthan5digit) {
zip.set("v.errors", [{message: "Zip Code should be 5 digits"}]);
$A.util.removeClass(zip, "inputBorder");
$A.util.addClass(zip, "error");
}
else{
console.log('in else>>');
}
},
})<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >
<aura:attribute name="newLead" type="Object"/>
<aura:attribute name="simpleNewLead" type="Object"/>
<aura:attribute name="newLeadError" type="String"/>
<aura:attribute name="zipcode" type="Integer" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<force:recordData aura:id="leadRecordCreator"
fields="FirstName, LastName, Email, MobilePhone, PostalCode, Company"
targetRecord="{!v.newLead}"
targetFields="{!v.simpleNewLead}"
targetError="{!v.newLeadError}" />
<!-- Display a header -->
<div class="slds-box">
<!-- Display Lightning Data Service errors -->
<aura:if isTrue="{!not(empty(v.newLeadError))}">
<div class="recordError">
<ui:message title="Error" severity="error" closable="true">
{!v.newLeadError}
</ui:message>
</div>
</aura:if>
<!-- Display the new lead form -->
<div class="slds-form--stacked slds-box">
<div class="slds-grid slds-gutters slds-align_absolute-center">
<div class="slds-col">
<div class="slds-form slds-form_horizontal slds-size--9-of-12 ">
<div class="slds-form-element">
<label class="slds-form-element__label" for="input-id-01">First Name</label>
<div class="slds-form-element__control">
<ui:inputText aura:id="leadField" value="{!v.simpleNewLead.FirstName}" class="inputBorder"/>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="input-id-01">Last Name</label>
<div class="slds-form-element__control">
<ui:inputText aura:id="leadField" value="{!v.simpleNewLead.LastName}" class="inputBorder"/>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="input-id-01">Email</label>
<div class="slds-form-element__control slds-size--12-of-12">
<ui:inputEmail aura:id="leadEmail" value="{!v.simpleNewLead.Email}" class="inputBorder"/>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="input-id-01">Phone</label>
<div class="slds-form-element__control">
<ui:inputPhone aura:id="leadField" value="{!v.simpleNewLead.MobilePhone}" class="inputBorder"/>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="input-id-01">Zip Code</label>
<div class="slds-form-element__control">
<!--<ui:inputText aura:id="leadField" value="{!v.simpleNewLead.PostalCode}" class="inputBorder"/>-->
<!-- <ui:inputNumber aura:id="zip" value="{!v.zipcode}" class="inputBorder" change="{!c.handleZipChange}" format="#####"/> -->
<ui:inputText aura:id="zip" value="{!v.zipcode}" class="inputBorder" change="{!c.handleZipChange}" />
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="input-id-01">Company</label>
<div class="slds-form-element__control">
<ui:inputText aura:id="leadField" value="{!v.simpleNewLead.Company}" class="inputBorder"/>
</div>
</div>
</div>
</div>
</div>
<lightning:button label="Submit" onclick="{!c.handleSaveLead}" variant="brand" class="slds-m-top--medium slds-align_absolute-center"/>
</div>
</div>
</aura:component>解决方案
由于您可以控制代码，因此最简单的选择可能是将事件（如果需要，还可以添加其他数据）推送到 ajax 调用的成功回调。如果我在以 开头的 if 类中正确阅读了代码，那么saveResult.state === "SUCCESS"您可以将其修改为：
...
if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
$A.get('e.force:refreshView').fire();
// Display success message
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
title: "Success!",
message: 'Thank you.',
key: 'info_alt',
type: 'success'
});
toastEvent.fire();
dataLayer.push({'event':'ajaxSuccess'})
}
...
行 dataLayer.push({'event':'ajaxSuccess'}) 意味着您现在有一个可以在触发器中使用的 GTM 事件。其工作方式是 GTM 覆盖 dataLayer 数组的“push”方法以添加一个函数，该函数扫描新附加对象的“event”键，更新 GTM 的内部数据模型，然后触发所有具有触发器的标签事件。
同样，如果验证失败，您可以添加错误事件，或者向数据层推送添加额外的键/值对以在 GTM 中获取额外的变量。
推荐阅读
- terraform - 将多个库附加到集群地形化 Databricks
- angular - 有没有更好的方法来验证复选框选择 Angular？
- google-bigquery - 获取 BQ 查询历史数据
- android - 取消所有安卓用户的活跃订阅
- python - 将小时和天添加到 python 日期时间
- php - 我可以使用 Laravel 在产品模型中使用餐厅和类别表的多对多关系吗？以及如何添加更新 Categories_Restaurants 表？
- tensorflow - ValueError：找不到匹配的函数来调用从 SavedModel 加载的调用，并且“CheckpointLoadStatus”对象没有属性“predict”
- three.js - 将 dxf 实体放在 mapbox 上并获取其类似的 geojson 的坐标 labs.mapbox.com/labs/dxf2geojson/dist/
- sql - SQL 按多个分类列分组并计数
- android - 搜索 Recyclerview - 当搜索为空时滚动到顶部