Redes sociais
- Tópicos:
- Javascript
Criado para:
- Administrador
O Marketo Social Marketing permite que profissionais de marketing incorporem widgets sociais a sites e landing pages. Os widgets sociais incluem pesquisas, botões de compartilhamento social, vídeos, sorteios e promoções como ofertas de referência.
Widget de compartilhamento incorporado de exemplo
<!-- 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'>
Há dois métodos básicos para a personalização de um widget social:
- Usar a interface normal do produto e anexar ouvintes de eventos para serem informados quando determinadas ações ocorrerem na interface para executar uma lógica de negócios adicional.
- Substituição da interface normal do produto por uma interface personalizada e ativação dos "estágios" pop-up da interface quando desejado.
Anexar eventos à interface do usuário normal
Há duas maneiras de se inscrever em eventos na biblioteca JavaScript do CF, globalmente ou para um único widget. Os eventos estão documentados abaixo na tabela de eventos.
Assinatura de Evento Global
<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>
Assinatura de Evento por 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>
Um exemplo
Este exemplo mostra um elemento oculto anteriormente com a ID "signedUp" depois que um usuário conclui uma inscrição de oferta para um widget chamado "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>
Tabela de eventos básicos
2. Parâmetros enviados (Objeto)
2. Compartilhar objeto de resposta, contendo mensagem enviada e url encurtado (Objeto)
2. Item votado, incluindo título, descrição, identificador de entidade (Objeto)
2. Propriedades do usuário (Objeto) alteradas,
3. Atributos de usuário alterados (Objeto)
2. Propriedades do usuário (Objeto) alteradas
3. Atributos de usuário alterados (Objeto)
Substituição da interface por uma interface personalizada
Para substituir a interface por uma interface personalizada, primeiro desative a interface normal. Isso é feito definindo a opção popupUIOnly como true. Com essa opção definida, a interface padrão não será renderizada no carregamento da página. Em vez disso, o widget busca seus dados e espera que você inicie um de seus estágios pop-up, chamando a função CF.widget.ativate e fornecendo opções para o que deve fazer.
Este é um exemplo de criação de um botão personalizado que inicia o fluxo de inscrição de oferta de referência para um widget de oferta de referência chamado 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>
Como a adição de manipuladores de clique é comum, há um método de atalho para adicioná-los. O exemplo a seguir é funcionalmente equivalente ao exemplo anterior.
<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>
Obtendo dados da interface do widget para colocar na sua interface de substituição
Se você precisar de dados sobre o widget para desenhar a interface de usuário de substituição, obtenha os dados do evento especial ui_data. Você pode acompanhar esse evento com a função normal CF.widget.listen, mas isso pode causar uma possível condição de corrida em que seu ouvinte de eventos é adicionado depois que o widget já acionou o evento ui_data, portanto, você nunca recebe dados. Para evitar essa corrida, use o 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 que é acionado sempre que uma ação é executada e faria com que a interface padrão do widget fosse redesenhada, mesmo que você tenha desabilitado essa interface com a opção popupUIOnly.
Um exemplo que usa a função uiData para exibir o número de entradas que um usuário tem para um sorteio com o nome de 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>
Referência de dados da interface de usuário de assinatura da oferta de referência
Referência de dados da interface de usuário do TrackProgress da oferta de referência
Referência de dados da interface do Sweepstakes (para Sweepstakes de Campanha Social, não Sweepstakes de LM)
Referência de dados de logon social (widget de preenchimento de formulário)
{
"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
}