Luo toimintakutsuja (CTA)

Käytä CTA-työkalua luodaksesi CTA-painikkeita, bannereita tai ponnahdusikkunoita, jotka voit lisätä HubSpot-sivuillesi ja houkutella uusia kävijöitä. Voit myös lisätä CTA-kutsuja ulkoisille sivuille.

Ennen kuin voit lisätä CTA:n ulkoiselle sivulle, sinun on asennettava HubSpot-seurantakoodi tai asennettava HubSpot WordPress -lisäosa WordPress-sivustoosi. Kun olet lisännyt CTA:n, voit lisätä liikennettä ohjaamalla kävijöitä tietyille sivuille, kokouslinkkeihin tai ulkoisiin URL-osoitteisiin.

Mobiililaitteissa voit valita CTA-vaihtoehdoissa joko responsiivisen ulkoasun käyttöönoton tai CTA:n piilottamisen pienillä näytöillä. Kun olet julkaissut CTA:n, opettele luomaan CTA:lle A/B-testi ja analysoimaan CTA:n suorituskykyä.

CTA:n suunnittelu

Muokkaa CTA-editorissa CTA:n muotoilua kävijöiden houkuttelemiseksi. CTA:ta luodessasi voit myös käyttää älykästä sisältöä näyttääksesi CTA:n eri versiot katsojien kategorian mukaan. Lisätietoja älykkään sisällön käyttämisestä CTA:ssa.

1. Siirry HubSpot-tililläsi kohtaan Markkinointi > CTA:t.
2. Napsauta oikeassa yläkulmassa Luo.
3. Valitse yläreunasta Ponnahdusikkunat-välilehti tai Sisällytykset ja painikkeet-välilehti.
   • Ponnahdusikkunan CTA:t sisältävät seuraavia tyyppejä:
     
     • Banneri: pysyvä banneri, joka on kiinnitetty sivusi ylä- tai alaosaan. Banneri pysyy, kun kävijät selaavat sivua.
     • Ponnahdusikkuna: ponnahdusikkuna, joka ilmestyy tietyn aikataulun mukaan.
     • Slide-In: banneri, joka liukuu sivustosi jostain kulmasta. Banneri jää näkyviin, kun kävijät selaavat sivua.
   • Upotus- ja painike-CTA:t sisältävät seuraavia tyyppejä:
     • Upotettu: banneri, toimintakutsu tai painike, jota voit käyttää verkkosivustollasi tai HubSpot-sähköposteissasi ohjaamaan potentiaalisia asiakkaita tietyille sivuille.
     • Upotettu kuva: kuva, jota voit käyttää HubSpot-sivuillasi tai sähköpostissasi.
4. Valitse malli sen mukaan, minkä tyyppisen CTA-kutsun haluat luoda.
   • Jokaisessa CTA-mallissa on mukautettavia moduuleja, kuten kuvia ja tekstikenttiä.
   • Voit esimerkiksi valita Klikkaa keskustelua -mallin WhatsApp-linkin käynnistämiseksi, kokousponnahdusikkunamallin kokouksen varaussivun näyttämiseksi tai tapahtumamallin, jonka avulla kävijät voivat ilmoittautua konferenssiin tai työpajaan,
5. Lisää vasemmanpuoleisessa paneelissa Lisää-välilehdeltä moduuleja ja muokkaa CTA:n ulkoasua:

• • Jos haluat lisätä CTA:si lisää sisältöä, napsauta ja vedä uusi moduuli suoraan editorin oikeaan paneeliin.
    • Voit lisätä CTA:han vain yhden Lomake- (Uusi editori) tai Kokousmoduulin. Yksi CTA ei voi sisältää sekä lomake- että kokousmoduulia.
    • Tietyt moduulit voidaan lisätä vain kerran, kuten lähtölaskenta-ajastin tai videomoduulit.
    • Voit lisätä CTA:iin myös videoita, lisätietoja vaatimuksista, kun lisäät videoita CTA:iin.
  • Jos haluat muuttaa CTA:n asettelua, vie hiiren kurssi moduulin päälle ja napsauta ja vedä se uuteen paikkaan.
  • Voit kopioida moduulin viemällä hiiren kursorin moduulin päälle ja napsauttamalla duplicatekloonikuvaketta.
  • Jos haluat poistaa moduulin, siirry moduulin yläpuolelle ja napsauta deletePoista-kuvaketta.
    

.

• • Voit muokata moduulia napsauttamalla moduulia.
    • Vasemmassa paneelissa voit muokata moduulin sisältöä ja ulkoasua.
    • Voit sulkea ponnahdusikkunan CTA:n sen jälkeen, kun kävijä on lähettänyt lomakkeen, kun muokkaat lomakemoduulia, voit kytkeä päälle Sulje lähettämisen jälkeen -kytkimen.
      

