Social
- Argomenti:
- SCR-160012
Creato per:
- Amministratore
Marketo Social Marketing consente agli addetti al marketing di incorporare widget social nei siti Web e nelle pagine di destinazione. I widget per social network includono sondaggi, pulsanti di condivisione social, video, ritocchi e promozioni come offerte di riferimento.
Esempio di widget di condivisione incorporato
<!-- Marketo Widget Loader Script -->
<script type="text/javascript" src="//b2c-mlm.marketo.com/jsloader/271d8232-1500-4305-b7ed-05d451b9ee0c/loader.php.js">
</script>
<!-- The Location of the Social Widget -->
<divclass='cf_widgetloader cf_w_245d8f3c0955454cbd26abc39d0d874c'="" options="{"outerHeight":400, "outerWidth":600}">
</divclass='cf_widgetloader'>
Esistono due metodi di base per personalizzare un widget social:
- Utilizzare la normale interfaccia utente del prodotto e allegare i listener di eventi per essere informati quando si sono verificate determinate azioni nell’interfaccia utente al fine di eseguire una logica di business aggiuntiva.
- Sostituzione della normale interfaccia utente del prodotto con una personalizzata e attivazione delle "fasi" a comparsa dell’interfaccia utente, se necessario.
Associazione di eventi all’interfaccia utente normale
Esistono due modi per abbonarsi agli eventi nella libreria JavaScript CF, a livello globale, o per un singolo widget. Gli eventi sono documentati di seguito nella tabella degli eventi.
Iscrizione evento globale
<script>
cf_scripts.afterload(function(){
CF.events.listen("event_name_here",
function(event, arg1){
//Your code to do something on the event goes here.
//It will be fired whenever ANY widget fires the event "event_name_here".
}
);
});
</script>
Sottoscrizione evento per widget
<script>
cf_scripts.afterload(function(){
CF.widget.listen("widget_name_here", "event_name_here",
function(event, arg1){
//Your code to do something on the event goes here.
//It will be fired whenever the widget named "widget_name_here" fires the event "event_name_here".
}
);
});
</script>
Un esempio
Questo esempio mostra un elemento precedentemente nascosto con ID "signedUp" dopo che un utente ha completato la registrazione di un’offerta per un widget denominato "referral_SignUp".
<div id='signedUp'style='display:none; color:green;'>This is a custom message to let you know that you signed up!</div>
<div class='cf_widgetLoader cf_w_referral_SignUp'></div>
<script>
cf_scripts.afterload(function(){
CF.widget.listen("referral_SignUp", "offer_enrolled", function(){
cf_jq("#signedUp").show();
});
});
</script>
Tabella eventi di base
2. Parametri inviati (oggetto)
2. Condividi oggetto di risposta, contenente il messaggio inviato e l’URL abbreviato (oggetto)
2. Elemento votato, incluso titolo, descrizione, identificatore entità (oggetto)
2. Proprietà utente modificate (oggetto),
3. Attributi utente modificati (oggetto)
2. Proprietà utente modificate (oggetto)
3. Attributi utente modificati (oggetto)
Sostituzione dell’interfaccia utente con un’interfaccia personalizzata
Per sostituire l'interfaccia utente con un'interfaccia personalizzata, è necessario innanzitutto disattivare l'interfaccia utente normale, impostando l'opzione popupUIOnly su true. Con questa opzione impostata, l'interfaccia utente standard non eseguirà il rendering al caricamento della pagina, ma il widget recupera i dati e attende che tu avvii una delle sue fasi a comparsa chiamando la funzione CF.widget.activate e fornendo opzioni per le operazioni da eseguire.
Di seguito è riportato un esempio di creazione di un pulsante personalizzato che avvia il flusso di iscrizione all'offerta di riferimento per un widget di offerta di riferimento denominato referral_SignUp.
<button id="myNewSignUpButton">My newSign Up button</button>
<!-- Turn off the defaultreferral offer UI by setting popupUIOnly to true-->
<div class="cf_widgetLoader cf_w_referral_SignUp" options="{popupUIOnly:true}"></div>
<script>
cf_scripts.afterload(function($, CF){
// After the cf script library has loaded, find the button with
// id="myNewSignUpButton", and attach a click listener to it.
$("#myNewSignUpButton").click(function(){
// When it is clicked, activate the popup widget flow for the referral,
// asking it to point to the clicked button.
CF.widget.activate("referral_SignUp", {pointTo:$(this)});
});
});
</script>
Poiché l'aggiunta di gestori di clic è comune, esiste un metodo di scelta rapida per aggiungerli. Quanto segue è equivalente dal punto di vista funzionale all’esempio precedente.
<button id="myNewSignUpButton">My newSign Up button</button>
<div class="cf_widgetLoader cf_w_referral_SignUp" options="{popupUIOnly:true}"></div>
<script>
cf_scripts.afterload(function($, CF){
// Use the addClickActivate convenience method, which will
// automatically make the popup point at the clicked item with id myNewSignUpButton.
CF.widget.addClickActivate("#myNewSignUpButton", "referral_SignUp", {});
});
</script>
Recupero dei dati dell’interfaccia utente del widget da inserire nell’interfaccia utente sostitutiva
Se hai bisogno di dati sul widget per disegnare l'interfaccia utente sostitutiva, puoi ottenere i dati dall'evento speciale ui_data. È possibile ascoltare questo evento con la normale funzione CF.widget.listen, ma così facendo si potrebbe causare una potenziale situazione di tipo "race condition" in cui il listener di eventi viene aggiunto dopo che il widget ha già attivato l'evento_ui_data_, pertanto non si riceveranno mai dati. Per evitare questa corsa, utilizzare l'evento CF.widget.uiData_ method instead, which will give you the most recent available _ui_data_, and listen for all future updates as well. The _ui_data viene attivato ogni volta che viene eseguita un'azione che avrebbe causato il ridisegno dell'interfaccia utente standard del widget, anche se l'interfaccia utente è stata disabilitata con l'opzione popupUIOnly.
Esempio che utilizza la funzione uiData per visualizzare il numero di voci di un utente per una sweepstakes con nome di widget sweeps_Sweepstakes.
<span>You have <span id="entryCount">?</span> entries.</span>
<div class="cf_widgetLoader cf_w_sweeps_Sweepstakes"></div>
<button id='myNewSweepsButton'>New Sweeps Up Button!</button>
<script>
cf_scripts.afterload(function($, CF){
CF.widget.uiData("sweeps_Sweepstakes", function(uiData){
if(uiData.user && uiData.userStatus && uiData.userEntries){
$("entryCount").html(""+ uiData.userEntries);
}
else{
$("entryCount").html("0");
}
});
});
</script>
Riferimento dati dell’interfaccia utente per l’abbonamento all’offerta di riferimento
Riferimento per i dati dell’interfaccia utente di TrackProgress dell’offerta di riferimento
Riferimenti dei dati nell’interfaccia utente di Sweepstakes (per gli Sweepstakes delle campagne social, non per gli Sweepstakes LM)
Riferimento dati accesso social network (widget riempimento modulo)
{
"alt_id": "http://www.facebook.com/profile.php?id=1526228678",
"provider_name": "facebook",
"default_photo_url": "https://graph.facebook.com/1526228678/picture?type=large",
"email": "ian.b.taylor@gmail.com",
"verified_email": "ian.b.taylor@gmail.com",
"gender": "male",
"preferred_user_name": "IanTaylor",
"display_name": "Ian Taylor",
"birth_date": 343954800000,
"first_name": "Ian",
"last_name": "Taylor",
"city": null,
"state": null,
"region": null,
"postal_code": null,
"country": null,
"time_zone": null,
"connection_count": 0,
"credentials": {
"uid": "1526228678",
"scopes": "publish_actions",
"expires": "1371994082",
"accessToken": "BAAGFJ0KUFpcBABuNMptmYY...",
"type": "Facebook"
},
"about_me": null,
"cur_pos_title": "Senior Staff Engineer",
"phone_number": null,
"company": "Marketo",
"cur_pos_start_date": 1333231200000,
"cur_pos_summary": null
}