Publisert: 18.06.10

Slik lager du en Flash sign-up til Campaign Monitor

Etter å ha testet ut Campaign Monitor, for masseutsendelse av e-post (nyhetsbrev), kan jeg ikke si annet enn at det fungerer utrolig bra – og det uten at det koster deg skjorta. Campaign Monitor dekker de aller flestes behov, og vel så det. Jeg hadde også behov for å lage en nyhetsbrev registreringsapplikasjon i Flash knyttet opp mot Campaign Monitors API – og med dette innlegget viser jeg deg hvor enkelt dette kan gjøres, samt kildefiler du selv kan bruke for å lage din egen.

Hva er Campaign Monitor?

Campaign Monitor er et nettbasert program som lar deg sende professjonelle HTML e-post/nyhetsbrev til en gruppe mottakere lagret i en database. Verktøyet er utrolig fleksibelt hva angår funksjonalitet og visuell frihet, men viktigst av alt har det en fantastisk bra real time tracking/analyse.
Fra det sekundet du trykker på send knappen overvåker den utsendingen din og rapporter alt du trenger å vite om kampanjen din. (Hvem har åpnet/ikke åpnet, hva klikkes det på, hvor mange har meldt seg av etc.). Dersom du skal få noe som helst ut av en nyhetsbrevutsendelse er du avhengig av god tracking og analyse.

Opprett en Campaign Monitor konto

Regner med at dette avsnittet er helt unødvendig, men du trenger da altså å opprette en Campaign Monitor konto før du kan gjøre noe som helst – det gjør du her. Det er her dataene fra Flash-registreringen vil lagres og det er gjennom denne kontoen du vil sende ut nyhetsbrevene dine.

Slik gjør du det:

Etter å ha opprettet en konto, trenger du noen mottakere du kan sende nyhetsbrev til. Mottakere kan du få på flere måter, men det vanligste er gjennom et enkelt registreringsskjema på nettsiden din.
Rent teknisk blir dette sikkert oftest løst i HTML, men dette innlegget viser hvordan du kan lage et registreringsskjema i Flash AS2 (Dette kan fint gjøres i AS3 også, men i mitt tilfelle var oppgaven å løse dette i AS2).
Her er all Flash Actionscript koden du trenger (jeg vil gå igjennom i detalj lenger ned).

//<--- Sett inn din "account API key" under    --->
 var myApiId = "11234567a89b0123c45d6ef7ghij890k4lm5";
 //<----------------------------------------------->

 //<--- Sett inn din "API Subscriber List ID" under   --->
 var myListId = "ab1c234567d8901234e56f789ghi01j2";
 //<----------------------------------------------------->

 //<--- Om du trenger custom fields  --->
 var customFieldName1 = "Company";

 var email = _root.epost.text;
 var name = midFname+" "+midEname;
 var customFieldValue1 = _root.firma.text;

 var soapCall = "<?xml version=\"1.0\" encoding=\"utf-16\"?><soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\"xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"><soap:Body><Subscriber.AddWithCustomFields xmlns=\"http://api.createsend.com/api/\">";
 soapCall += "<ApiKey>"+myApiId+"</ApiKey>";
 soapCall += "<ListID>"+myListId+"</ListID>";
 soapCall += "<Email>"+email+"</Email>";
 soapCall += "<Name>"+name+"</Name>";
 soapCall += "<CustomFields>";
 //<--- Om du benytter custom fields, må du legge inn dette her. --->
 soapCall += "<SubscriberCustomField><Key>["+customFieldName1+"]</Key><Value>"+customFieldValue1+"</Value></SubscriberCustomField>";
 soapCall += "</CustomFields>";
 soapCall += "</Subscriber.AddWithCustomFields></soap:Body></soap:Envelope>";

 var feedback:XML = new XML();
 feedback.ignoreWhite = true;
 feedback.onLoad = function(success:Boolean):Void  {
 var message:String = this.firstChild.firstChild.firstChild.childNodes[0].childNodes[1].firstChild.nodeValue;
 if (this.firstChild.firstChild.firstChild.childNodes[0].childNodes[0].firstChild.nodeValue == 0) {
 output.text = message;
 trace(output.text);
 } else {
 output.text = message;
 trace(output.text);
 }

 }

 myXML = new XML(soapCall);
 myXML.addRequestHeader("Content-Type","text/xml; charset=utf-8");
 myXML.addRequestHeader("SOAPAction","http://api.createsend.com/api/Subscriber.AddWithCustomFields");
 myXML.sendAndLoad("http://api.createsend.com/api/api.asmx",feedback);

 _root.ShowConfirmation();
 }
}

