Så lägger du till ett inbäddat Klaviyo-formulär på din BigCommerce-webbplats

Du kommer att lära dig

Lär dig hur du lägger till ett inbäddat Klaviyo-formulär på din BigCommerce-webbplats. Det kräver att du skapar formuläret i Klaviyo och sedan klistrar in dess inbäddningskod i webbplatsens filer där du vill att det ska visas (t.ex. i sidfoten).

Den här guiden visar hur du ersätter BigCommerces standardregistreringsformulär med ett Klaviyo-inbäddningsformulär.

Innan du börjar

För att visa ett inbäddat Klaviyo-formulär på din BigCommerce-webbplats, integrera med BigCommerce och installera Klaviyos onsite JavaScript (Klaviyo.js). Det här skriptet aktiverar registreringsformulär och spårning på webbplatsen. Om du markerade inställningen Lägg automatiskt till Klaviyo onsite javascript (rekommenderas) när du integrerade med BigCommerce är du klar.

Om inte:

1. I Klaviyo väljer du integrationer i navigeringen till vänster.
   

2. Klicka på BigCommerce och välj sedan fliken Inställningar.
3. Markera inställningen Lägg automatiskt till Klaviyo onsite javascript (rekommenderas).
4. Klicka på Spara.

Exemplet i den här artikeln använder BigCommerces standardtema Cornerstone. Tänk på att ditt tema kan skilja sig, liksom namnen på vissa filer eller platserna för kodsnippet. Om du byter tema senare ska du lägga till inbäddningskoden även i det nya temat.

Lägga till formulärets inbäddningskod på din webbplats

Börja med att skapa och publicera ett inbäddningsformulär i Klaviyo. I det här avsnittet går vi igenom nästa steg för att klistra in ditt formulärs inbäddningskod på din BigCommerce-webbplats så att den visas och synkar data korrekt.

1. Om du inte redan har kopierat inbäddningskoden öppnar du formuläret i redigeraren, väljer Målgruppsinriktning och beteende > Visning och kopierar koden under Inbäddningskod.
   

2. Gå till din webbplats och leta upp standardregistreringsformuläret för BigCommerce. Om du använder ett Cornerstone-tema finns det i sidfoten på webbplatsen.
   

• Om du inte ser ett standardformulär på din webbplats:
  • Öppna din BigCommerce-instrumentpanel.
  • Gå till Marknadsföring > e-postmarknadsföring.
  • Markera rutan Tillåt prenumerationer på nyhetsbrev. Detta gör att du kan samla in e-postsamtycke från besökare på din webbplats och lägger även till en standardregistreringsruta för e-post på din BigCommerce-webbplats. Om den här rutan redan är markerad och du fortfarande inte ser ett standardformulär, kanske ditt tema inte innehåller ett.

3. Öppna din BigCommerce-instrumentpanel och gå sedan till Storefront > Themes.
4. I avsnittet Aktuellt tema klickar du på rullgardinsmenyn Avancerat och väljer sedan Redigera temafiler.
   

• Om du använder ett standardtema kan du inte välja det här alternativet. I stället:
  
  • Klicka på Skapa en kopia, namnge den och välj sedan Spara en kopia.
  • När det har lagts till i avsnittet Teman väljer du de 3 punkterna och sedan Redigera temafiler. Observera att alla redigeringar du gör bara gäller för temat som du redigerar, och du måste använda temat på din webbplats för att se att ändringarna återspeglas.

5. Öppna filen som motsvarar var standardformuläret visades på din webbplats i det vänstra sidofältet. Om standardformuläret låg i sidfoten, som i exemplet, navigerar du till mall > components > common och klickar på filen footer.html.
6. Använd genvägen för att hitta (Command+F på Mac eller Control+F på Windows) för att söka efter ordet ”nyhetsbrev” i sidfotsfilen.
   

7. I koden under den hittar du referensen till formuläret. I exemplet refereras formuläret i en annan filsökväg: {{> components/common/subscription-form}}.
   

8. I det vänstra sidofältet följer du filsökvägen som refereras i koden (i det här exemplet väljer du components > common > subscription-form). Härifrån ser du de faktiska komponenterna i standardformuläret.
   • I det här exemplet matchar standardformulärets rubrik och inledande text resten av webbplatsens stil. Behåll den texten utanför elementet <form> när du ersätter formuläret.
9. Markera hela <form> -elementet, inklusive den inledande <form ...> -etiketten, den avslutande </form> -etiketten och allt däremellan. Klistra in inbäddningskoden som du kopierade från Klaviyo för att ersätta den. Klaviyo skapar ett eget formulär, så lämna inte inbäddningskoden inuti de ursprungliga formulärtaggarna.
   

10. Klicka på Spara och tillämpa fil för att tillämpa dessa ändringar på din webbplats.
    • Om knappen bara säger Spara fil är filen som du nyss redigerade inte ditt aktuella tema än. Du behöver klicka på Spara fil, sedan rulla upp och välja Redigera temafiler > Spara > Använd som aktivt tema uppe till höger för att tillämpa temat på din webbplats.

När du har klistrat in inbäddningskoden, sparat och tillämpat ändringarna i BigCommerce går du tillbaka till din webbplats och uppdaterar sidan. Ditt inbäddade Klaviyo-formulär visas på din webbplats och börjar lägga till nya prenumeranter i Klaviyo-listan som är kopplad till formuläret.

Testa ditt formulär

1. Skicka formuläret på din webbplats med en e-postadress som inte redan finns på formulärets anslutna lista.
2. Om listan använder dubbel opt-in öppnar du bekräftelsemejlet och bekräftar prenumerationen. Nya prenumeranter på e-post läggs till i listan efter att de har bekräftat.
3. I Klaviyo kontrollerar du att e-postadressen har lagts till i listan som är kopplad till ditt formulär.

Om du inte ser ditt formulär kan du läsa felsökning av inbäddningsformulär.

Kommande steg

Skapa sedan ett välkomstserieflöde för att få omedelbar effekt på dina nya prenumeranter.

Ytterligare resurser