Example: Google Integration
Google Analytics 4
// Offer events
document.body.addEventListener('carpose-offer-select', function(event) {
const offerData = event.detail.data;
gtag('event', 'offer_select', {
offer_id: offerData.id,
offer_headline: offerData.headline,
event_category: 'offer_interaction',
event_label: offerData.subHeadline
});
});
document.body.addEventListener('carpose-offer-contact', function(event) {
const offerData = event.detail.data;
gtag('event', 'offer_contact', {
offer_id: offerData.id,
offer_headline: offerData.headline,
event_category: 'lead_generation',
event_label: 'contact_form'
});
});
// Car events
document.body.addEventListener('carpose-car-select', function(event) {
const carData = event.detail.data;
gtag('event', 'car_selected', {
car_id: carData.id,
car_name: carData.name,
manufacturer: carData.manufacturer,
model: carData.model,
offer_number: carData.offerNumber,
event_category: 'car_interaction'
});
});
document.body.addEventListener('carpose-car-contact-modal-open', function(event) {
const carData = event.detail.data;
gtag('event', 'car_contact_modal_open', {
car_id: carData.id,
car_name: carData.name,
manufacturer: carData.manufacturer,
event_category: 'lead_generation',
event_label: 'modal_open'
});
});
document.body.addEventListener('carpose-car-contact', function(event) {
const carData = event.detail.data;
gtag('event', 'car_contact_submitted', {
car_id: carData.id,
car_name: carData.name,
manufacturer: carData.manufacturer,
offer_number: carData.offerNumber,
event_category: 'lead_generation',
event_label: 'contact_form'
});
});
Google Tag Manager (dataLayer)
// Offer events
document.body.addEventListener('carpose-offer-select', function(event) {
const offerData = event.detail.data;
if (window.dataLayer) {
window.dataLayer.push({
event: 'offer_interaction',
offer_id: offerData.id,
offer_headline: offerData.headline,
offer_subheadline: offerData.subHeadline,
interaction_type: 'selection'
});
}
});
document.body.addEventListener('carpose-offer-contact', function(event) {
const offerData = event.detail.data;
if (window.dataLayer) {
window.dataLayer.push({
event: 'lead_generation',
offer_id: offerData.id,
offer_headline: offerData.headline,
lead_type: 'contact_request'
});
}
});
// Car events
document.body.addEventListener('carpose-car-select', function(event) {
const carData = event.detail.data;
if (window.dataLayer) {
window.dataLayer.push({
event: 'car_interaction',
car_id: carData.id,
car_name: carData.name,
manufacturer: carData.manufacturer,
model: carData.model,
offer_number: carData.offerNumber,
interaction_type: 'selection'
});
}
});
document.body.addEventListener('carpose-car-contact-modal-open', function(event) {
const carData = event.detail.data;
if (window.dataLayer) {
window.dataLayer.push({
event: 'car_contact_modal',
car_id: carData.id,
car_name: carData.name,
manufacturer: carData.manufacturer,
modal_action: 'open'
});
}
});
document.body.addEventListener('carpose-car-contact', function(event) {
const carData = event.detail.data;
if (window.dataLayer) {
window.dataLayer.push({
event: 'lead_generation',
car_id: carData.id,
car_name: carData.name,
manufacturer: carData.manufacturer,
offer_number: carData.offerNumber,
lead_type: 'car_contact_form'
});
}
});
Last updated