Hoe voeg je Contact Form 7 formulier in?

Zoeken:

Het invoegen van Contact Form 7 formulieren op je website

Het toevoegen van een Contact Form 7 formulier aan je WordPress website is een essentiële stap om interactie met je bezoekers mogelijk te maken. Deze populaire plugin maakt gebruik van shortcodes om formulieren in te sluiten in pagina’s, berichten, of zelfs in widgets. In deze handleiding leggen we uit hoe je dit eenvoudig kunt doen.

Stap 1: Installeer Contact Form 7

Voordat je een formulier kunt toevoegen, moet je zorgen dat de Contact Form 7-plugin is geïnstalleerd en geactiveerd op je WordPress-site. Als je dit nog niet hebt gedaan, kun je de plugin vinden in de WordPress-pluginbibliotheek en deze installeren.

Stap 2: Maak een formulier

Nu je de plugin hebt geactiveerd, kun je beginnen met het maken van je formulier. Ga naar de WordPress-beheerder en zoek in het linker zijmenu naar “Contact.” Klik op “Contactformulieren” om naar het beheergedeelte van Contact Form 7 te gaan.

Hier kun je een nieuw formulier maken of een bestaand formulier bewerken. Als je een nieuw formulier wilt maken, klik je op “Nieuw Toevoegen.” Je wordt doorgestuurd naar de formulier editor, waar je de velden en instellingen van je formulier kunt aanpassen.

Stap 3: Ontvang de Shortcode

Na het aanmaken of bewerken van je formulier, zie je bovenaan de pagina een shortcode zoals [contact-form-7 id=”123″ title=”Contactformulier 1″]. Dit is de code die je moet kopiëren en plakken op de pagina, het bericht of de widget waar je het formulier wilt weergeven.

Stap 4: Voeg de shortcode toe aan je pagina, bericht of widget

Nu je de shortcode hebt, kun je het formulier toevoegen aan de gewenste locatie op je website. Dit kan een pagina, een bericht of zelfs een widget zijn.

Voor pagina’s en berichten: Ga naar de bewerkingspagina van de pagina of het bericht waar je het formulier wilt invoegen. Plak eenvoudig de shortcode op de gewenste locatie in de teksteditor en sla de wijzigingen op.
Voor widgets: Als je het formulier wilt weergeven in een widget, ga dan naar “Weergave” en selecteer “Widgets” in het WordPress-dashboard. Sleep een “Tekst”-widget naar de gewenste widgetruimte en plak de shortcode in het tekstvak van de widget. Vergeet niet om de wijzigingen op te slaan.

Stap 5: Bekijk en test je formulier met contact form 7

Nu je het formulier hebt toegevoegd, kun je de pagina of het bericht bekijken om te controleren of het correct wordt weergegeven. Zorg ervoor dat alle velden en instellingen naar behoren werken.

Gefeliciteerd, je hebt met succes een Contact Form 7 formulier toegevoegd aan je WordPress website! Met behulp van shortcodes kun je nu formulieren op verschillende locaties weergeven en interactie aangaan met je bezoekers.

Het belang van het gebruiken van labels in Contact Form 7

Als je gebruikmaakt van Contact Form 7 in WordPress websites voor het maken van contact- en aanvraagformulieren, dan ben je al goed op weg om een effectieve manier te bieden voor bezoekers om met je in contact te komen. Echter, er is één eenvoudige, maar vaak gemiste functie die de gebruikerservaring aanzienlijk kan verbeteren: het toevoegen van labels aan elk veld in je formulier.

Waarom zijn labels zo belangrijk? Laten we deze kwestie eens nader bekijken.

1. Duidelijkheid voor gebruikers

Labels zijn de tekstlabels die naast de invoervelden van een formulier staan en beschrijven wat er in elk veld moet worden ingevuld. Ze bieden essentiële context voor de gebruikers. Wanneer je labels toevoegt, maak je het voor gebruikers veel gemakkelijker om te begrijpen welke informatie je van hen nodig hebt. Dit vermindert verwarring en vergroot de kans dat ze het formulier correct invullen.

2. Toegankelijkheid verbeteren

