Geavanceerde functie: deze functie wordt aanbevolen voor geavanceerde gebruikers en vereist codering.
Widget Callbacks zijn handig als u tickets verkoopt op uw website met de Universe Widget en aangepaste acties wilt instellen (bijv. doorsturen naar een bepaalde pagina) zodra iemand een ticket koopt. Widget Callbacks zijn handig voor het bijhouden van uw conversies uit advertenties. Houd er rekening mee dat door verschillende factoren (scriptblokkers, advertentieblokkers, enz.) niet alle evenementen getraceerd kunnen worden en dat deze gegevens zonder garanties aan u worden verstrekt.
Een eenvoudige Widget Callback-functie die het meest gebruikt wordt, is de automatische omleiding naar een URL van een willekeurige webpagina.
Widget Callbacks kunnen bijvoorbeeld gebruikt worden om uw kopers naar een bedankpagina of een andere webpagina-URL te leiden nadat de koper een ticket van uw website heeft gekocht. Hiervoor moet jQuery op uw site geladen zijn. Om jQuery van Google te gebruiken, voegt u het volgende script toe aan de header van uw pagina:
Om automatische doorverwijzingen in te stellen, moet het volgende stukje code in de broncode van de registratiepagina of onder het jQuery-script in de header worden geplakt:
<script type="text/javascript">
document.addEventListener('unii:ticket:purchased', function (event) {
setTimeout(functie() {
window.location.assign("THANK_YOU_PAGE_URL");
}, 10000);
}, false);
</script>
document.addEventListener('unii:ticket:purchased', function (event) {
setTimeout(functie() {
window.location.assign("THANK_YOU_PAGE_URL");
}, 10000);
}, false);
</script>
Opmerking: vervang 'THANK_YOU_PAGE_URL' door elke webpagina-URL waarnaar u wilt doorsturen.
Opmerking: De "10000" in de bovenstaande code is de tijd die nodig is om mensen om te leiden van het Universe boekingsbevestigingsscherm naar uw bedankpagina. U kunt dit korter of langer maken. Dit getal is in milliseconden, dus 10000 is 10 seconden, 5000 is 5 seconden, enz.
Voor meer geavanceerde gebruikers kunt u de Widget Callback-functie aanpassen om meer specifieke acties uit te voeren.
Evenementen
De volgende JS events vuren af op een pagina waar embed.js is opgenomen met onze widget:
unii:closed
Wordt naar het document verzonden wanneer de pop-overwidget wordt gesloten. Gaat nergens vanuit omtrent de status van de pop-over of de transactie van de gebruiker.
unii:ticket:purchased
Wordt onmiddellijk naar het document verzonden zodra de transactie gedaan is. Gaat er niet vanuit dat het venster gesloten is.
unii:opened
Wordt naar het document verzonden wanneer de pop-overwidget wordt geopend. Dit evenement zal opnieuw triggeren in het geval de pop-over gesloten en opnieuw geopend wordt.
Wordt naar het document verzonden wanneer de pop-overwidget wordt gesloten. Gaat nergens vanuit omtrent de status van de pop-over of de transactie van de gebruiker.
unii:ticket:purchased
Wordt onmiddellijk naar het document verzonden zodra de transactie gedaan is. Gaat er niet vanuit dat het venster gesloten is.
unii:opened
Wordt naar het document verzonden wanneer de pop-overwidget wordt geopend. Dit evenement zal opnieuw triggeren in het geval de pop-over gesloten en opnieuw geopend wordt.
Tip: Deze Evenementen kunnen beluisterd worden. Bijvoorbeeld:
document.addEventListener('unii:closed', function (event) { console.log('Venster is gesloten'); }, false);
document.addEventListener(‘unii:ticket:purchased', function (event) {
console.log("Ticket was purchased");
}, false);
Als u jQuery gebruikt, zou het volgende werken in versies >= 1.7:
$(document).on('unii:closed', function(event) {
console.log('Venster is gesloten');
});
Om nog dieper te gaan, kunnen geavanceerde gebruikers hun Widget Callbacks aanpassen door extra informatie op te nemen nadat het ticket is gekocht en het pop-overvenster is gesloten om meer gegevens te verzamelen.
Evenementgegevens
unii:ticket:purchased is een speciaal geval waarin we extra informatie geven. Het evenementargument heeft een detaileigenschap die de volgende gegevens bevat:
$(document).on("unii:ticket:gekocht", functie(evenement) {
console.log(event.detail);
});
Het object event.detail heeft de volgende structuur:
$(document).on("unii:ticket:gekocht", functie(evenement) {
console.log(event.detail);
});
Het object event.detail heeft de volgende structuur:
{
"Commissie": Aantal,
"credits_applied": Aantal,
"korting": Aantal,
"toeslag: Aantal,
"Vervulling": Aantal,
"subtotaal": Aantal,
"betaling": aantal,
"Prijs": Aantal,
"ticket_id": String,
"kosten_items": [
{
"id": String,
"Commissie": Aantal,
"valuta": aantal,
"korting": Aantal,
"beschrijving": tekenreeks,
"toeslag: Aantal,
"Prijs": Aantal,
"rate_id": String
}
]
}
Opmerking: Hiermee kunt u aangepaste analyserapporten koppelen met betrekking tot conversies per type ticket, of een aangepaste ontvangstpagina, enz.
Voorbeelden:
Als u een functie wilt oproepen zodra een ticket is gekocht en de pop-over is gesloten, kunt u eerst luisteren naar het evenement voor ticketaankoop - en vervolgens een event listener toevoegen voor de afsluiting van het evenement. Op deze manier kunt u een functie alleen uitvoeren als beide zijn opgetreden:
document.addEventListener('unii:ticket:purchased', function(event) {
document.addEventListener("unii:closed", function (event) {
console.log("Ticket is gekocht en venster is gesloten")
}, false);
}, false);
}, false);
Een ander voorbeeld is het bijhouden van ticketaankopen via Google Analytics. Na het instellen van een aangepaste metriek met een "valuta"-indeling zou u de volgende code kunnen gebruiken om ticketaankopen bij te houden:
document.addEventListener ('unii:ticket:purchased', function(event) {
if (GA (Algemene Toegang)) {
GA (Algemene Toegang)("verzenden", "evenement", "categorie", "actie", {
// Vervang ‘metric1’ door de ID van de metric die u hebt gemaakt om ticketaankopen bij te houden
‘metric1’: event.detail.fulfillment
});
}
}, false);
if (GA (Algemene Toegang)) {
GA (Algemene Toegang)("verzenden", "evenement", "categorie", "actie", {
// Vervang ‘metric1’ door de ID van de metric die u hebt gemaakt om ticketaankopen bij te houden
‘metric1’: event.detail.fulfillment
});
}
}, false);