A/B-тестілеу үшін сайттағы мазмұнды ауыстыру скрипті
Егер сіз маркетолог немесе SEO-маман болсаңыз, гипотезаларды тұрақты түрде тексерудің маңыздылығын жақсы білесіз: тақырыптар, суреттер, әрекетке шақырулар, пішіндер – барлығы қолданушының мінез-құлқы мен конверсияға әсер етеді.
Алайда A/B-тесттерді іске қосу көбінесе техникалық қиындықтарға тіреледі. Кодқа өзгеріс енгізу, бағдарламашылардың көмегін күту, IT-мамандармен келісе отырып жасау қажет, нәтижесінде тестті не кейінге қалдырасыз, не жылына бір рет әрең іске қосасыз.
QForm ұсынған ауыстыру скрипті бұл мәселені шешеді. Оның көмегімен мазмұн қолданушының браузерінде серверге өзгеріс енгізбей-ақ өзгереді, әзірлеушілерді тартудың қажеті жоқ. Ол үшін тек скриптті қосып, нұсқалар файлын (channel.json) жасап, оны сайтқа орналастыру жеткілікті.
Мазмұн автоматты түрде ауыстырылады, қолданушы тек өзіне жүйе тағайындаған нұсқаны көреді, ал ақпарат бірден Яндекс.Метрикаға жіберіледі.
Іздеу жүйелері тек бастапқы мазмұнды көреді, өйткені ауыстыру бет жүктелгеннен кейін жүреді. Бұл SEO тұрғысынан құралдың қауіпсіз екенін білдіреді.
Скрипт қалай жұмыс істейді: скрипттен бастап ауыстыруға дейін
QForm скрипті қолданушының қай тесттік топқа жататынын тексереді және алдын ала белгіленген ережелерге сәйкес беттегі көрсетілген элементтерге тиісті мазмұнды қояды.
Барлығы дұрыс жұмыс істеуі үшін үш қадамды орындау қажет:
Скриптті қосу
<head> немесе </body> алдында келесі жолды қосыңыз:
html
<script defer src="https://storage.yandexcloud.net/script/channel/channel.js"></script>Беттегі элементтерді көрсету
Бетте әртүрлі мазмұн нұсқаларын қоюға болатын HTML-блоктар бар. Ол үшін CSS-кластарын түсінікті етіп атау жеткілікті.
Мысал:
html
<div class="text-1">Әдепкі тақырып</div>
<div class="text-2"><img src="default.jpg"></div>Скрипт text-1 және text-2 кластары бар барлық блоктарды тауып, оларды сәйкес JSON нұсқаларындағы мазмұнмен ауыстырады. Кластардың аттарын өзіңіз ойлап табасыз – ең бастысы, олар JSON-файлдағы кілттермен сәйкес келуі тиіс.
channel.json файлын жасау
Кластар көрсетілген соң, енді нұсқалардың өздерін баптаймыз. Бұл сайттың түбірінде орналасатын channel.json конфигурациялық файлында жасалады.
Мысал:
{
"yandexCounterId": 123456789,
"channels": {
"variant-a": {
"text-1": "A нұсқасы үшін тақырып",
"text-2": "<img src='https://site.ru/banner-a.jpg'>"
},
"variant-b": {
"text-1": "B нұсқасы үшін тақырып",
"text-2": "<img src='https://site.ru/banner-b.jpg'>"
}
}
}Маңызды сәттер:
- yandexCounterId – Метрика есептегішінің ID, оқиғалар (нұсқа атауы бойынша) осында жіберіледі.
- channels – тесттелетін нұсқалар тізімі.
- text-1, text-2 – беттегі CSS-кластармен сәйкес келетін кілттер. Олардың мәні – HTML, ол көрсетіледі.
Файлда кез келген санды нұсқалар мен блоктар болуы мүмкін. Тек мәтін емес, HTML да қоюға болады: суреттер, формалар, батырмалар, iframe, бейне виджеттер және т.б.
Енді жүйенің құрылымын түсіндік, енді сайтта қандай элементтерді тестілеуге болатынын және бұл іс жүзінде қалай көрінетінін қарастырайық.
Не тестілеуге болады: A/B-алмастыру мысалдары
QForm скрипті кез келген элементті өзгертуге толық еркіндік береді: өз аудиторияңызға не жақсы әсер ететінін тексеріңіз. Міне, практикалық мысалдар:
Тақырыптар
Қай формулировкалар жақсы назар аударатынын тексеріңіз:
json
"text-1": "Апта соңына дейін сатып алуға үлгер"немесе
json
"text-1": "Бүгін ғана 20% жеңілдік"Мұндай тақырыптарға арналған A/B тесті сайтта қай нұсқа көбірек басылатынын немесе пайдаланушыны ұзақ ұстайтынын жылдам анықтауға мүмкіндік береді.
Суреттер мен баннерлер
Бірінші әсерге әсер ететін визуалды элементтерді салыстырыңыз. Әр қолданушыға тест аясында өз нұсқасы көрсетілетін баннерлерді ротация арқылы тестілеудің тамаша тәсілі:
json
"text-2": "<img src='img/banner-a.jpg'>"немесе
"text-2": "<img src='img/banner-b.jpg'>"Батырмалар және CTA
Батырма мәтінін немесе дизайнын өзгертіп көріңіз:
"text-3": "<button class='btn'>Ұсынысты алу</button>"немесе
"text-3": "<button class='btn'>Бағаны білу</button>"QForm пішіндері
Пішіннің әртүрлі нұсқаларын көрсетіңіз: бейнемен, бейнесіз, ұзындығы әртүрлі:
"text-4": "<div data-formid='form_a'></div>"немесе
"text-4": "<div data-formid='form_b'></div>"Бейне және виджеттер
Қош келдіңіз, түсіндіру, демонстрацияларды тестілеңіз:
"text-5": "<div data-widget='videowidget_a'></div>"немесе
"text-5": "<div data-widget='videowidget_b'></div>"Барлық ауыстырулар Яндекс.Метрикада мақсат ретінде тіркеледі. Қай нұсқа жақсы нәтиже бергенін нақты бақылай аласыз: қаралымдар, басулар, пішіндер жіберу және басқа әрекеттер бойынша.
QForm құралдарымен скрипт қалай жұмыс істейді
Скрипттің ең үлкен артықшылықтарының бірі – оның QForm-ның басқа құралдарымен толық үйлесімділігі. Бұл тек экрандағы мазмұнды алмастырумен шектелмей, толық воронка құруға мүмкіндік береді: көрсетуден бастап өтінімді қабылдап, CRM-ге жеткізуге дейін.
Процестің мысалы:
- Пайдаланушы сайтқа кіреді және оған A немесе B нұсқасы тағайындалады.
- Скрипт қажетті мазмұнды қояды: мәтін, баннер немесе пішін.
- Қолданушы QForm пішінін толтырады.
- Жүйе оның сегментін автоматты түрде пішінге жібереді (cookie немесе utm арқылы).
- Өтінім CRM-ге түседі және оның қай нұсқадан келгенін бірден көресіз.
- Метрика нұсқа атауымен мақсатты тіркейді.
Интеграция мүмкіндік береді:
- бір бетте әртүрлі пішіндерді қолдануға;
- CRM-де қай нұсқадан ли́д келгенін көруге;
- автоматты әрекеттерді іске қосуға (мысалы, КП жіберу);
- сегменттер бойынша деректерді жинау және сүзуге;
- тест бойынша аналитиканы қолмен жұмыссыз алуға.
Неліктен бұл ыңғайлы және тиімді
QForm скрипті арқылы тесттерді баптау кодпен жұмыс істейтін классикалық шешімдерге қарағанда әлдеқайда оңай және жылдам.
Тестті баптау өте аз уақытты алады: бір скрипт + нұсқалар жазылған бір файл. Барлығы сайтты бұзбай, функционалға әсер етпей оқылады және жаңартылады.
Не өзгерту керек екенін өзіңіз шешесіз: тақырыптар, суреттер, пішіндер, батырмалар, видео. Барлығы channel.json файлы арқылы реттеледі, сондықтан әзірлеушілерге тәуелді емессіз.
Скрипт кез келген сайтқа жарайды: Tilda, WordPress, Bitrix, жеке CMS. Мақсаттар бірден Метрикаға жіберіледі, ал сегменттер бойынша ақпарат QForm формалары мен есептеріне қосылады.
Бұл маркетологқа тиімді жұмыс істеуге мүмкіндік береді: гипотеза ойлап тапты → іске қосты → нәтижені көрді → ең тиімді шешімді бекітті.
Қауіпсіздік және SEO-ға әсері
Сайт қауіпсіздігі
- Скрипт клиент жағында жұмыс істейді, яғни серверде және сайт кодында ештеңе өзгермейді.
- Ол асинхронды түрде қосылады (defer) және бетті жүктеуді бөгемейді.
- Егер channel.json файлы уақытша қолжетімсіз болса да, сайт қателіксіз жұмыс істей береді.
Іздеу жүйелеріне әсері
- Яндекс пен Google секілді іздеу роботтары тек түпнұсқа мазмұнды көреді, ауыстыру болмайды. Бұл қайталанудан қорғайды және индекстеуге әсер етпейді.
- Барлық мазмұн нұсқалары бір бетте тестіленеді, жаңа URL немесе көшірмелер болмайды. Бұл бет позициясының сақталуы үшін маңызды.
- QForm видеовиджеттерін осы скрипт арқылы тестілеу – сайттағы уақытты, белсенділікті, көру тереңдігін арттырады. Бұл SEO үшін нақты артықшылық.
Скрипт танымал платформаларда тестіленген және аналитикамен, A/B-тест жүйелерімен, форма конструкторларымен немесе басқа сыртқы виджеттермен жанжал тудырмайды.
Қорытынды
QForm мазмұн ауыстыру скрипті A/B-тесттер үшін ыңғайлы және қауіпсіз. Барлығы бірнеше қадамда реттеледі: скриптті қосасыз, нұсқалары бар JSON жасайсыз және мазмұнды қай блоктарда ауыстыру керектігін көрсетесіз. Бұл ретте сайт құрылымын өзгертудің, кодқа өзгеріс енгізудің қажеті жоқ.
Тест нәтижелері бірден Яндекс.Метрикаға түседі, ал нұсқаларды өтінімдерде, пішіндерде және CRM жүйелерде пайдалануға болады. Бұл маркетологқа толық бақылау береді: қандай нұсқалар жұмыс істеді, қай жерде конверсия жоғары, қолданушылар қалай жауап берді. Ең бастысы, бұл процестердің ешқайсысы SEO-ға кедергі келтірмейді: іздеу роботтары бастапқы тұрақты мазмұнды көреді, ал ауыстыру тек тірі қолданушы үшін және тек бет жүктелген соң орындалады.
QForm тестілеуді жылдам, икемді және ашық етеді. Бұл гипотезаларды тоқсан сайын емес, күн сайын іске қосып, бірден нәтижені көруге мүмкіндік беретін құрал.