Att förvandla en lista med URL:er till ”delbara bevis”-skärmdumpar är den typen av jobb som ser enkelt ut… tills du har 40 flikar öppna och mappen Hämtade filer är total kaos.
Den här automatiseringen av URL-skärmdumpar slår hårdast mot marknadsteam när de behöver snabba snapshots av konkurrenter eller landningssidor. Men även QA-ansvariga som dokumenterar visuella förändringar och webbdesigners som samlar inspiration fastnar i samma loop. Resultatet är enkelt: skärmdumpar som tas och namnges konsekvent, sparas i Drive och är redo att delas.
Du får se exakt hur arbetsflödet gör om ett Google Sheet till en Google Drive-mapp med färdiga skärmdumpar, plus konfigurationsdetaljerna som gör det pålitligt.
Så fungerar automatiseringen
Hela n8n-arbetsflödet, från trigger till slutresultat:
n8n Workflow Template: Google Sheets till Google Drive, url-skärmdumpar klara
flowchart LR
subgraph sg0["Drive Sheet Created Flow"]
direction LR
n0["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Capture Page Images"]
n1@{ icon: "mdi:database", form: "rounded", label: "Retrieve Sheet Links", pos: "b", h: 48 }
n2@{ icon: "mdi:cog", form: "rounded", label: "Store Images in Folder", pos: "b", h: 48 }
n3@{ icon: "mdi:play-circle", form: "rounded", label: "Drive Sheet Created Trigger", pos: "b", h: 48 }
n4@{ icon: "mdi:message-outline", form: "rounded", label: "Dispatch Folder Email", pos: "b", h: 48 }
n1 --> n0
n0 --> n2
n2 --> n4
n3 --> n1
end
%% Styling
classDef trigger fill:#e8f5e9,stroke:#388e3c,stroke-width:2px
classDef ai fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
classDef aiModel fill:#e8eaf6,stroke:#3f51b5,stroke-width:2px
classDef decision fill:#fff8e1,stroke:#f9a825,stroke-width:2px
classDef database fill:#fce4ec,stroke:#c2185b,stroke-width:2px
classDef api fill:#fff3e0,stroke:#e65100,stroke-width:2px
classDef code fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
classDef disabled stroke-dasharray: 5 5,opacity: 0.5
class n3 trigger
class n1 database
class n0 api
classDef customIcon fill:none,stroke:none
class n0 customIcon
Problemet: att samla in URL-skärmdumpar är rent rutinjobb
Om du någon gång har behövt ”ta skärmdumpar på de här sidorna” från ett kalkylark vet du hur det brukar gå. Du öppnar en URL, väntar på att den ska ladda, tar en skärmdump, byter namn på filen och försöker sedan hålla ordning så att du faktiskt hittar allt senare. Gör du det för 20 sidor har du tappat en stor del av dagen. Gör du det varje vecka för kampanjkontroller, QA eller SEO-audits blir det en återkommande skatt på din uppmärksamhet. Ärligt talat är det värsta inte tiden. Det är röran du står kvar med.
Friktionen byggs på. Här börjar det manuella arbetet skapa fel.
- Att kopiera länkar från ett ark till en webbläsare leder till missade rader och dubbla skärmdumpar.
- Filer hamnar i Hämtade filer med slumpmässiga namn, så du lägger ytterligare 20 minuter på sortering.
- När någon frågar ”är skärmdumparna klara?” fastnar du i att svara istället för att bli klar.
- Små misstag smiter igenom, som att fånga fel tillstånd på en sida eller glömma en viktig URL.
Lösningen: ta skärmdumpar automatiskt från ett ark och arkivera dem i Drive
Det här arbetsflödet automatiserar hela processen ”ark till skärmdumpar” med n8n, Google Drive, Google Sheets, ScreenshotOne (via en HTTP-förfrågan) och Gmail. Det startar när du lägger till ett kalkylark i en specifik Google Drive-mapp. n8n hämtar URL:erna från kolumnen som heter Url (skiftläget spelar roll) och skickar sedan varje URL till ScreenshotOne för att generera en skärmdump av sidan. Bilderna sparas tillbaka i samma Google Drive-mapp, så allt hålls samlat med kalkylarket som skapade dem. När det är klart skickas ett Gmail-meddelande med en länk till mappen, så att du kan dela en destination istället för en hög med bilagor.
Arbetsflödet startar med en Google Drive-trigger för ”nytt kalkylark tillagt”. Google Sheets extraherar URL-listan, sedan tar ScreenshotOne bilder för varje rad. Till sist lagrar Google Drive filerna och Gmail skickar ”klart”-notisen.
Det du får: automatisering vs. resultat
| Vad det här arbetsflödet automatiserar | Resultat du får |
|---|---|
|
|
Exempel: så här ser det ut
Säg att du samlar in 30 landningssidors URL:er varje vecka för en snabb visuell kontroll. Manuellt lägger du kanske 3 minuter per URL på att öppna sidan, ta skärmdump, byta namn och arkivera, vilket blir runt 90 minuter. Med det här arbetsflödet lägger du kalkylarket i rätt Google Drive-mapp (cirka 2 minuter) och väntar sedan medan ScreenshotOne genererar bilder och n8n sparar dem. Du får ett Gmail-meddelande med mapplänken när det är klart, och veckan blev precis enklare.
Det här behöver du
- n8n-instans (prova n8n Cloud gratis)
- Alternativ för egen drift om du föredrar det (Hostinger fungerar bra)
- Google Drive för att bevaka en mapp och lagra skärmdumpar
- Google Sheets för att läsa URL:er från kolumnen ”Url”
- ScreenshotOne-åtkomstnyckel (hämta den i din ScreenshotOne-dashboard)
- Gmail för att mejla en mapplänk med ”skärmdumparna är klara”
Svårighetsnivå: Nybörjare. Du kopplar konton, klistrar in en API-nyckel och väljer Drive-mappen som ska bevakas.
Vill du inte sätta upp detta själv? Prata med en automatiseringsexpert (gratis 15-minuters konsultation).
Så fungerar det
Ett kalkylark som hamnar i rätt Google Drive-mapp triggar allt. Arbetsflödet använder en Drive-trigger som bevakar en specifik mapp, så du behöver inte klicka på ”kör” eller komma ihåg ett schema.
Google Sheets hämtar URL:erna från en kolumn som heter ”Url”. Om arket har andra kolumner (titlar, kategorier, kampanjnamn) kan du behålla dem. Den här mallen behöver främst den URL-kolumnen för att skapa skärmdumpskön.
ScreenshotOne tar sidbilderna automatiskt. n8n skickar varje URL via en HTTP-förfrågan till ScreenshotOne, som returnerar en bild som du kan lagra som vilken annan fil som helst.
Google Drive sparar skärmdumparna och Gmail skickar överlämningsmejlet. Allt skrivs tillbaka till samma mapp som kalkylarket, och sedan mejlar arbetsflödet en länk så att intressenter kan öppna ett ställe och se resultatet.
Du kan enkelt justera skärmdumpsinställningarna (viewport, fördröjning, enhetstyp) efter dina behov. Se hela implementationsguiden nedan för anpassningsalternativ.
Steg-för-steg-guide för implementering
Steg 1: Konfigurera triggern Drive Sheet Created Trigger
Ställ in arbetsflödet så att det triggas varje gång ett nytt Google Sheet skapas i en specifik Drive-mapp.
- Lägg till och öppna Drive Sheet Created Trigger.
- Ställ in Event till
fileCreated. - Ställ in Trigger On till
specificFolder. - Ställ in Folder To Watch till ert mapp-ID:
[YOUR_ID]. - Ställ in File Type till
application/vnd.google-apps.spreadsheetunder Options. - Credential Required: Anslut era googleDriveOAuth2Api-uppgifter.
Steg 2: Anslut Google Sheets
Hämta URL:er från det nyligen skapade Sheet så att de kan fångas som skärmbilder.
- Lägg till och öppna Retrieve Sheet Links.
- Ställ in Document ID till
={{ $json.id }}för att använda Sheet-filen som skapats av triggern. - Ställ in Sheet Name till
Sheet1. - Credential Required: Anslut era Google Sheets-uppgifter (noden har för närvarande inga konfigurerade).
Sheet1 kommer noden att misslyckas. Uppdatera Sheet Name därefter.Steg 3: Konfigurera Capture Page Images
Konfigurera API-anropet för skärmbilder som omvandlar varje URL till en bild.
- Lägg till och öppna Capture Page Images.
- Ställ in URL till
https://api.screenshotone.com/take?. - Aktivera Send Query och Send Headers.
- I Query Parameters ställer ni in url till
={{ $json.Url }}och block_cookie_banners tilltrue. - I Header Parameters ställer ni in X-Access-Key till
[CONFIGURE_YOUR_API_KEY].
Url, eftersom {{ $json.Url }} refereras av den här noden.Steg 4: Konfigurera Store Images in Folder och Dispatch Folder Email
Spara skärmbilderna i Drive-mappen och meddela via e-post när bearbetningen är klar.
- Lägg till och öppna Store Images in Folder.
- Ställ in Name till
=screenshot_{{ $('Capture Page Images').item.json.Url }}. - Ställ in Folder ID till
={{ $('Drive Sheet Created Trigger').item.json.parents[0]}}. - Ställ in Input Data Field Name till
=data. - Credential Required: Anslut era Google Drive-uppgifter (noden har för närvarande inga konfigurerade).
- Lägg till och öppna Dispatch Folder Email.
- Ställ in Send To till
[YOUR_EMAIL]. - Ställ in Subject till
Screenshots are ready. - Ställ in Email Type till
text. - Ställ in Message till
=Your screenshots are ready! You can find them in the following folder: https://drive.google.com/drive/folders/{{ $json.parents }}?usp=drive_link. - Credential Required: Anslut era Gmail-uppgifter (noden har för närvarande inga konfigurerade).
{{ $json.parents }} finns med i Google Drive-svaret och att trigger-mappen är korrekt inställd.Steg 5: Testa och aktivera ert arbetsflöde
Validera hela arbetsflödet och slå på det för löpande användning.
- Klicka på Test workflow i n8n.
- Skapa ett nytt Google Sheet i den övervakade mappen med en
Url-kolumn och minst en URL. - Bekräfta att Capture Page Images returnerar bilddata och att Store Images in Folder skapar en fil i samma mapp.
- Verifiera att Dispatch Folder Email skickar ett mejl som innehåller mapp-länken.
- När allt fungerar, växla arbetsflödet till Active för att köra i produktion.
Vanliga fallgropar
- Behörigheter i Google Drive kan blockera skapande av mappar eller uppladdningar. Om skärmdumparna inte dyker upp, kontrollera först att det anslutna Google-kontot har åtkomst till just den mappen.
- Om du använder Wait-noder eller extern rendering varierar processtiderna. Öka väntetiden om efterföljande noder fallerar på tomma svar.
- ScreenshotOne-anrop misslyckas om åtkomstnyckeln saknas eller lämnas som platshållare. Uppdatera nyckeln i HTTP-förfrågningsnoden ”Capture Page Images” innan din första körning.
Vanliga frågor
Cirka 30 minuter om dina Google-konton redan är anslutna.
Nej. Du kopplar Google-apparna och klistrar in din ScreenshotOne-åtkomstnyckel.
Ja. n8n har ett gratis alternativ för egen drift och en gratis provperiod på n8n Cloud. Cloud-planer startar på 20 USD/månad för högre volymer. Du behöver även räkna in ScreenshotOne-kostnader baserat på hur många skärmdumpar du genererar.
Två alternativ: n8n Cloud (hanterat, enklast att komma igång) eller egen drift på en VPS. För egen drift är Hostinger VPS prisvärd och hanterar n8n bra. Egen drift ger obegränsade exekveringar men kräver grundläggande serverhantering.
Ja, och det är den första justeringen de flesta gör. Du ändrar HTTP-förfrågningsnoden ”Capture Page Images” för att justera saker som viewport-storlek, enhetsemulering och eventuell renderingsfördröjning för tunga sidor. Vanliga anpassningar är att fånga både mobil- och desktopversioner, lägga till längre fördröjning för JavaScript-tunga sidor och spara filer med namn baserat på en annan kolumn i arket (till exempel ”Title”).
Oftast beror det på en ogiltig eller saknad åtkomstnyckel som lämnats kvar som platshållare i HTTP-förfrågan. Uppdatera nyckeln i n8n och kör sedan en enda test-URL för att bekräfta att svaret returnerar en bild. Om det fortfarande misslyckas, kontrollera att URL:en är offentligt åtkomlig (ingen inloggningsvägg) och att du inte slår i ScreenshotOnes rate limits när du kör stora ark.
Dussintals till hundratals per körning är normalt, men den praktiska gränsen beror på din ScreenshotOne-plan, n8n:s exekveringsgränser och hur snabbt målsajterna renderar. På n8n Cloud hanterar högre planer större volymer och egen drift tar bort exekveringstak (din server blir flaskhalsen). Om du kör riktigt stora listor, skicka in mindre batchar per kalkylark och håll koll på misslyckade objekt så att du kan försöka igen med just de URL:erna.
Ofta, ja. Det här arbetsflödet bygger på att loopa igenom många rader, anropa ett externt skärmdumps-API och sedan spara binära filer i Drive, och sådana ”flera steg per rad”-jobb kan bli dyra eller klumpiga i Zapier/Make. n8n är bekvämt med branching och batchbearbetning, och egen drift kan göra körningar med hög volym billigare. Nackdelen är att du kan behöva lägga lite mer tid på att konfigurera det första gången. Prata med en automatiseringsexpert om du vill ha en snabb rekommendation utifrån din exakta volym.
När det här väl rullar slutar du tänka på skärmdumpar helt. Lägg arket i Drive, vänta på mejlet, dela mappen, klart.
Kontakta oss
Hör av dig, så diskuterar vi hur just din verksamhet kan dra nytta av alla fantastiska möjligheter som AI skapar.