7. Napsauta vasemmassa paneelissa Sisältö-välilehteä moduulien hallitsemiseksi.
   • Voit muokata moduulia napsauttamalla moduulin nimeä . Vasemmassa paneelissa voit muokata moduulin sisältöä ja ulkoasua. Rikastekstimoduuleissa voit käyttää tekoälyavustajia CTA-sisällön luomiseen tai tarkentamiseen.
   • Voit poistaa moduulin viemällä hiiren kursorin moduulin päälle ja napsauttamalla delete Poista-kuvaketta.
8. Napsauta vasemmanpuoleisessa paneelissa Design-välilehteä muokataksesi ja esikatsellaksesi CTA-moduuliasi.
   • Jos haluat esikatsella CTA:si tietyillä sivuilla, valitse oikeassa yläkulmassa Preview (Esikatselu). Napsauta sitten Preview on specific page (Esikatselu tietyllä sivulla ) -pudotusvalikkoa ja valitse HubSpot-sivu, jolla CTA:ta esikatsellaan.

• • Jos haluat mukauttaa CTA:n ulkoasua, valitse jokin seuraavista vaihtoehdoista. Määritä sitten muutokset vasemmassa paneelissa.
    • Sijainti : Tarrakiinnitteisten bannerin CTA-kohtien kohdalla voit valita ylä- tai alapuolisen sijainnin. Sisään liu'utettavien CTA:iden osalta voit sijoittaa CTA:n sivun vasempaan ylä-, ala-, ylä- tai alaosaan.
    • Mitoitus: Määritä CTA:n korkeus, voit kytkeä päälle vaihtoehdon, jolla korkeus asetetaan automaattisesti CTA:n sisällön perusteella.
    • Asettelu: Määritä CTA:n asettelu. Voit lisätä pehmusteita CTA-sisältöön. Voit myös kytkeä päälle vaihtoehdon, jolla voit ottaa käyttöön responsiivisen asettelun. Reagoivan asettelun avulla CTA:n sarakkeet pinoutuvat pystysuoraan pienillä näytöillä.
    • Tyylit: Määritä CTA:n tyylit, kuten CTA:n ensisijainen fontti, reunus ja pudotusvarjo. Voit käyttää mukautettuja fontteja CTA:n kanssa, lisätietoja mukautettujen fonttien käyttämisestä HubSpot-sisällössä.
    • Tausta: aseta CTA:n tausta, voit asettaa taustavärin tai ladata taustakuvan.
    • Sulje-vaihtoehto: ponnahdusikkunan CTA-kohtien osalta voit kytkeä päälle vaihtoehdon, jonka avulla kävijät voivat sulkea CTA-kohteen, kun he napsauttavat mitä tahansa ponnahdusikkunan ulkopuolella. Kun tämä vaihtoehto on pois päältä, kävijät voivat sulkea CTA:n vain sulkemiskuvakkeen avulla.

HTML-CTA:n suunnittelu

Voit luoda mukautetun Embedded HTML CTA:n ja soveltaa mukautettuja teemoja tai CSS:ää:

1. Siirry HubSpot-tililläsi kohtaan Markkinointi > CTA:t.
2. Napsauta oikeassa yläkulmassa Luo.
3. Napsauta yläreunassa Embeds and Buttons -välilehteä.
4. Siirry vasemmanpuoleisessa sivupalkin valikossa kohtaan Lisäasetukset. Valitse sitten Embedded HTML.
5. Napsauta vasemmanpuoleisessa paneelissa Linkki kohteeseen -pudotusvalikkoa ja valitse vaihtoehto, johon CTA:si ohjataan:
   • Sähköpostiosoite: Luo mailto-linkki. Jos haluat avata tämän linkin uudella sivulla, valitse Avaa linkki uudessa välilehdessä -valintaruutu.
   • Tiedoston lataus: linkitä CTA:si tiedostoon tiedostonhallinnassa. Valitse olemassa oleva tiedosto tai lataa uusi tiedosto ja valitse sitten Avaa linkki uudessa välilehdessä -valintaruutu, jos haluat, että CTA-painiketta napsauttaneet kävijät näkevät kuvan uudessa selainikkunassa.
   • Kokouslinkki: linkitä CTA-painikkeesi HubSpot-kokouslinkkiin. Napsauta Valitse kokouslinkki -pudotusvalikkoa ja valitse sitten kokouslinkki. Jos haluat avata linkin uudella sivulla, valitse Avaa linkki uudessa välilehdessä -valintaruutu.
   • Jokin sivuistasi: linkitä CTA-linkkisi johonkin HubSpot-sivuistasi tai blogikirjoituksistasi. Napsauta Sivu-pudotusvalikkoa ja valitse sitten sivu tai viesti. Painikkeen CTA-linkki sidotaan sivun ID:hen, ja kaikki sivun URL-osoitteen muutokset päivittävät automaattisesti painikkeen CTA-linkin. Jos haluat avata linkin uudella sivulla, valitse Avaa linkki uudessa välilehdessä -valintaruutu.
   • URL-osoite: linkitä CTA-painike HubSpotin ulkopuoliselle sivulle. Kirjoita Linkki-URL-kenttään verkkosivuston URL-osoite, johon haluat ohjata kävijät. Jos haluat avata tämän linkin uudella sivulla, valitse Avaa linkki uudessa välilehdessä -valintaruutu.
   • CTA: Käytä mukautettua CTA:ta käynnistääksesi tahmean bannerin, ponnahduslaatikon tai liukuvan CTA:n.
