[英]Google Autocomplete script for Shopify checkout using GTM
我試圖在Shopify結帳中使用Google自動填充腳本。 當包含在商店管理員中的分析跟蹤代碼下方的“其他Javascript”中時，該腳本可以很好地工作。 現在，我試圖以不同的方式重新組織商店中的事物，並開始使用GTM。 將代碼放入GTM時，出現以下錯誤：
JavaScript Compiler Error
Error at line 3, character 1: This language feature is only supported for ECMASCRIPT6 mode or better: block-scoped function declaration.
同樣是相同的錯誤，但第8行而不是第3行。
我創建了一個自定義HTML標記，該標記的URL路徑中包含結帳觸發器。
代碼是：
<script>
if (window.location.href.indexOf('checkout') > -1) {
function createCookie(a, b, c) {
if (c) {
var d = new Date;
d.setTime(d.getTime() + c * 60 * 1e3);
var e = "; expires=" + d.toUTCString()
} else var e = "";
document.cookie = a + "=" + b + e + "; path=/"
}
function readCookie(a) {
for (var b = a + "=", c = document.cookie.split(";"), d = 0; d < c.length; d++) {
for (var e = c[d];
" " == e.charAt(0);) e = e.substring(1, e.length);
if (0 == e.indexOf(b)) return e.substring(b.length, e.length)
}
return null
}
function eraseCookie(a) {
createCookie(a, "", -1)
}
function crtmedir(a) {
var b = document.createDocumentFragment(),
c = document.createElement("div");
for (c.innerHTML = a; c.firstChild;) b.appendChild(c.firstChild);
return b
}
function startTimer(start, duration, display) {
var diff, minutes, seconds;
function timer() {
diff = duration - (((Date.now() - start) / 1000) | 0);
minutes = (diff / 60) | 0;
seconds = (diff % 60) | 0;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (diff <= 0) {
clearInterval(inti);
document.getElementById("countdownhere").innerHTML = "Order reservation ended.";
start = Date.now() + 1000;
}
};
timer();
var inti = setInterval(timer, 1000);
}
var pdm = crtmedir('<div class="countdownholder"><div id="countdownhere" style="display:block;background:#ededed;padding:10px 20px;border:1px solid #e3df74;font-size:14px;color:#2c2c2c;font-weight:bold;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; margin:20px 0px">Your order is reserved for <span id="time"></span> minutes!</div><div style="display:table;width:100%"><div style="width:33.3%;display:table-cell;float:none;height:100%;vertical-align:middle;text-align:center"><img src="https://cdn.shopify.com/s/files/1/1319/2435/t/3/assets/mcafeesecured.png" style="margin:0 auto"></div><div style="width:33.3%;display:table-cell;float:none;height:100%;vertical-align:middle;text-align:center"><img src="https://cdn.shopify.com/s/files/1/1319/2435/t/3/assets/paypalverified.png" style="margin:0 auto"></div><div style="width:33.3%;display:table-cell;float:none;height:100%;vertical-align:middle;text-align:center"><img src="https://cdn.shopify.com/s/files/1/1319/2435/t/3/assets/verisign.png" style="margin:0 auto"></div></div></div>');
window.onload = function() {
if (window.location.href.indexOf('checkout') > -1 && document.location.href.indexOf('thank_you') === -1) {
document.getElementsByClassName('main__header')[0].appendChild(pdm);
var dolzina = 10;
var ten = 60 * dolzina;
var starttime = Date.now();
var xcnt = readCookie('prtcntdwn');
if (xcnt) {
if (starttime < xcnt) {
ten = (xcnt - starttime) / 1000;
} else {
eraseCookie('ptcntdwn');
createCookie('prtcntdwn', Date.now() + (ten * 1000), ten + 1);
}
} else {
createCookie('prtcntdwn', Date.now() + (ten * 1000), ten + 1);
}
display = document.querySelector('#time');
startTimer(starttime, ten, display);
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBGTm0uTrhjWd0HjXn4BxRsQfF2BqT6_zc&libraries=places";
script.async = "true";
script.defer = "defer";
document.body.appendChild(script);
setTimeout(initAutocomplete, 2000);
var lookup = {
"street_number": document.getElementById('checkout_shipping_address_address1'),
"route": document.getElementById('checkout_shipping_address_address1'),
"fullAddress": document.getElementById('checkout_shipping_address_address1'),
"locality": document.getElementById('checkout_shipping_address_city'),
"neighborhood": document.getElementById('checkout_shipping_address_city'),
"administrative_area_level_1": document.getElementById('checkout_shipping_address_province'),
"country": document.getElementById('checkout_shipping_address_country'),
"postal_code": document.getElementById('checkout_shipping_address_zip')
};
var placeSearch;
var autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'long_name',
country: 'long_name',
neighborhood: 'long_name',
postal_code: 'short_name'
};
function initAutocomplete() {
document.getElementById('checkout_shipping_address_address1').onFocus = "geolocate()";
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('checkout_shipping_address_address1')), {
types: ['geocode']
});
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
var place = autocomplete.getPlace();
for (var component in componentForm) {
lookup[component].value = '';
}
var fullAddress = '';
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
var val = place.address_components[i][componentForm[addressType]];
if (componentForm[addressType]) {
switch (addressType) {
case 'street_number':
fullAddress = val + fullAddress;
break;
case 'route':
fullAddress = fullAddress + ' ';
fullAddress = fullAddress + val;
break;
case 'neighborhood':
lookup.neighborhood.value = val;
break;
case 'locality':
lookup.locality.value = val;
break;
case 'administrative_area_level_1':
lookup.administrative_area_level_1.value = val;
break;
case 'country':
lookup.country.value = val;
break;
case 'postal_code':
lookup.postal_code.value = val;
break;
}
}
}
lookup.fullAddress.value = fullAddress;
}
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
};
}
</script>
知道我該如何解決嗎？
如果（window.location.href.indexOf（'checkout'）> -1）{window.onload = function（）{
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places";
script.async = "true";
script.defer = "defer";
document.body.appendChild(script);
setTimeout(initAutocomplete, 2000);
var lookup = {
"street_number": document.getElementById('checkout_shipping_address_address1'),
"route": document.getElementById('checkout_shipping_address_address1'),
"fullAddress": document.getElementById('checkout_shipping_address_address1'),
"locality": document.getElementById('checkout_shipping_address_city'),
"neighborhood": document.getElementById('checkout_shipping_address_city'),
"administrative_area_level_1": document.getElementById('checkout_shipping_address_province'),
"country": document.getElementById('checkout_shipping_address_country'),
"postal_code": document.getElementById('checkout_shipping_address_zip')
};
var placeSearch;
var autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'long_name',
country: 'long_name',
neighborhood: 'long_name',
postal_code: 'short_name'
};
function initAutocomplete() {
document.getElementById('checkout_shipping_address_address1').onFocus = "geolocate()";
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('checkout_shipping_address_address1')), { types: ['geocode'] });
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
var place = autocomplete.getPlace();
for (var component in componentForm) {
lookup[component].value = '';
}
var fullAddress = '';
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
var val = place.address_components[i][componentForm[addressType]];
if (componentForm[addressType]) {
switch (addressType) {
case 'street_number':
fullAddress = val + fullAddress;
break;
case 'route':
fullAddress = fullAddress + ' ';
fullAddress = fullAddress + val;
break;
case 'neighborhood':
lookup.neighborhood.value = val;
break;
case 'locality':
lookup.locality.value = val;
break;
case 'administrative_area_level_1':
lookup.administrative_area_level_1.value = val;
break;
case 'country':
lookup.country.value = val;
break;
case 'postal_code':
lookup.postal_code.value = val;
break;
}
}
}
lookup.fullAddress.value = fullAddress;
}
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
};
}
（Google跟蹤代碼管理器）GTM增強型電子商務結帳步驟未跟蹤
[英](Google Tag Manager) GTM enhanced ecommerce checkout steps not tracking
無法使用 Google Apps 腳本將新產品上傳到 shopify
[英]Unable to upload new product to shopify using Google Apps Script
在沒有內聯腳本的 Shopify 結帳頁面上通過地理位置隱藏元素？
[英]Hiding an element by geolocation on Shopify Checkout page without inline script?
如何使用Google跟蹤代碼管理器（GTM）跟蹤加密的電子郵件鏈接
[英]How to track encrypted email links using Google Tag Manager (GTM)
使用GTM和自定義事件時，Google Analytics（分析）事件標簽未定義
[英]Google Analytics event labels undefined when using GTM and custom events
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.