Een ander belangrijk aspect van het gebruik van labels is dat het de toegankelijkheid van je formulieren verbetert. Mensen met visuele beperkingen vertrouwen vaak op schermlezers om webpagina’s te verkennen. Labels helpen schermlezers om de velden correct te identificeren en voor te lezen aan de gebruiker. Dit maakt je formulieren inclusiever en zorgt ervoor dat iedereen, ongeacht hun capaciteiten, ze effectief kan gebruiken.

3. Professionele uitstraling

Het toevoegen van labels aan je formulieren geeft je website een professionele uitstraling. Het laat zien dat je aandacht besteedt aan de details en streeft naar een positieve gebruikerservaring. Dit kan het vertrouwen van bezoekers vergroten en hen aanmoedigen om je formulieren in te vullen en contact met je op te nemen.

Hoe voeg je labels toe in Contact Form 7?

Het toevoegen van labels in Contact Form 7 is eenvoudig. Volg deze stappen:

Inloggen op WordPress: Ga naar je WordPress dashboard en log in.
Navigeer naar Contact Form 7: Ga naar het gedeelte “Contact” in je WordPress-dashboard en selecteer de gewenste Contact Form 7-formulier om te bewerken.
Bewerk het formulier: Klik op “Bewerken” om het formulier te openen in de editor.
Voeg labels toe: Voor elk invoerveld in het formulier kun je de bijbehorende label toevoegen door deze tussen blokhaken [ ] te plaatsen. Bijvoorbeeld: [naam* label “Uw Naam”]. Hiermee wordt een label “Uw Naam” toegevoegd aan het veld voor de naam van de gebruiker.
Wijzigingen opslaan: Vergeet niet om je wijzigingen op te slaan nadat je labels hebt toegevoegd.

Het gebruik van labels in Contact Form 7 is een kleine inspanning met grote voordelen. Het verhoogt de gebruikersvriendelijkheid, verbetert de toegankelijkheid en geeft je website een professionele uitstraling. Dus, als je op zoek bent naar manieren om de interactie met je bezoekers te verbeteren en ervoor te zorgen dat ze de informatie correct invullen, vergeet dan niet om labels toe te voegen aan je formulieren. Het zal een wereld van verschil maken voor de gebruikerservaring op je WordPress-website.

Mocht je geïnteresseerd zijn in formulier bekijk dan zeker de Gravity Forms mogelijkheden.

Hoe je Verplichte Velden Toevoegt aan je Contact Form 7 Formulier

Contact Form 7 is een veelgebruikte WordPress-plugin die het mogelijk maakt om eenvoudig contactformulieren op je website te maken en beheren. Een van de belangrijkste aspecten bij het ontwerpen van formulieren is ervoor te zorgen dat je de benodigde informatie van je bezoekers verzamelt. Dit kan worden bereikt door specifieke velden als verplicht te markeren. In dit artikel laten we je zien hoe je verplichte velden kunt toevoegen aan je Contact Form 7 formulier.

Waarom Verplichte Velden?

Verplichte velden in een contactformulier dwingen gebruikers om essentiële informatie in te vullen voordat ze het formulier kunnen verzenden. Dit is belangrijk om ervoor te zorgen dat je alle benodigde gegevens verzamelt, zoals naam, e-mailadres, onderwerp, of andere informatie die relevant is voor je website of bedrijf. Door deze gegevens te verzamelen, kun je efficiënter reageren op vragen of verzoeken van bezoekers.

Stappen om Verplichte Velden Toe te Voegen in Contact Form 7

Volg deze eenvoudige stappen om verplichte velden aan je Contact Form 7 formulier toe te voegen:

1. Installeer en activeer Contact Form 7

Als je Contact Form 7 nog niet hebt geïnstalleerd, kun je dit doen via het WordPress-dashboard. Ga naar “Plugins” en zoek naar “Contact Form 7.” Klik op “Installeren” en vervolgens op “Activeren.”

2. Maak of Bewerk je Formulier

Ga naar het “Contact” menu in je WordPress-dashboard en klik op “Contactformulieren.” Hier kun je een bestaand formulier bewerken of een nieuw formulier maken.

3. Voeg Velden Toe aan je Formulier

Je kunt verschillende veldtypen toevoegen aan je formulier, zoals tekstvelden, e-mailvelden, keuzelijsten en meer. Sleep de gewenste velden naar het formuliergedeelte.

4. Markeer Velden als Verplicht