6. Kirjoita CTA-teksti painikkeen sisältö -kenttään.
   

7. Jos haluat mukauttaa CTA:n suunnittelua lisää, valitse Advanced (Lisäasetukset).
8. Lisäasetukset-sivulla voit lisätä mukautettuja CSS-luokkia tai -sääntöjä:
   • Mukautetut CSS-luokat: Syötä CTA:lle mukautettu luokka. Mukautettujen luokkien avulla voit soveltaa suunnittelutyylejä, kuten kirjasinperheitä, useisiin CTA-kohtiin verkkosivustollasi. Kaikki mukautetut CSS-luokat on sisällytettävä HubSpot-sivuillasi käytettävään CSS-tyylitaulukkoon.
   • Mukautetut CSS-säännöt: Lisää mukautettuja sääntöjä, joilla voit soveltaa CTA-kohtaista inline-muotoilua.
     • Voit lisätä uuden CSS-säännön napsauttamalla Lisää yksi tai + Lisää ja määritä valitsin ja tyyli.
       • Valitsija: anna CSS-valitsin. Tämä arvo on valinnainen, ja se yhdistetään CTA:n valitsimeen. Jos esimerkiksi syötetty valitsin on :hover, yhdistetyksi valitsimeksi tulee ${ctaSelector}:hover
       • Style (Tyyli): Kirjoita mukautettu CSS-tyylisääntö, jota sovelletaan määritettyyn valitsijaan. Voit syöttää tyylin syöttämättä valitsinta. Esimerkiksi color: yellow;.
         
         

9. Jos haluat muokata olemassa olevaa CSS-sääntöä, vie hiiren kursori säännön päälle ja napsauta edit muokkauskuvaketta.
10. Jos haluat kloonata CSS-säännön, siirrä hiiren kursori säännön päälle ja napsauta duplicate kloonikuvaketta.
11. Jos haluat hallita CSS-sääntöjesi tärkeysjärjestystä, voit järjestää ne tärkeysjärjestykseen napsauttamalla ja vetämällä kutakin sääntöä.
12. Jos haluat poistaa CSS-säännön, siirrä hiiren kursori säännön päälle ja napsauta delete poistokuvaketta.
13. Jos haluat soveltaa CTA:han samaa HTML:ää ja samoja luokkia kuin vanhoissa CTA:issa, valitse Käytä vanhaa merkintää -valintaruutu. Jos sivuilla on CSS-tyylitaulukoita, jotka muotoilevat vanhoja CTA:ita, tämän valintaruudun valitseminen antaa HTML-CTA:n omaksua samat tyylit.
14. Viimeistele CTA-muotoilun määrittäminen valitsemalla Save & Apply (Tallenna ja sovella).
    

Mukauta, missä ja milloin tahmea banneri, ponnahduslaatikko tai liukuva CTA näytetään.

1. Voit näyttää CTA:n, kun kävijä on tietyssä verkkosivuston URL-osoitteessa, Verkkosivuston URL-osoite -osiossa:
   • Napsauta ensimmäistä pudotusvalikkoa ja valitse Verkkosivuston URL-osoite.
   • Napsauta toista pudotusvalikkoa ja valitse kohdentamissääntö.
   • Kirjoita sääntökriteerit tekstikenttään.
