Ajoitetut kuvakaappaukset ja pikseli-diff = kilpailijoiden valvonta ilman heidän sivustojaan käymättä

Kilpailutieto tarkoitti aiemmin kilpailijoiden verkkosivuilla käymistä manuaalisesti, heidän sivuillaan selaamisesta ja yrityksestä muistaa, mikä näytti erilaiselta kuin viimeksi. Ehkä hinta muuttui. Ehkä etusivulla on uusi ominaisuus. Ehkä toimintakehotuspainike siirtyi, tai ilmainen kokeiluversio korvattiin demo-pyyntölomakkeella. Näiden muutosten huomaaminen edellyttää sivuston käymistä usein tarpeeksi niiden huomitsemiseksi ja selkeän henkisen kuvan säilyttämistä siitä, miltä sivu näytti eilen, jotta voit nähdä, mitä muuttui tänään. Ihmisen muisti on tämän tyyppisessä tehtävässä spektakulaarisen huono. Ihmiset on ohjelmoitu huomaamaan dramaattisia eroja, mutta he säännöllisesti ohittavat hienovaraiset muutokset. Kilpailija voisi nostaa hintaa viisi prosenttia, järjestää uudelleen ominaisuuksien vertailutaulukkoa tai hiljalleen poistaa tuotteen valikoimastaan, ja muutos jäisi huomaamatta viikoiksi, kunnes joku tarkastelee tarpeeksi tarkasti.

Vaihtoehto on automatisointi. Sen sijaan, että luottaisit ihmisen muistiin ja manuaalisiin käynteihin, järjestelmä ottaa kuvakaappauksen jokaisesta kilpailijaivusta säännöllisesti ja tallentaa kuvat aikajärjestyksessä. Jokainen uusi kuvakaappaus verrataan edelliseen käyttämällä pikseli-diff-algoritmia, joka tunnistaa tarkalleen mitkä sivun alueet ovat muuttuneet. Tuotoksena on korostettu päälle, joka näyttää erot sekä prosenttiosuuden, joka ilmaisee kuinka paljon sivusta vaikutettiin. Yhden prosentin muutos voi olla pieni tekstin muokkaus. Neljäkymmentä prosenttia muutos on suuri uudelleenmuotoilu. Joka tapauksessa järjestelmä havaitsee sen muutaman tunnin kuluessa eikä vaadi yhtään manuaalista käyntiä.

Tämä ei ole teoreettinen. Infrastruktuuri osoitteessa screenshots.yeb.to tukee juuri tätä työnkulkua. Aikataulut voidaan määrittää kaappaamaan mikä tahansa julkinen URL-osoite väleillä viidestä minuutista yhteen päivään. Jokainen sieppaus tallennetaan aikaleiman kanssa, ja diff-moottori vertaa peräkkäisiä sieppauksia muutosraporttien luomiseksi. Käytännön tulos on kojelauta, joka näyttää yhdellä silmäyksellä mitkä kilpailijaivut muuttuivat tänään, mitkä sivualueet vaikuttuivat ja kuinka merkittäviä muutokset olivat. Ei ole kirjanmerkkejä hallinnoimaan, ei manuaalisia käyntejä muistaa, ei riippuvuutta viallisesta ihmisen kyvystä havaita eroja kahden samantapaisen sivun välillä.

Mitä pikseli-diff itse asiassa havaitsee ja miksi sillä on väliä

Pikseli-diff-algoritmi toimii visuaalisen vertailun perustavanlaatuisimmalla tasolla. Se ottaa kaksi identtisiä kokoja olevaa kuvaa ja vertaa niitä pikseli pikseliltä. Jokaiselle pikselille se laskee värieron kahden version välillä. Jos ero ylittää määritettävän kynnyksen, pikseli merkitään muuttaneeksi. Kaikkien muuttuneiden pikselien yhdistelmä tuottaa lämpökartan, joka näyttää tarkalleen missä sivulla jotain on eri, ja muuttuneiden pikselien kokonaismäärä jaettuna pikselien kokonaismäärällä antaa kokonaismuutosprosenttia.