Om een veld als verplicht te markeren, voeg je eenvoudigweg het volgende toe aan het veldlabel: *. Bijvoorbeeld, als je het e-mailveld verplicht wilt maken, verander dan het label van “E-mail” naar “E-mail*.”

5. Configureer Extra Instellingen (Optioneel)

Je kunt extra instellingen configureren, zoals validatiepatronen of aangepaste foutmeldingen, afhankelijk van je behoeften. Deze stappen zijn optioneel, maar kunnen handig zijn om ervoor te zorgen dat de ingediende informatie correct is.

6. Voeg het Formulier Toe aan een Pagina of Bericht

Nadat je je formulier hebt gemaakt en aangepast, kun je het toevoegen aan een pagina of bericht op je website. Kopieer de shortcode van je formulier en plak deze in de inhoud van de pagina of het bericht waar je het formulier wilt weergeven.

7. Test je Formulier

Het is altijd een goed idee om je formulier te testen om ervoor te zorgen dat alle verplichte velden correct werken en dat de juiste validatie plaatsvindt. Vul het formulier in en controleer of de vereiste velden niet kunnen worden verzonden zonder dat ze zijn ingevuld.

Conclusie

Het markeren van velden als verplicht in Contact Form 7 is een eenvoudige maar effectieve manier om ervoor te zorgen dat je de nodige informatie van je websitebezoekers verzamelt. Door deze gegevens te verzamelen, kun je beter reageren op vragen, verzoeken en feedback, en een betere gebruikerservaring bieden. Neem de tijd om je formulieren aan te passen en te optimaliseren voor de specifieke behoeften van je website en bedrijf.

Integraties van Contact Form 7

Contact Form 7 is een veelgebruikte WordPress plugin die de creatie en beheer van formulieren op je website vereenvoudigt. Wat deze plugin echt krachtig maakt, is de brede reeks integraties die het biedt met verschillende tools en services. Of je nu je e-maillijst wilt uitbreiden, spam wilt bestrijden, betalingen wilt ontvangen of klantinformatie wilt synchroniseren met je CRM, Contact Form 7 heeft integraties die je kunnen helpen bij al deze taken en meer. Laten we eens kijken naar enkele van de meest populaire integraties die Contact Form 7 te bieden heeft:

1. Mailchimp: eenvoudig abonnees toevoegen aan je lijst

Wil je je e-maillijst laten groeien? Met het Mailchimp-add-on kun je moeiteloos abonnees aan je Mailchimp-lijst toevoegen wanneer ze een formulier op je website invullen. Dit zorgt ervoor dat je altijd in contact blijft met je publiek en hen op de hoogte kunt houden van je laatste nieuws en aanbiedingen.

Contact Form 7 Extension For Mailchimp

2. reCAPTCHA: bescherm je formulieren tegen spambots

De plaag van spambots kan elk formulier op je website teisteren. Met Contact Form 7 kun je eenvoudig reCAPTCHA toevoegen aan je formulieren om ongewenste inzendingen te voorkomen. Hierdoor kunnen alleen echte gebruikers je formulieren invullen, wat de kwaliteit van je gegevens verbetert.

Meer over reCAPTCHA

3. PayPal: naadloze betalingen ontvangen

Als je een e-commerce website hebt, is de PayPal-add-on een gamechanger. Je kunt nu betalingen ontvangen via Contact Form 7. Klanten kunnen eenvoudig via PayPal betalen en worden vervolgens veilig teruggeleid naar je website, wat het winkelen voor hen en het ontvangen van betalingen voor jou vereenvoudigt.

Contact Form 7 – PayPal & Stripe Add-on

4. Salesforce: synchroniseer leads en klantinformatie

De Salesforce-add-on maakt het mogelijk om Contact Form 7 formulieren naadloos te integreren met Salesforce. Hierdoor kun je leads en klantinformatie direct in Salesforce opslaan, waardoor je verkoop- en marketingteams toegang hebben tot up-to-date gegevens en naadloos kunnen samenwerken.

Integration for Salesforce and Contact Form 7, WPForms, Elementor, Ninja Forms

5. Google Analytics: volg conversies en gebeurtenissen

Met de Google Analytics-add-on kun je precies bijhouden wat er gebeurt wanneer iemand een formulier indient. Hiermee kun je conversies en gebeurtenissen nauwlettend volgen in Google Analytics, wat essentieel is om inzicht te krijgen in het gedrag van je gebruikers en de effectiviteit van je formulieren.

Contact Form 7 Google Analytics

6. Zapier: koppel met meer dan 2.000 apps

Zapier opent een wereld van mogelijkheden door integraties met meer dan 2.000 apps aan te bieden, waaronder Salesforce, Mailchimp, Slack, Trello en nog veel meer. Met Zapier kun je Contact Form 7 verbinden met deze apps en gegevens automatisch overzetten tussen verschillende services, waardoor je workflow geoptimaliseerd wordt en handmatig werk wordt verminderd.

Meer over deze koppeling

7. SMS: directe communicatie via tekstberichten

De SMS-add-on is een krachtig hulpmiddel om onmiddellijk te communiceren met gebruikers die je formulieren invullen. Je kunt een sms-bericht verzenden naar een mobiel nummer wanneer iemand je Contact Form 7 formulier indient. Dit is handig voor snelle follow-ups of om belangrijke informatie direct te delen.

Het is belangrijk op te merken dat sommige van deze integraties aanvullende instellingen en add-ons vereisen om optimaal te functioneren. Daarom is het raadzaam om altijd de documentatie en handleidingen voor de specifieke integratie die je wilt gebruiken te raadplegen. Met Contact Form 7 en zijn diverse integraties kun je je websitefunctionaliteit naar een hoger niveau tillen en je interactie met je gebruikers verbeteren. Ga aan de slag en ontdek hoe deze integraties je website-ervaring kunnen verbeteren en je workflow kunnen stroomlijnen.

Wat zijn Avada demo’s en hoe kunnen ze je website naar een hoger niveau tillen?

Wanneer je begint met WordPress webdesign, kan de initiële opstart vaak overweldigend zijn. Er zijn tal van aspecten om rekening mee te houden, van het ontwerp en de lay-out tot de functionaliteit en gebruiksvriendelijkheid. Avada, een van de populairste thema’s voor WordPress, erkent deze uitdagingen en biedt een oplossing in de vorm van voorgebouwde demo’s.

Wat zijn Avada demo’s precies?

Avada demo’s zijn in essentie kant-en-klare website-ontwerpen die bij het thema worden geleverd. Ze zijn ontworpen om de gebruiker een voorsprong te geven bij het opzetten van hun website. In plaats van vanaf nul te beginnen, kun je een demo kiezen die past bij de aard van je project en deze vervolgens aanpassen.

Deze demo’s variëren in stijl en doel. Van moderne zakelijke lay-outs tot creatieve portfolio’s en zelfs e-commerce winkels – er is een demo voor bijna elke denkbare niche of industrie.

Wat zijn de voordelen van het gebruik van Avada demo’s?

Tijdsbesparing: Het bouwen van een website vanaf de grond kan veel tijd in beslag nemen, vooral als je nieuw bent in het vakgebied. Door te starten met een demo, kun je veel van de initiële opbouw overslaan en je concentreren op de aanpassing.
Professioneel ontwerp: Avada’s team van ontwerpers heeft ervoor gezorgd dat elk demo-ontwerp er professioneel en modern uitziet. Dit geeft je een solide basis om mee te werken.
Flexibiliteit: Hoewel de demo’s voorgebouwd zijn, bieden ze nog steeds veel flexibiliteit. Je kunt elementen naar wens toevoegen, verwijderen of wijzigen, zodat je eindproduct echt uniek is.

Of je nu een doorgewinterde webontwikkelaar bent of net begint, Avada demo’s kunnen een goede hulpbron zijn. Ze bieden niet alleen een snelle start, maar verzekeren je ook van een kwalitatief hoogstaand ontwerp dat je naar eigen inzicht kunt aanpassen. Met Avada kun je je concentreren op wat echt belangrijk is: je content en je merk.

Alles wat je moet weten over de Avada Fusion Builder

Als je ooit hebt gewerkt met het Avada thema voor WordPress, heb je waarschijnlijk al kennis gemaakt met de Avada Fusion Builder. Maar wat is het precies en waarom is het zo populair? Laten we dieper ingaan op deze visuele paginabuilder.

Wat is de Avada Fusion Builder?

De Avada Fusion Builder is een innovatieve, visuele paginabuilder die exclusief is ontworpen voor het Avada thema, een van de best verkopende WordPress-thema’s op de markt. De tool transformeert het proces van website-ontwikkeling van een technische klus naar een creatieve ervaring.

Hoe werkt het?

Het krachtige aspect van de Avada Fusion Builder is de intuïtieve drag-and-drop interface. Dit betekent dat je elementen kunt selecteren, verslepen en op je pagina kunt plaatsen, allemaal zonder een regel code te schrijven.

Of je nu een beginner bent in website-ontwerp of een doorgewinterde professional, deze tool maakt het gemakkelijk om aangepaste pagina’s te maken. Van eenvoudige tekstblokken en afbeeldingsgalerijen tot geavanceerde schuifregelaars en interactieve elementen, de Fusion Builder biedt een breed scala aan opties.

Wat zijn de voordelen?

Geen codeerkennis vereist: Je hoeft geen code te schrijven of te kennen. Dit maakt het ideaal voor beginners of voor diegenen die snel een pagina willen samenstellen zonder te verdwalen in technische details.
Flexibiliteit: Probeer verschillende lay-outs, voeg secties toe of verwijder ze, en speel met de designs totdat je de gewenste look en feel bereikt.
Tijdbesparend: Dankzij de directe visuele feedback kun je snel wijzigingen aanbrengen en direct het resultaat zien, wat het ontwerpproces aanzienlijk versnelt.
Integratie: De Avada Fusion Builder is naadloos geïntegreerd met het Avada thema, waardoor je zeker kunt zijn van compatibiliteit en stabiliteit.

Conclusie

De Avada Fusion Builder heeft het proces van webdesign vereenvoudigd en gedemocratiseerd. Of je nu een absolute beginner bent of een ervaren webdesigner, deze tool biedt de mogelijkheid om prachtige, functionele pagina’s te creëren met gemak en efficiëntie. Met zijn intuïtieve interface en uitgebreide functieset is het geen wonder dat het een van de meest gekozen paginabuilders is binnen de WordPress-community.

Monitoren van webprestaties met de Performance Observer API

Webprestaties zijn cruciaal voor een goede gebruikerservaring op het internet. Het snel laden van webpagina’s is niet alleen van invloed op de tevredenheid van de gebruiker, maar heeft ook invloed op SEO-ranking en conversieratio’s.

Een van de manieren waarop website ontwikkelaars webprestaties kunnen bewaken en verbeteren, is door gebruik te maken van de Performance Observer API.

Wat is de Performance Observer API?

De Performance Observer API is een browser-API waarmee ontwikkelaars de prestaties van een webpagina kunnen bewaken en meten. Het biedt gedetailleerde inzichten in hoe een webpagina presteert, inclusief informatie over laadtijden, bronnen en gebeurtenissen die van invloed zijn op de gebruikerservaring. Met deze API kunnen ontwikkelaars problemen met de prestaties van hun website identificeren en optimaliseren.

Hoe de Performance Observer API te gebruiken

Om de Performance Observer API te gebruiken, kunnen ontwikkelaars de onderstaande code in hun webpagina’s implementeren. Deze code opent de console tab in de inspector tools van de Chrome browser en plakt de code om prestatiegegevens vast te leggen:

try {
  // Create the performance observer.
  const po = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      // Log the entry and all associated details.
      console.table(entry.toJSON());
    }
  });
  // Start listening for `longtask` entries to be dispatched.
  po.observe({type: 'longtask', buffered: true});
} catch (e) {
  console.log(`The browser doesn't support this API`)
}

Wat deze code doet:

We maken een nieuwe PerformanceObserver en definiëren een callback-functie om de prestatiegegevens te verwerken.
We observeren het type ‘longtask’, wat gebeurtenissen zijn die langere taken vertegenwoordigen die de responsiviteit van de pagina kunnen beïnvloeden. Met ‘buffered: true’ halen we ook de eerdere gegevens op.
In de callback-functie gebruiken we console.table om de prestatiegegevens in een goed georganiseerde tabel weer te geven.

Wat kun je met deze gegevens doen?

Met de gegevens die je krijgt van de Performance Observer API, kun je verschillende acties ondernemen:

Identificeer bottlenecks: Je kunt zien welke taken de prestaties van je website vertragen en deze optimaliseren.
Controleer laadtijden: Je kunt de laadtijden van je webpagina analyseren en proberen ze te verkorten.
Optimaliseer bronnen: Je kunt zien welke bronnen, zoals scripts of afbeeldingen, de pagina vertragen en deze optimaliseren of verkleinen.
Test wijzigingen: Je kunt wijzigingen in je code implementeren en de impact op de prestaties volgen om te zien of ze verbeteren.
Proactieve monitoring: Je kunt de prestaties van je website proactief in de gaten houden en problemen oplossen voordat gebruikers ze opmerken.

Kortom, de Performance Observer API is een krachtig hulpmiddel voor webontwikkelaars om de prestaties van hun websites te verbeteren en een naadloze gebruikerservaring te bieden.

Het monitoren van webprestaties essentieel voor het bouwen van snelle en responsieve webpagina’s. Met de Performance Observer API kunnen ontwikkelaars diepgaande inzichten krijgen in de prestaties van hun websites en proactief optimalisaties doorvoeren om de gebruikerservaring te verbeteren. Door de bovenstaande code in hun projecten te implementeren, kunnen ontwikkelaars een belangrijke stap zetten in de richting van het leveren van snellere en efficiëntere webpagina’s voor hun gebruikers.

Snel overzicht laadtijd scripts in Google Chrome

Open met de inspector tools van je Chrome browser de console tab en plak de onderstaande code.

function createUniqueLists(firstParty, thirdParty) {
  function getUniqueListBy(arr, key) {
    return [...new Map(arr.map((item) => [item[key], item])).values()];
  }

  const firstPartyList = getUniqueListBy(firstParty, ["name"]);
  const thirdPartyList = getUniqueListBy(thirdParty, ["name"]);
  
  return { firstPartyList, thirdPartyList };

}

const { firstPartyList, thirdPartyList } = createUniqueLists(
  firstParty,
  thirdParty
);

function calculateTimings(party, type) {
  const partyChoice = party === "first" ? firstParty : thirdParty;

  const timingChoices = {
    DNS_TIME: ["domainLookupEnd", "domainLookupStart"],
    TCP_HANDSHAKE: ["connectEnd", "connectStart"],
    RESPONSE_TIME: ["responseEnd", "responseStart"],
    SECURE_CONNECTION_TIME: ["connectEnd", "secureConnectionStart", 0],
    FETCH_UNTIL_RESPONSE: ["responseEnd", "fetchStart", 0],
    REQ_START_UNTIL_RES_END: ["responseEnd", "requestStart", 0],
    START_UNTIL_RES_END: ["responseEnd", "startTime", 0],
    REDIRECT_TIME: ["redirectEnd", "redirectStart"],
  };

  function handleChoices(timingEnd, timingStart, num) {
    if (!num) {
      return timingEnd - timingStart;
    }

    if (timingStart > 0) {
      return timingEnd - timingStart;
    }

    return 0;
  }

  const timings = partyChoice.map((script) => {
    const [timingEnd, timingStart, num] = timingChoices[type];
    const endValue = script[timingEnd];
    const startValue = script[timingStart];
    return {
      name: script.name,
      [type]: handleChoices(endValue, startValue, num),
    };
  });

  return timings;
}

// Available Options
const timingOptions = [
  "DNS_TIME",
  "TCP_HANDSHAKE",
  "RESPONSE_TIME",
  "SECURE_CONNECTION_TIME",
  "FETCH_UNTIL_RESPONSE",
  "REQ_START_UNTIL_RES_END",
  "START_UNTIL_RES_END",
  "REDIRECT_TIME",
];

// run em all!
// https://developer.mozilla.org/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API#timing_resource_loading_phases

timingOptions.forEach((timing) => {
  console.groupCollapsed(`FIRST PARTY: ${timing}`);
  console.table(calculateTimings("first", timing));
  console.groupEnd();
  console.groupCollapsed(`THIRD PARTY: ${timing}`);
  console.table(calculateTimings("third", timing));
  console.groupEnd();
});

// choose your battle - arg1 is string either "first" or "third", arg2 is string timing option listed above.

console.table(calculateTimings("first", "REQ_START_UNTIL_RES_END"));

Scripts analyseren met de browser Inspector Tools Console tab

