Narzędzie Embeddable Audit Tool SEOptimer's to potężne narzędzie do generowania leadów dla agencji cyfrowych.

Agencje korzystające z naszego planu [White Label and Embedding] mogą osadzić [Site Audit Tool] na swojej stronie internetowej agencji. Pozwala to na pozyskiwanie leadów i dostarczanie raportów SEO potencjalnym klientom. Ten przewodnik wyjaśnia, jak skonfigurować i zainstalować [Embeddable Audit Tool] na stronie Twojej agencji.

Po zainstalowaniu narzędzia, Twoi odwiedzający mogą tworzyć bezpłatne raporty audytu stron internetowych na swojej własnej stronie (lub na dowolnej stronie). Te raporty mogą być oznaczone Twoją marką agencji, kolorami i czcionkami. Możesz dostosować sekcje raportu, a nawet włączyć automatyczne wysyłanie e-maila do odwiedzającego z załączonym raportem.

WebMarketers

Jak działa wbudowane narzędzie audytu

Aby osadzić narzędzie na swojej stronie internetowej, musisz dodać mały fragment kodu do HTML swojej strony internetowej. Domyślnie formularz jest minimalny i prosty, jednak możesz dostosować pola formularza i styl formularza, aby pasowały do wyglądu i stylu Twojej strony internetowej. W rzeczywistości formularz osadzony został specjalnie zaprojektowany, aby był prosty i łatwy do edycji. Celowo nie kompresujemy ani nie zaciemniamy kodu osadzania, jak to robią inne narzędzia firm trzecich, co uniemożliwia wprowadzanie zmian. Zamiast tego, udostępniamy cały CSS w prostym bloku na początku kodu, aby obiekty formularza mogły być stylizowane, o ile masz podstawową wiedzę na temat CSS.

Podgląd osadzonego formularza

Kiedy użytkownik wprowadza swoje dane (np. adres URL strony internetowej i adres e-mail), możesz skonfigurować formularz, aby wysyłał dane leadów do Ciebie za pomocą e-maila. Możesz również włączyć Webhook, aby przesłać dane leadów do Twojego CRM za pośrednictwem Zapier lub wykonać dowolną inną obsługiwaną akcję w Zapier, taką jak powiadomienie kanału Slack, dodanie danych leadów do Arkusza Google itp.

Możesz również dostosować, co się dzieje, gdy użytkownik wprowadza swoje dane. Domyślnie, na bieżąco tworzony jest raport audytu w formacie PDF z białą etykietą i wyświetlany użytkownikowi. Mogą oni albo przeglądać go bezpośrednio w swojej przeglądarce, albo pobrać PDF. Zamiast tego, możesz usunąć opcję PDF i wyświetlić tylko wersję raportu opartą na przeglądarce lub możesz usunąć ją całkowicie, abyś mógł samodzielnie odpowiedzieć na zapytanie za pomocą e-maila z ich raportem.

Konfigurowanie Raportu White Label

Jeśli zdecydujesz się pokazać użytkownikowi raport z audytu po przesłaniu formularza (w wersji PDF lub raportu internetowego), będziesz musiał skonfigurować szablon raportu. Najpierw upewnij się, że wypełniłeś wszystkie wymagane dane agencji na stronie Report Templates. Do wypełnienia jest 6 pól: logo, nazwa agencji, adres, email, telefon i strona internetowa.

Jeśli zdecydujesz się wyświetlić raport w formacie PDF lub w formie internetowej po przesłaniu formularza przez użytkownika, te szczegóły agencji zostaną wyświetlone w raporcie po przesłaniu formularza.

Strona szablonów raportów

Gdy dodasz te szczegóły, możesz również dokonać dalszych dostosowań kontroli audytu i sekcji (włączać lub wyłączać sekcje). Możesz także dostosować kolory i czcionki używane w całym raporcie audytu.

Kolory i czcionki

Naciśnij przycisk "Podgląd raportu PDF" w prawym dolnym rogu, aby zobaczyć podgląd, jak użytkownik zobaczy Twój raport:

Podgląd raportu

Gdy będziesz zadowolony z układu i wyglądu raportu, naciśnij przycisk "Save Settings" w lewym dolnym rogu strony.

Zarządzanie Wieloma Szablonami Raportów White Label