Alt du egentlig trenger å bry deg om i denne koden er den første delen, som inneholder felter som du må endre for at den skal kunne kommunisere med din personlige Campaign Monitor konto.
Det er to unike variabler som du må hente ut fra din Campaign Monitor profil – account API key og API Subscriber List ID.

Account API key

Din unike account API key, finner du under «Account settings» som vist i bildet under.
Kopier ut din account API key kode og lim den inn i linje to i Actionscript koden over.

var myApiId="11234567a89b0123c45d6ef7ghij890k4lm5";

API Subscriber List ID

For å kunne sende ut nyhetsbrev med profilen din, trenger du å sette opp en mottaker-liste som etter hvert vil inneholde alle mottakerne dine.  Dette gjør du ved å klikke på fanen «Manage Subscribers» på toppen, så «Create a new list» knappen, som du finner til høyre. Gi listen et navn (i dette eksempelet har jeg kalt denne listen “Test site”) og bekreft med ved å klikke på knappen «Create List»

Etter at den nye listen er laget kan du igjen klikke på «Manage Subscribers». Da vil du se at listen du nettopp opprettet ligger her.
Klikk på navnet på den nye opprettede listen for å komme inn til administreringssiden til denne listen.
Under tittelen “Test site” vil du se følgende tekstlinje:
«Single opt-in list with no custom fields or segments (edit list name/type)»
Klikk da på «edit list name/type».
I bunnen på siden for administrering av den valgte listen, finner du en unik id variabel for denne listen – API Subscriber List ID. Kopier denne koden og lim den inn i linje seks i Actionscript koden.

var myListId="ab1c234567d8901234e56f789ghi01j2";


Dette er i utgangspunktet alt du trenger å gjøre.

Sette opp custom felter

Som default er det kun Navn og E-post som tjenesten er satt opp til å motta data til, men det er enkelt å sette inn til flere felter Jeg hadde i mitt tilfelle også behov for å sette opp et felt for Firmanavn (hvilket firma de registrerte jobber i). – som du kan se i koden på linje 10 og 25.
Klikk da på fanen «Manage Subscribers», så  på listen du ønsker å modifisere (her «Test site»), klikk så på linken «Custom fields» som ligger blant inngangene til høyre.
Her kan du opprette en ny “custom field”. Kopier navnet og lim det inn i Flash Actionscriptkoden på linje 10 og 25. Du kan legge til flere custom fields om du ønsker det.

var customFieldName1="Firmanavn";
NB!

Dersom skjemaet skal inneholde norsk tegnsetting som ÆØÅ, må du huske å sette charset til utf-16.
Default for Campaign Monitor er utf-8, men dette vil rendre æøå som �  i systemet.
Se linje 16 i koden:

var soapCall = "<?xml version=\"1.0\" encoding=\"utf-16\"?><soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\"xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\">
Last ned filer

Klikk på knappen under for å laste ned en zip fil med arbeidsfilene til et Flash registreringsskjema – ferdig satt opp til å kommunisere med Campaign Monitor. Koden brukt er identisk til eksempelet over og alt du trenger å gjøre er å bytte/sette inn dine konto/profil variabler.

Lykke til!

Skrevet av: Jens Fredrik Allworthy, 18.06.10 11:44

Flere innlegg

En kommentar til 'Slik lager du en Flash sign-up til Campaign Monitor'

Trackbacks

  1. Camilla Kim Kielland:

    Hvordan lage Flash sign-up til Campaign Monitor (webdesigner stuff) http://bit.ly/bRukxX

Skriv en kommentar: