diff --git a/README.md b/README.md index 0c966da..09b24b7 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,24 @@ v-item-list="{ You can also track it only on intersection by adding the `.intersection` modifier. This defaults to 50% intersection, but can be overridden: `v-item-list.intersection="{ intersection: 80, ... }"` +## Enhanced Conversions + +To track [Enhanced Conversions](https://support.google.com/google-ads/answer/13262500), we supply a seperate file you can run when you have captured the relevant user info you want to push. + +for example after subscribing to the newsletter, or entering their details in the checkout. Here's an example of how you could implement it + +```javascript +import { setUserData } from 'Vendor/rapidez/gtm/resources/js/datalayer/google-ads.js'; + +window.app.$on('logged-in', () => { + setUserData(); +}); + +window.app.$on('checkout-credentials-saved', () => { + setUserData(); +}); +``` + ## Temporarily disable If you'd like to test for example the Lighthouse scores without GTM you can disable it by added `?gtm=false` to the url diff --git a/resources/js/datalayer/google-ads.js b/resources/js/datalayer/google-ads.js new file mode 100644 index 0000000..4d6bb12 --- /dev/null +++ b/resources/js/datalayer/google-ads.js @@ -0,0 +1,45 @@ +export const setUserData = async (userData = { + email: window.app.user?.email || window.app.guestEmail, + phone_number: /[0-9\+]*/.exec(window.app.checkout.billing_address.telephone)[0], + address: { + first_name: window.app.checkout.billing_address.firstname, + last_name: window.app.checkout.billing_address.lastname, + street: window.app.checkout.billing_address.street.join("\n"), + city: window.app.checkout.billing_address.city, + postal_code: window.app.checkout.billing_address.postcode, + country: window.app.checkout.billing_address.country_id, + } +}) => { + // https://support.google.com/google-ads/answer/13262500 + + // If your site doesn't collect one of those fields, remove the field entirely rather than leaving it blank + Object.keys(userData.address).forEach(key => userData.address[key] === undefined && delete userData.address[key]) + if( + userData.address.first_name === undefined + || userData.address.last_name === undefined + || userData.address.postal_code === undefined + || userData.address.country === undefined + ) { + delete userData.address; + } + Object.keys(userData).forEach(key => userData[key] === undefined && delete userData[key]) + + // The phone number must be in E.164 format, which means it must be 11 to 15 digits including a plus sign (+) prefix and country code with no dashes, brackets or spaces. + if(!/\+[0-9]{11,15}/.test(userData.phone_number)) { + delete userData.phone_number + } + + // As a reminder, at least one of the following fields must be provided: + // Email (preferred) + // Address (first name, last name, postal code, and country are required) + // A phone number can also be provided as a standalone match key but is recommended to be sent along with an email. + if(!userData.email && !userData.address && !userData.phone_number) { + return; + } + + dataLayer.push([ + 'set', + 'user_data', + userData + ]) +} \ No newline at end of file