Zaawansowani użytkownicy mogą chcieć skonfigurować osobny szablon raportu dla [Embeddable Audit], aby mogli dostosować dokładnie, jak te raporty wyglądają. Zauważyliśmy, że niektóre agencje wolą, aby te raporty były krótsze w porównaniu do pełnego raportu audytu używanego do konsultacji lub spotkań z klientami. Jeśli chcesz to zrobić, możesz utworzyć osobny szablon używany dla [Embed Tool] odwiedzając stronęSzablony Raportów page and clicking the "Utwórz nowy" button at the top to define a new report template. Call it something descriptive like "Osadzalne narzędzie audytu". You can also select the report language, scoring type and whether you want to show or hide the detailed explanations for each check.

Ustawienia raportu ocen

Możesz następnie włączyć/wyłączyć różne sekcje raportu i poszczególne sprawdzenia, aby dokładnie kontrolować, jak wygląda raport z audytu.

Wybierz typ raportu osadzania

Następnie odwiedź stronę Embedding Settings, aby dostosować sposób działania formularza po jego wysłaniu przez użytkownika. Ustawienie "Embed Form Behavior" oferuje 4 opcje:

  • Wyświetl raport w nowej karcie przeglądarki: to otworzy raport w nowej karcie przeglądarki
  • Wyświetl raport w oknie modalnym: to otworzy raport w "oknie modalnym" na górze zawartości strony (domyślna opcja)
  • Brak Raportu, tylko pokaż wiadomość Popup "Skontaktujemy się z Tobą": raport nie będzie wyświetlany użytkownikowi, jednak zostanie wyświetlona konfigurowalna wiadomość potwierdzająca
  • Brak Raportu, tylko Przekierowanie na Inną Stronę: raport nie zostanie pokazany użytkownikowi i zostanie on przekierowany na wybrany przez Ciebie URL

Osadzanie typu raportu

Jeśli wybierzesz którąkolwiek z opcji "Wyświetl raport", możesz dostosować, czy raport jest wyświetlany użytkownikowi jako natywny plik PDF, czy jako raport internetowy:

  • Raport PDF: Generowanie PDF utworzy markowy raport PDF w nowej karcie. Zostanie im pokazany początkowy ekran ładowania, a następnie zostaną przekierowani do raportu po jego ukończeniu. Mogą go przeglądać w przeglądarce lub wybrać pobranie pliku PDF na swoje urządzenie (domyślna opcja)
  • Raport Web: Użytkownicy zostaną przekierowani do wersji raportu w sieci, która ładuje się natywnie w przeglądarce

Kolejnym krokiem jest dostosowanie pól formularza. Pole "Wprowadź stronę internetową" jest obowiązkowe. Ale możesz włączać/wyłączać inne pola formularza. Zdecydowanie zalecamy włączenie Email i Imię, aby móc zbierać podstawowe informacje o leadach. Możesz również ustawić Pole Niestandardowe i dokonać innych dostosowań, takich jak styl układu i kolory:

Osadź projekt formularza

Możesz podejrzeć wygląd swojego formularza, klikając przycisk "Preview Embed Form" w prawym dolnym rogu. Gdy będziesz zadowolony z jego wyglądu, kliknij przycisk "Save Settings & Generate Embed Code", aby wygenerować kod HTML:

Kod do osadzenia

Białe etykietowanie domeny raportu internetowego

Jeśli wybierzesz opcję "Web Report" jako metodę dostarczania raportu, możesz usunąć markę z domeny, odwiedzając stronę Domain Settings.

Ustawienia domeny

Domyślnie raport jest udostępniany na ogólnej domenie o nazwie "websiteauditserver.com". Możesz użyć subdomeny w formacie https://<twoja-subdomena>.websiteauditserver.com/<report-url> - jest to najprostsza opcja dostosowania domeny.

Bardziej zaawansowaną alternatywą jest kliknięcie zakładki "Domain" i całkowite oznaczenie domeny jako biała etykieta, np.: https://<your-custom-domain>/<report-url>. Jest to preferowana opcja, ponieważ URL jest w pełni oznaczony jako biała etykieta i wygląda dla użytkownika jak usługa działająca całkowicie na Twojej stronie internetowej. Przeczytaj nasz pełny przewodnik na temat [jak] skonfigurować white label custom domains.

Instalowanie [kodu]

Instalacja rzeczywistego kodu formularza osadzenia wymaga pewnej wiedzy na temat kodowania stron internetowych lub systemu zarządzania treścią (CMS). Często lepiej jest przekazać kod swojemu deweloperowi strony internetowej, aby zainstalował go za Ciebie.

Jeśli masz średnią wiedzę na temat HTML, możesz zmodyfikować samą strukturę formularza. Możesz również dodać własne funkcje JavaScript (np.: niestandardowa walidacja formularza) lub możesz wywoływać inne funkcje / systemy przy onSubmit lub onClick w formularzu.

The only customization recommendation we have is not to make any changes to the JavaScript code block as that can cause errors. Related to this, we suggest you don't move form elements around too much from their original ordering as some JavaScript references rely on the relative positioning of objects in the form. Other than this, we strongly advise and encourage you to customize the form so it matches your website look and feel. It should feel like a natural part of your site experience and not feel like a tacked-on widget. We suggest this because we see agencies achieve higher levels of lead generation when they customize the form appropriately to match their website style. For some inspiration, check out these greatprzykłady wdrożeń klientów.

Gdy już wygenerujesz kod do osadzenia na karcie Embedding Settings, zauważysz, że są trzy różne sekcje. Pierwsza sekcja to CSS, następnie HTML i wreszcie JavaScript. Powinieneś dostosować pierwsze dwie sekcje i pozostawić JavaScript bez zmian. Jak zasugerowano w komentarzu w 2. linii, możesz przenieść sekcję CSS do swojego pliku CSS, aby wszystko było zarządzane centralnie w jednym miejscu.

Kod do osadzenia

Do instalacji kodu na konkretnych CMS'ach, napisaliśmy 6 oddzielnych przewodników dla niektórych z najpopularniejszych:

Powiadomienia o przesłaniu formularza

Jeśli chcesz otrzymywać wiadomość e-mail za każdym razem, gdy użytkownik przesyła formularz, po prostu włącz tę opcję i zdefiniuj "adres e-mail docelowy". Jeśli Twoja strona internetowa ma duży ruch i wielu użytkowników przesyła formularz, zalecamy wyłączenie powiadomień e-mail na rzecz ustawienia powiadomień w kanale Slack lub polegania na integracji Webhook z Twoim CRM (zobacz sekcję poniżej).

Powiadomienia e-mailowe formularza

Powiadomienia e-mail użytkownika

Możesz również włączyć wysyłanie wiadomości e-mail do użytkownika po przesłaniu formularza. Możesz opcjonalnie dołączyć wersję PDF raportu z audytu i dostosować wszystkie aspekty samej wiadomości e-mail, w tym temat, tytuł i treść wiadomości, logo, czcionkę i kolory.

Niektóre agencje nie pokazują raportu użytkownikowi, gdy przesyłają formularz, i dołączają go tylko do tego powiadomienia e-mail, które działa jako weryfikacja, że użytkownik wprowadził prawdziwy adres e-mail. To zmniejsza potencjalne ryzyko nadużycia formularza audytu przez anonimowych użytkowników uruchamiających wiele raportów i nigdy nie pozostawiających prawdziwych danych.

Zawartość powiadomienia e-mail może być całkowicie dostosowana. Niektóre agencje zamieszczają w treści e-maila linki do aplikacji do rezerwacji kalendarza, aby użytkownik mógł umówić się na spotkanie z nimi w celu omówienia raportu.

Projekt e-maila

Poniżej znajduje się przykład powiadomienia e-mail wysłanego do użytkownika, który przesyła formularz audytu:

Powiadomienie e-mail

Jak widać, nadawcą e-maila jest "noreply@websiteauditserver.com". Jest to celowo ogólna domena i ważne jest, aby zauważyć, że nazwa nadawcy lub adres e-mail nie mogą być zmienione. Nie możemy podszywać się pod adres e-mail Twojej firmy, ponieważ stwarzałoby to zagrożenie bezpieczeństwa i negatywnie wpływało na dostarczalność e-maila. W ustawieniach e-maila formularza osadzonego, możesz określić adres "Reply-To", aby jeśli odbiorca odpowie na ten e-mail, odpowiedź została skierowana do Ciebie.

Zapobieganie Spambotom i Nadużyciom

Poniżej opcji Projektu Email, znajduje się sekcja "Ograniczenia Użytkownika". Te ustawienia umożliwiają zapobieganie przesyłaniu formularza na podstawie adresu IP, emaila lub audytu URL, jeśli zidentyfikujesz nadużycia lub działania spamowe.

Ograniczenia użytkownika