2. Voit näyttää CTA:n, kun kävijä on verkkosivuston sivulla, jonka URL-osoite sisältää tiettyjä kyselyparametreja:
   • Napsauta ensimmäistä pudotusvalikkoa ja valitse kyselyparametri.
   • Kirjoita ensimmäiseen tekstikenttään kyselyparametrin nimi.
   • Napsauta toista pudotusvalikkoa ja valitse kohdentamissääntö.
   • Kirjoita toiseen tekstikenttään kyselyparametrin arvo.
3. Voit lisätä toisen säännön valitsemalla Lisää sääntö.
4. Jos haluat sulkea toimintakutsut tiettyjen sivujen ulkopuolelle, valitse Lisää poissulkusääntö. Voit esimerkiksi lisätä poissulkusäännön tietosuojakäytäntöjen sivulle.

1. Määritä CTA-kutsun kohderyhmä kohdassa Kenelle se näytetään . Voit valita seuraavista:
   • Kaikki kävijät: CTA näytetään kaikille kävijöille.
   • Suodatetut kävijät: CTA näkyy vain määritellyille kävijöille.
2. Aseta CTA:n näyttötiheys kohdassa Kuinka usein se näytetään . Napsauta Näytä uudelleen -pudotusvalikkoa ja valitse seuraavista:
   • Määritetyn ajanjakson jälkeen: CTA tulee näkyviin uudelleen määritetyn ajanjakson jälkeen.
   • Toista: CTA tulee näkyviin joka kerta, kun kävijä siirtyy valituille verkkosivuille ja suorittaa laukaisevan toiminnon, vaikka hän olisi ollut vuorovaikutuksessa sen kanssa aiemmin.
   • Älä näytä uudelleen: CTA:ta ei koskaan näytetä samalle kävijälle uudelleen.
     
     

Mukauta CTA-vaihtoehtoja

MukautaAsetukset-välilehdillä erilaisia CTA-vaihtoehtoja, kuten sitä, näytetäänkö CTA pienissä kooissa, mahdollisia siihen liittyviä kampanjoita ja CTA:n aikataulutus.

1. Napsauta yläreunassa Asetukset-välilehteä .
2. Jos kyseessä on tahmea banneri, ponnahduslaatikko tai liukuva CTA, voit piilottaa CTA:n pienillä näytön kooilla. Valitse Pienet näytön koot -osiossa Poista käytöstä pienillä näytön kooilla -valintaruutu.
3. Jos sinulla on Marketing Hub Professional- tai Enterprise-tilaus, voit liittää CTA:n kampanjaan:
   • Jos haluat liittää CTA:n olemassa olevaan kampanjaan, napsauta Kampanja-pudotusvalikkoa ja valitse kampanja.
   • Jos haluat liittää CTA:n uuteen kampanjaan, napsauta Kampanja-pudotusvalikkoa ja valitse Luo kampanja. Jatka sitten kampanjan määrittämistä.
   • Jos et ole koskaan aiemmin luonut kampanjaa, valitse Luo kampanja. Jatka sitten kampanjan määrittämistä.
4. Määritä, miten haluat seurata CTA-klikkauksia. Valitse seuraavista vaihtoehdoista:
   • Seuraa klikkauksia uudelleenohjauksen kautta: Seuraa CTA:n klikkauksia ohjaamalla kävijät alkuperäiseen URL-osoitteeseen, joka yhdistää klikkauksen CTA:han, ennen kuin heidät ohjataan lopulliselle sivulle. Tämä vaihtoehto on oletusarvoisesti valittu.
   • Seuraa klikkauksia selaimen kautta: Seuraa klikkauksia asynkronisesti kävijän selaimen kautta. Tämän vaihtoehdon avulla voit käyttää ankkuritunnisteita, koska uudelleenohjauksia ei ole, vaan CTA ohjaa kävijät asetettuun URL-osoitteeseen.
5. Sticky bannerin, ponnahduslaatikon tai slide-in CTA:n osalta voit ajoittaa, milloin CTA näkyy:
   
   • Jos haluat aikatauluttaa, milloin CTA alkaa näkyä, kytke Schedule for later -kytkin päälle. Valitse sitten Aloituspäivä ja -aika.
   • Jos haluat ajoittaa, milloin CTA lopettaa näyttämisen, kytke Set unpublish date and time -kytkin päälle. Valitse sitten lopetuspäivämäärä ja -aika.
     
     

Julkaise CTA:si

Kun olet saanut CTA:n asetukset valmiiksi, julkaise CTA, jotta se voidaan ottaa käyttöön.

1. Valitse oikeassa yläkulmassa Review and publish (Tarkista ja julkaise).
2. Tarkista oikeassa paneelissa CTA:si ja valitse sitten Julkaise nyt. CTA julkaistaan automaattisesti kohdesivuilla.