Browsers bieden een scala aan ontwikkeltools waarmee ontwikkelaars dieper in websites kunnen duiken om te begrijpen hoe deze zijn opgebouwd en hoe ze presteren. Een van deze krachtige tools is de “Console” tab in de Inspector Tools, waarmee ontwikkelaars JavaScript-code kunnen uitvoeren, logboeken kunnen bekijken en zelfs scripts kunnen analyseren die op een webpagina worden geladen. In dit artikel zullen we bekijken hoe je de Inspector Tools Console Tab kunt gebruiken om scripts op een webpagina te analyseren en te categoriseren als eerste of derde partij.

Stap 1: open de Inspector Tools Console tab

Voordat we beginnen met het analyseren van scripts, moeten we eerst de Inspector Tools Console Tab openen. Dit kan meestal worden gedaan door met de rechtermuisknop op een webpagina te klikken en “Inspecteren” te selecteren of door de sneltoetsen Ctrl + Shift + I (Windows/Linux) of Cmd + Option + I (Mac) te gebruiken.

Stap 2: plak de code

Nu we de Inspector Tools Console Tab hebben geopend, kunnen we de benodigde JavaScript-code invoeren. In ons voorbeeld plakken we de volgende code:

// ex: katespade.com - list firsty party subdomains in HOSTS array
const HOSTS = ["assets.katespade.com"];

function getScriptInfo() {
  const resourceListEntries = performance.getEntriesByType("resource");
  // set for first party scripts
  const first = [];
  // set for third party scripts
  const third = [];

  resourceListEntries.forEach((resource) => {
    // check for initiator type
    const value = "initiatorType" in resource;
    if (value) {
      if (resource.initiatorType === "script") {
        const { host } = new URL(resource.name);
        // check if resource url host matches location.host = first party script
        if (host === location.host || HOSTS.includes(host)) {
          const json = resource.toJSON();
          first.push({ ...json, type: "First Party" });
        } else {
          // add to third party script
          const json = resource.toJSON();
          third.push({ ...json, type: "Third Party" });
        }
      }
    }
  });

  const scripts = {
    firstParty: [{ name: "no data" }],
    thirdParty: [{ name: "no data" }],
  };

  if (first.length) {
    scripts.firstParty = first;
  }

  if (third.length) {
    scripts.thirdParty = third;
  }

  return scripts;
}

const { firstParty, thirdParty } = getScriptInfo();

console.groupCollapsed("FIRST PARTY SCRIPTS");
console.table(firstParty);
console.groupEnd();
console.groupCollapsed("THIRD PARTY SCRIPTS");
console.table(thirdParty);
console.groupEnd();

/*
Choose which properties to display
https://developer.mozilla.org/en-US/docs/Web/API/console/table

console.groupCollapsed("FIRST PARTY SCRIPTS");
console.table(firstParty, ["name", "nextHopProtocol"]);
console.groupEnd();
console.groupCollapsed("THIRD PARTY SCRIPTS", ["name", "nextHopProtocol"]);
console.table(thirdParty);
console.groupEnd();
*/

Stap 3: voer de code uit

Na het plakken van de code in de Console Tab, druk je op Enter om de code uit te voeren.

Stap 4: analyseer de resultaten

De code zal de resultaten van de scriptanalyse weergeven in twee groepen: “FIRST PARTY SCRIPTS” en “THIRD PARTY SCRIPTS”.

“FIRST PARTY SCRIPTS” bevat scripts die afkomstig zijn van hetzelfde domein als de huidige webpagina of domeinen die zijn opgenomen in de HOSTS array.
“THIRD PARTY SCRIPTS” bevat scripts die afkomstig zijn van externe domeinen, wat aangeeft dat ze door derden worden gehost.

Je kunt de resultaten verder aanpassen door te kiezen welke eigenschappen je wilt weergeven in de tabel. Dit kan handig zijn om specifieke informatie over de scripts te bekijken.

In dit artikel hebben we geleerd hoe we de Inspector Tools Console Tab kunnen gebruiken om scripts op een webpagina te analyseren en te categoriseren als eerste of derde partij. Dit kan nuttig zijn voor ontwikkelaars om inzicht te krijgen in welke scripts er op een webpagina worden geladen en waar ze vandaan komen. Hierdoor kunnen ontwikkelaars de prestaties en beveiliging van hun websites verbeteren.