Wszystkie 3 pola mogą zawierać wiele wartości, oddzielając każdą wartość przecinkiem (,). Jeśli chcesz zablokować e-maile z całej domeny (np.: Gmail), możesz użyć symbolu wieloznacznego gwiazdki w ten sposób: *@gmail.com. Jeśli chcesz zablokować URL oraz wszystkie jego strony i subdomeny, wpisz tylko domenę w ten sposób: website.com

Jeśli zostanie wprowadzony zablokowany adres IP, adres e-mail lub URL, użytkownik zobaczy następujący błąd podczas próby przesłania formularza:

Zablokuj wiadomość

Wysyłanie nowych leadów do Twojego CRM za pomocą Zapier

Jeśli Twoja agencja korzysta z CRM, takiego jak HubSpot, Salesforce, Pipedrive itp., możesz użyć opcji Webhook, aby połączyć Embeddable Audit Tool z Zapier. Możesz również postępować zgodnie z tymi krokami, aby skonfigurować powiadomienia o nowych leadach, które mają być wysyłane do kanału Slack lub w rzeczywistości do dowolnej innej aplikacji obsługiwanej przez Zapier:

Formularz webhook

Otwórz Zapier w nowej karcie i utwórz nowy Zap z aplikacją "Webhooks by Zapier" (zauważ, że jest to funkcja Premium, więc będziesz potrzebować jednego z płatnych planów Zapier):

Utwórz nowy Zap

Następnie wybierz opcję "Catch Hook":

Złap hak

Następnie kliknij przycisk "Kopiuj" obok niestandardowego adresu URL Webhook, który Zapier generuje dla Ciebie:

URL Webhook

Kliknij Kontynuuj, a następnie przełącz się z powrotem na kartę Ustawienia Osadzania SEOptimer i wklej ten URL w pole "Webhook Handler URL". Następnie kliknij przycisk "Test Call". To wyśle testowy lead do Zapier. Po kilku sekundach zobaczysz komunikat "200 OK" obok przycisku. Gdy to zobaczysz, przełącz się z powrotem na Zapier i kliknij przycisk "Test trigger":

Test trigger

Powinieneś teraz zobaczyć dane testowe w Zapier z komunikatem sukcesu "znaleźliśmy żądanie!":

Test udany

W tym momencie twój wyzwalacz SEOptimer jest teraz pomyślnie skonfigurowany w Zapier. Zauważysz w danych testowych pole "key" wysyłane przez SEOptimer. Ta wartość będzie zgodna z twoim kluczem API na stronie Ustawienia Osadzania. Zdecydowanie zalecamy ustawienie warunku w Zapier, aby sprawdzić, czy te 2 wartości są zgodne za każdym razem, gdy Zap się uruchamia. To zapewni, że wyzwalacz jest prawidłowo wywoływany przez SEOptimer, a nie przez złośliwą stronę trzecią.

Teraz, gdy Twój wyzwalacz jest gotowy, możesz utworzyć Akcję w Zapier, aby zapisać dane Lead w dowolnym obsługiwanym CRM, takim jak HubSpot lub innej aplikacji powiadamiającej, takiej jak Slack:

Połącz CRM

Przetestuj Nowy Formularz

Po zainstalowaniu formularza zalecamy przetestowanie zaktualizowanej strony i przesłanie formularza. Po przesłaniu powinieneś zostać przekierowany do swojego raportu, zobaczyć wiadomość potwierdzającą lub zostać przekierowany na inną stronę (w zależności od wybranej opcji w [Embed Settings]). Dodatkowo powinieneś otrzymać e-mail z powiadomieniem o nowym leadzie i mieć nowy rekord leada dodany do strony Leads.

Potencjalne Problemy i Konflikty

Jeśli z jakiegokolwiek powodu widget nie działa na Twojej stronie internetowej, zalecamy przeprowadzenie debugowania na swojej stronie przed zgłoszeniem zapytania do SEOptimer. Najczęstszą przyczyną problemów lub konfliktów są:

  • Inne wtyczki lub dodatki zakłócające: niektóre wtyczki dodają parametry śledzenia do dowolnych adresów URL na stronie internetowej lub w inny sposób zakłócają istniejącą logikę formularza
  • Kompatybilność z Javascript: Część naszego kodu zawiera fragment kodu Javascript do walidacji formularza. Inny kod Javascript na stronie może zakłócać to działanie