376 lines
13 KiB
JavaScript
376 lines
13 KiB
JavaScript
function escapeHtml(str) {
|
|
var div = document.createElement("div");
|
|
div.appendChild(document.createTextNode(str));
|
|
return div.innerHTML;
|
|
}
|
|
|
|
window.fbAsyncInit = function () {
|
|
FB.init({
|
|
appId: "221646389321681",
|
|
autoLogAppEvents: true,
|
|
xfbml: true,
|
|
version: "v13.0",
|
|
});
|
|
};
|
|
|
|
window.facebookBusinessExtensionConfig = {
|
|
pixelId: meta_wc_params.pixelId,
|
|
popupOrigin: "https://business.facebook.com",
|
|
setSaveSettingsRoute: meta_wc_params.setSaveSettingsRoute,
|
|
externalBusinessId: meta_wc_params.externalBusinessId,
|
|
fbeLoginUrl: "https://business.facebook.com/fbe-iframe-get-started/?",
|
|
deleteConfigKeys: meta_wc_params.deleteConfigKeys,
|
|
appId: "221646389321681",
|
|
timeZone: "America/Los_Angeles",
|
|
installed: meta_wc_params.installed,
|
|
systemUserName: meta_wc_params.systemUserName + "_system_user",
|
|
businessVertical: "ECOMMERCE",
|
|
version: "v8.0",
|
|
currency: "USD",
|
|
businessName: "Solutions Engineering Team",
|
|
debug: true,
|
|
channel: "DEFAULT",
|
|
};
|
|
|
|
var hasAccessToken = jQuery("#fb-adv-conf").attr("data-access-token");
|
|
|
|
if ("false" == hasAccessToken) {
|
|
jQuery("#fb-adv-conf").hide();
|
|
} else {
|
|
jQuery("#fb-adv-conf").show();
|
|
jQuery("#fb-capi-ef").show();
|
|
|
|
var enablePiiCachingCheckbox = document.getElementById("capi-ch");
|
|
var piiCachingStatus = meta_wc_params.piiCachingStatus;
|
|
updateCapiPiiCachingCheckbox(piiCachingStatus);
|
|
enablePiiCachingCheckbox.addEventListener("change", function () {
|
|
if (this.checked) {
|
|
saveCapiPiiCachingStatus("1");
|
|
} else {
|
|
saveCapiPiiCachingStatus("0");
|
|
}
|
|
});
|
|
|
|
var enablePageViewFilterCheckBox = document.getElementById("capi-ef");
|
|
var capiIntegrationPageViewFiltered =
|
|
meta_wc_params.capiIntegrationPageViewFiltered === "true" ? "1" : "0";
|
|
updateCapiIntegrationEventsFilter(capiIntegrationPageViewFiltered);
|
|
enablePageViewFilterCheckBox.addEventListener("change", function () {
|
|
saveCapiIntegrationEventsFilter(this.checked ? "1" : "0");
|
|
});
|
|
function updateCapiPiiCachingCheckbox(val) {
|
|
if (val === "1") {
|
|
enablePiiCachingCheckbox.checked = true;
|
|
} else {
|
|
enablePiiCachingCheckbox.checked = false;
|
|
}
|
|
}
|
|
function updateCapiIntegrationEventsFilter(val) {
|
|
enablePageViewFilterCheckBox.checked = val === "1" ? true : false;
|
|
}
|
|
function saveCapiPiiCachingStatus(new_val) {
|
|
jQuery
|
|
.ajax({
|
|
type: "post",
|
|
dataType: "json",
|
|
url: meta_wc_params.capiPiiCachingStatusSaveUrl,
|
|
data: {
|
|
action: meta_wc_params.capiPiiCachingStatusActionName,
|
|
val: new_val,
|
|
},
|
|
success: function (response) {
|
|
updateCapiPiiCachingCheckbox(new_val);
|
|
},
|
|
})
|
|
.fail(function (jqXHR, textStatus, error) {
|
|
jQuery("#fb-capi-se").text(
|
|
meta_wc_params.capiPiiCachingStatusUpdateError
|
|
);
|
|
jQuery("#fb-capi-se").show().delay(3000).fadeOut();
|
|
updateCapiPiiCachingCheckbox(new_val === "1" ? "0" : "1");
|
|
});
|
|
}
|
|
function saveCapiIntegrationEventsFilter(new_val) {
|
|
jQuery
|
|
.ajax({
|
|
type: "post",
|
|
dataType: "json",
|
|
url: meta_wc_params.capiIntegrationEventsFilterSaveUrl,
|
|
data: {
|
|
action: meta_wc_params.capiIntegrationEventsFilterActionName,
|
|
val: new_val,
|
|
},
|
|
success: function (response) {},
|
|
})
|
|
.fail(function (jqXHR, textStatus, error) {
|
|
jQuery("#fb-capi-ef-se").text(
|
|
meta_wc_params.capiIntegrationEventsFilterUpdateError
|
|
);
|
|
jQuery("#fb-capi-ef-se").show().delay(3000).fadeOut();
|
|
updateCapiIntegrationEventsFilter(new_val === "1" ? "0" : "1");
|
|
});
|
|
}
|
|
}
|
|
var currentFBEInstalledStatus = meta_wc_params.installed;
|
|
jQuery("#ad-creation-plugin-iframe").attr("data-fbe-extras", getFBEExtras());
|
|
jQuery("#ad-insights-plugin-iframe").attr("data-fbe-extras", getFBEExtras());
|
|
updateAdInsightsPlugin(currentFBEInstalledStatus);
|
|
|
|
function getFBEExtras() {
|
|
$fbeConfig = window.facebookBusinessExtensionConfig;
|
|
return JSON.stringify({
|
|
business_config: {
|
|
business: {
|
|
name: $fbeConfig.businessName,
|
|
},
|
|
},
|
|
setup: {
|
|
external_business_id: $fbeConfig.externalBusinessId,
|
|
timezone: $fbeConfig.timeZone,
|
|
currency: $fbeConfig.currency,
|
|
business_vertical: $fbeConfig.businessVertical,
|
|
channel: $fbeConfig.channel,
|
|
},
|
|
repeat: false,
|
|
});
|
|
}
|
|
function updateAdInsightsPlugin(isFBEInstalled) {
|
|
if (isFBEInstalled) {
|
|
jQuery("#meta-ads-plugin").show();
|
|
} else {
|
|
jQuery("#meta-ads-plugin").hide();
|
|
}
|
|
}
|
|
|
|
function sendTestEvent(e) {
|
|
e.preventDefault();
|
|
var advancedPayloadElement = document.getElementById("advanced-payload");
|
|
var testEventCode = "";
|
|
var testEventName = "";
|
|
var data = "";
|
|
if (advancedPayloadElement.classList.contains("open")) {
|
|
if (!advancedPayloadElement.value) {
|
|
alert("You must enter payload.");
|
|
return;
|
|
}
|
|
advancedPayload = advancedPayloadElement.value;
|
|
try {
|
|
data = JSON.parse(advancedPayload);
|
|
if (data.test_event_code) {
|
|
testEventCode = data.test_event_code;
|
|
}
|
|
testEventName += data.data
|
|
.map((event) => event.event_name)
|
|
.join(", ");
|
|
} catch (e) {
|
|
alert("Invalid JSON in payload.");
|
|
return;
|
|
}
|
|
} else {
|
|
testEventCode = document.getElementById("event-test-code").value;
|
|
testEventName = document.getElementById("test-event-name").value;
|
|
}
|
|
|
|
if (!testEventCode) {
|
|
alert("You must enter test event code.");
|
|
return;
|
|
}
|
|
|
|
jQuery.ajax({
|
|
type: "POST",
|
|
url: meta_wc_params.ajax_url,
|
|
data: {
|
|
action: "send_capi_event",
|
|
nonce: meta_wc_params.send_capi_event_nonce,
|
|
event_name: testEventName,
|
|
test_event_code: testEventCode,
|
|
payload: data,
|
|
custom_data: setCustomData(data, testEventName),
|
|
user_data: {
|
|
ph: "254aa248acb47dd654ca3ea53f48c2c26d641d23d7e2e93a1ec56258df7674c4",
|
|
em: "309a0a5c3e211326ae75ca18196d301a9bdbd1a882a4d2569511033da23f0abd",
|
|
},
|
|
},
|
|
success: function (response) {
|
|
data = JSON.parse(response.data);
|
|
if (!data.error) {
|
|
document
|
|
.querySelector(".event-log-block>table>tbody")
|
|
.insertAdjacentHTML(
|
|
"beforeend",
|
|
`<tr><td clas="test-event-td">${escapeHtml(testEventCode)}</td><td><span class="test-event-pill test-event-pill--type">${escapeHtml(testEventName)}</span></td><td><span class="test-event-pill test-event-pill--success">Success</span></td></tr>`
|
|
);
|
|
} else {
|
|
let tableRow = `
|
|
<tr class="test-event--error">
|
|
<td class="test-event-td test-event-td--error">
|
|
${escapeHtml(data.error.message)}
|
|
</td>
|
|
<td class="test-event-pill test-event-pill--type">${escapeHtml(testEventName)}</td>
|
|
<td style="margin-left:auto;">
|
|
<span class="test-event-pill test-event-button--error">
|
|
Error
|
|
<svg id="show-error-btn" class="show-error-icon" width="12" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M2 0L7 5L12 0L14 1L7 8L0 1L2 0Z" fill="#555555"></path>
|
|
</svg>
|
|
</span>
|
|
</td>
|
|
<td class="test-event-msg--error hidden">
|
|
${escapeHtml(data.error.error_user_msg)}
|
|
</td>
|
|
</tr>
|
|
`;
|
|
|
|
document
|
|
.querySelector(".event-log-block>table>tbody")
|
|
.insertAdjacentHTML("beforeend", tableRow);
|
|
|
|
const testErrorButton = document.querySelectorAll(
|
|
".test-event-button--error"
|
|
);
|
|
testErrorButton.forEach((button) => {
|
|
button.addEventListener("click", handleErrorMessageToggle);
|
|
});
|
|
}
|
|
|
|
const eventHintsText = document.querySelector(".event-hints__text");
|
|
|
|
if (eventHintsText.classList.contains("initial-text")) {
|
|
const noteCloseButton = document.querySelector(
|
|
".event-hints__close-icon"
|
|
);
|
|
|
|
noteCloseButton.addEventListener("click", () => {
|
|
document
|
|
.querySelector(".event-hints")
|
|
.classList.add("hidden");
|
|
});
|
|
eventHintsText.textContent =
|
|
"Note that events can take up to a few minutes to appear in the Events Manager.";
|
|
eventHintsText.classList.remove("initial-text");
|
|
noteCloseButton.classList.remove("hidden");
|
|
}
|
|
},
|
|
|
|
error: function (error) {
|
|
console.log(error);
|
|
},
|
|
});
|
|
}
|
|
|
|
function setCustomData(data, testEventName) {
|
|
if (data) {
|
|
return;
|
|
} else {
|
|
if (
|
|
[
|
|
"Purchase",
|
|
"AddToCart",
|
|
"InitiateCheckout",
|
|
"ViewContent",
|
|
"Search",
|
|
"AddPaymentInfo",
|
|
"AddToWishlist",
|
|
].includes(testEventName)
|
|
) {
|
|
return {
|
|
value: 123.321,
|
|
currency: "USD",
|
|
content_type: "product",
|
|
};
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleErrorMessageToggle() {
|
|
const errorRow = this.closest(".test-event--error");
|
|
|
|
if (!errorRow) {
|
|
return;
|
|
}
|
|
|
|
this.firstElementChild.classList.toggle("open");
|
|
const errorMessage = errorRow.querySelector(".test-event-msg--error");
|
|
|
|
if (errorMessage) {
|
|
toggleHeight(errorMessage);
|
|
}
|
|
}
|
|
|
|
function toggleAdvancedPayload() {
|
|
document.getElementById("advanced-payload").classList.toggle("open");
|
|
document.getElementById("populate-payload-button").classList.toggle("show");
|
|
document
|
|
.querySelector(".advanced-edit-toggle-arrow")
|
|
.classList.toggle("open");
|
|
|
|
if (
|
|
!document.getElementById("advanced-payload").value &&
|
|
document.getElementById("advanced-payload").classList.contains("open")
|
|
) {
|
|
populateAdvancedEvent();
|
|
}
|
|
}
|
|
|
|
function populateAdvancedEvent() {
|
|
testEventName = document.getElementById("test-event-name").value;
|
|
testEventCode = document.getElementById("event-test-code").value;
|
|
var exampleEvent = {
|
|
data: [
|
|
{
|
|
event_name: testEventName,
|
|
event_time: Math.floor(Date.now() / 1000),
|
|
event_id: "event.id." + Math.floor(Math.random() * 901 + 100),
|
|
event_source_url: window.location.origin,
|
|
action_source: "website",
|
|
user_data: {
|
|
em: [
|
|
"309a0a5c3e211326ae75ca18196d301a9bdbd1a882a4d2569511033da23f0abd",
|
|
],
|
|
ph: [
|
|
"254aa248acb47dd654ca3ea53f48c2c26d641d23d7e2e93a1ec56258df7674c4",
|
|
],
|
|
},
|
|
custom_data: {
|
|
value: 100.2,
|
|
currency: "USD",
|
|
content_ids: ["product.id.123"],
|
|
content_type: "product",
|
|
},
|
|
},
|
|
],
|
|
test_event_code: testEventCode ? testEventCode : "TEST4039",
|
|
};
|
|
if (
|
|
![
|
|
"Purchase",
|
|
"AddToCart",
|
|
"InitiateCheckout",
|
|
"ViewContent",
|
|
"Search",
|
|
"AddPaymentInfo",
|
|
"AddToWishlist",
|
|
].includes(testEventName)
|
|
) {
|
|
delete exampleEvent.data[0].custom_data;
|
|
}
|
|
document.getElementById("advanced-payload").value = JSON.stringify(
|
|
exampleEvent,
|
|
null,
|
|
2
|
|
);
|
|
}
|
|
|
|
// Function to toggle height with transition
|
|
function toggleHeight(element) {
|
|
if (element.style.height === "0px" || element.style.height === "") {
|
|
element.style.height = `fit-content`;
|
|
element.classList.remove("hidden");
|
|
} else {
|
|
element.style.height = "0";
|
|
element.classList.add("hidden");
|
|
}
|
|
}
|