Tämän lähestymistavan kauneus on sen kattavuus. Tekstin vertailutyökalu havaitsi sisällön muutokset, mutta jätti muotoilujen päivitykset huomiotta. DOM-vertailutyökalu havaitsi rakenteiden muutokset, mutta jätti CSS-muokkaukset huomiotta, jotka muuttavat visuaalista ulkonäköä ilman HTML:n muuttamista. Hinnoitteluscraper havaitsi hinnanmuutokset, mutta jätti kaiken muun huomiotta. Pikseli-diff havaitsee kaikki nämä, koska se toimii lopullisessa renderoidussa tuotoksessa, samassa asiassa jonka ihminen näkisi sivua katsottaessa. Jos jotain muuttui visuaalisesti, pikseli-diff havaitsee sen riippumatta siitä, onko muutos peräisin HTML:stä, CSS:stä, JavaScriptistä, kuvista vai jonka tahansa renderointipinonmuusta kerroksesta.

Harkitse kilpailun muutostyyppejä, joilla on merkitystä eniten. Kilpailija nostaa yrityssuunnitelmansa hinnasta $99 $129:ksi kuukaudessa. Hinnoittelusivu näyttää lähes identtiseltä, mutta pikseli-diff korostaa tarkan alueen, jossa numero muuttui. Kilpailija lisää uuden integraation ominaisuusluetteloonsa. Ominaisuuksien sivu saa pari uutta riviä, ja diff näyttää tarkalleen missä lisäykset ovat. Kilpailija poistaa täysin ilmaisen tasonsa ja korvaa ilmaisen suunnitelman sarakkeen "Ota yhteyttä myyntiin" -paikkemarkkeri. Diff korostaa koko sarakkeen muuttuneeksi, mikä tekee strategisen muutoksen välittömästi ilmeiseksi. Mitään näistä muutoksista ei olisi havaittu perinteisellä käyttöajan seurannalla tai avainsanailmoituksella. Ne vaativat visuaalista vertailua, joka on tarkalleen mitä pikseli-diff tarjoaa.

Vertailun herkkyys on säädettävä, mikä on tärkeää väärien positiivisten välttämiseksi. Verkkosivut sisältävät dynaamisia elementtejä, jotka muuttuvat jokaisen latauksen yhteydessä: mainosten sijoitukset, aikaleiman näytöt, personoidut suositukset ja animoidut banderollit. Ilman jonkinlaista suodatusta diff liputtaisi jokaisen kuvakaappauksen erilaiseksi. Ratkaisu sisältää kaksi mekanismia. Ensinnäkin värin erostumikynnys, joka ohittaa sub-pikselit renderointivariaat ja pienempiä anti-aliasing-muutoksia. Toiseksi määritettävät poissulkemisalueet, jotka naamiavat sivun tunnettuja dynaamisia alueita. Mainosbanneri, joka pyörii kolmekymmentä sekuntia, ei saa laukaista kilpailun muutoshälytystä. Poissulkemisalue naamii alueen, ja vain stabiilisten sisältöalueiden muutokset luovat ilmoituksia.

Kilpailun valvontasuunnitelman rakentaminen, joka toimii itsestään

Valvontasuunnitelman määrittäminen alkaa tunnistamalla mitkä sivut kannattaa valvoa. Kaikki kilpailijan verkkosivun sivut eivät vaadi päivittäisiä kuvakaappauksia. Sivut, joissa on eniten toiminnallista tietoa, ovat tyypillisesti hinnoittelusivu, etusivu, ominaisuus- tai tuotesivu ja kaikkien kohderyhmäsivujen samoilla avainsanoilla. SaaS-yritykselle, joka seuraa kolmea kilpailijaa, se voi olla kaksitoista viisitoista URL-osoitetta yhteensä. E-kauppa-operaatiolle, joka seuraa hinnanmuutoksia, se voi olla satoja tuotesivuja, jotka kaikki kuvataan päivittäisellä tai viikkotaululla.

Ajoitusjärjestelmä osoitteessa screenshots.yeb.to tukee URL-kohtaisia määrityksiä. Jokaisella URL-osoitteella on oma sieppausväli, näyttöasetukset ja diff-herkkyys. Kilpailijan hinnoittelusivu, joka muuttaa hintoja neljännesvuosittain, saattaa vaatia vain viikoittaisen sieppauksen. Kilpailijan etusivu, joka kokeilee aggressiivisesti viestejä ja muotoiluja, saattaa vaatia päivittäisiä sieppauksia. Tuotesivut nopeasti liikkuvilla markkinoilla voivat hyötyä sieppauksista joka muutaman tunnin välein. Ajoitus on joustava tarpeeksi sovittamaan valvontaintensiteetin kunkin sivun tietoarvoon.

Ilmoitukset voidaan reitittää eri määränpäihin muutoksen tyyppi- ja laajuuden perusteella. Pienempi tekstimuokkaus kilpailijan sivusta saattaa tuottaa sähköposti-yhteenvedon viikon lopussa. Hinnanmuutos, joka ylittää kaksikymmentä prosenttia hinnoittelusivu-alueesta, voi laukaista välittömän Slack-ilmoituksen myyntiryhmälle. Kilpailijan etusivun täydellinen uudelleenmuotoilu voi parantaa webhookia, joka luo tehtävän tuoteryhmän projektinhallintaohjelmaan. Tämä tasoitettu ilmoituslähestymistapa estää hälytysväsymyksen samalla varmistamalla, että merkittävät kilpailuliikkeet julkaistaan välittömästi.

Tallennetut kuvakaappaukset toimivat myös kilpailun kehityksen visuaalisena arkistona ajan myötä. Katsomalla taaksepäin kolmen kuukauden viikkottaisissa sieppauksissa paljastetaan trendit, joita yksittäinen vertailu ei näyttäisi. Yksinkertaistiko kilpailija asteittain etusivaansa poistamalla ominaisuuksia peräkkäisten viikkojen aikana, kunnes vain ydinarvoehdotus jäi? Koeilivatko he eri hinnoittelurakenteiden kanssa testaten vuosittain laskutusta ennen paluuta kuukausittaisiin vaihtoehtoihin? Siirtyi heidän muotoilun kieli yritysten sinisestä käynnistys-vihreään uudelleebrändäysponnistelun kautta, joka otettiin käyttöön sivu sivulta? Nämä trendit ovat näkymättömiä reaaliajassa, mutta ilmeisiä jälkikäteen, ja kuvakaappausarkisto tekee ne saavutettaviksi ilman lisäponnistusta.

Kun verkon kaavinta epäonnistuu ja kuvakaappaukset ja OCR astuvat asiaan

Perinteinen kilpailuanalyysi perustuu usein verkon kaavintaan strukturoidun datan poimimiseksi kilpailijoiden sivuista. Kaavijoki vierailee hinnoittelusivu, jäsentää HTML:n ja poimii hintaarvot tietokantaan. Tämä toimii hyvin staattisilla sivuilla, joilla on ennustettava HTML-rakenne. Se epäonnistuu näyttävästi kasvavaa määrää JavaScript-kehikkoilla rakennettuja sivustoja varten, jotka renderöivät sisällön dynaamisesti. React- tai Next.js-sovellus voi palvella kaavijalle lähes tyhjän HTML-dokumentin, kaikilla todellisilla sisällöllä ladattu JavaScript-suorituksen jälkeen. Kaavija ei näe mitään, koska se ei suorita JavaScriptiä. Hintatiedot, ominaisuusluettelot, testimoniaalit, kaikki se on näkymätöntä perinteiselle HTML-jäsentimelle.

Kuvakaappaus yhdessä OCR:n kanssa kiertää tämän ongelman kokonaan. Päätön selain suorittaa JavaScriptin, renderöi koko sivun ja kaappaa visuaalisen tuotoksen. Jos strukturoidut tiedot on poimittava kuvakaappauksesta, OCR käsittelee kuvan tekstin poimimiseksi. Tulos on samat tiedot, joita kaavija olisi tuottanut, mutta saatu tavalla, joka toimii riippumatta siitä, miten sivu on rakennettu. Riippumatta siitä, onko kilpailijan sivu palvelinpuolesta renderöity PHP, asiakaspuolelta renderöity React SPA vai Webflow-suunnittelu mukautettavilla animaatioilla, kuvakaappaus kaappaa lopullisen visuaalisen tuotoksen ja OCR poimii tekstisisällön.

Tämä lähestymistapa myös kiertää monet verkon kaavintaa vastaan olevat toimenpiteet, joita sivustot ottavat käyttöön estääkseen automatisoitu tiedon keräämisen. Bot-havainnon järjestelmät, jotka analysoivat HTTP-otsakkeita, pyyntökuvioita ja JavaScript-sormenjälkiä, on suunniteltu tunnistamaan ja estämään perinteiset kaavijat. Päätön selain, joka renderöi sivun kuin oikea vierailija, on paljon vaikeampi erottaa oikeutetusta liikenteestä. Kuvakaappaus otetaan oikeasta selaimen istunnosta, joka lataa kaikki resurssit, suorittaa kaikki skriptit ja renderöi kaikki tyylit. Kohdesivuston näkökulmasta se näyttää normaalilta sivun lataamalla, koska se olennaisesti on.

Kilpailuetu näkemällä mitä muut jäävät huomiotta

Automatisoitu kilpailuvalvonnan arvo kasvaa ajan myötä. Ensimmäisen viikon aikana se havaitsee hinnanmuutoksen, joka olisi jäänyt huomaamatta kuukauteen. Ensimmäisellä kuulla se paljastaa A/B-testausmallin kilpailijan saapumissivulla, joka viittaa heidän viestintästrategian muutokseen. Ensimmäisellä neljänneksellä se tarjoaa täydellisen visuaalisen historian siitä, miten jokaisen kilpailijan julkinen ulkonäkö on kehittynyt, mikä informoi strategisia päätöksiä asemointia, hinnoittelua ja ominaisuuksien kehittämistä.

Useimmilla yrityksillä kilpailluilla markkinoilla on jonkinlainen kilpailujen valvonta, mutta se on melkein aina manuaalista, epäjohdonmukaista ja puutteellista. Joku merkitsee kilpailijan hinnoittelusivu ja tarkistaa sen kun muistaa. Joku toinen seuraa kilpailijan blogia ja skannaa tuoteilmoituksia. Myyntiryhmä raportoi satunnaisesti, mitä se kuulee potentiaalisilta asiakkaita kilpailijoiden tarjouksista. Nämä satunnaiset signaalit ovat parempi kuin mikään, mutta ne jäävät huomiotta rutiinimuutoksista, asteittaisista muutoksista, jotka usein ovat tärkeimmät. Kilpailija ei ilmoita viiden prosentin hinnan noususta blogikirjoituksessa. He yksinkertaisesti päivittävät numeron hinnoittelusivu. Ilman automatisoitua valvontaa tämä muutos on näkymätöntä kunnes se ilmenee myyntikeskustelussa viikkoja myöhemmin.

Automatisoitu kuvakaappausvalvonta muuttaa kilpailuanalyysin satunnaisista, ponnistelua vaativista toiminnoista passiiviseksi, jatkuvaksi virtaaksi. Kuvakaappaukset kuvataan automaattisesti. Diffit lasketaan automaattisesti. Hälytykset toimitetaan automaattisesti. Ainoa inhimillinen ponnistus, joka vaaditaan, on merkittyjen muutosten tarkistaminen, ja jopa tämä ponnistus on minimoidaan visuaalisen muodon avulla. Korostetun diff-päälle katsominen ja ymmärrys mitä muuttui kestää sekunteja. Tekstiraportin lukeminen ja yrityksistä rekonstruoida visuaalinen vaikutus kestää minuutteja. Satojen valvottujen sivujen ja tuhansien kuvakaappattujen kuvakaappausten yli tämä aikaero lisää merkittävä toiminnallinen etu.