Hoe JavaScript-fragmenten en website-codes op uw website te installeren - DeLaatbusiness

Hoe JavaScript-fragmenten en website-codes op uw website te installeren

9 min


128
6 gratis internet marketing ebooks, klik hier voor download

Er zijn talloze geweldige tools beschikbaar om u te helpen de website-ervaring die u biedt te verbeteren, uw online bedrijf uit te breiden en betere verbindingen met uw klanten te maken.

Hoesten … zoals Crazy Egg .. hoewel  🙂

En veel van deze tools zijn ook gratis!

Maar je bent geen webontwikkelaar. Hoe de heck doe je deze tools te installeren in de eerste plaats?

Ironisch genoeg is het voor de bedrijven die deze tools leveren een van de grootste struikelblokken voor hun eigen groei dat hun gebruikers hun code installeren.

Welnu, vandaag ga ik proberen dit probleem op te lossen voor alle betrokkenen. Ik ga een paar van de meest voorkomende manieren bespreken waarop mensen code op hun website zetten. In dit artikel ga ik over het installeren van website-code / JavaScript-fragmenten voor:

  • Websites “mogelijk gemaakt door” WordPress (het inhoudbeheersysteem, NIET WordPress.com-sites)
  • Hand-gecodeerde websites (we zullen bespreken hoe scripts en fragmenten kunnen worden geïnstalleerd met behulp van old school FTP)
  • Squarespace- websites
  • Shopify websites

Voor degenen onder u op een Etsy- of Tumblr- site zijn deze platforms nogal … nou … het zijn geen echt volledige website-oplossingen. Etsy is echt een marktplaats en Tumblr is een mix tussen een sociale mediasite en een blogplatform.

Eindelijk zal ik aan het einde een beetje over Wix- websites praten . Grotendeels, staan ​​zij u niet toe om om het even welke oude websitecode of JavaScript-snippets te installeren, maar zij hebben een paar integratie voor diverse websitediensten.

Waarover spreekt deze websitecode of -fragment?

Ja, laten we het hebben over de “code” die u eerst probeert te installeren.

Er zijn dus veel webmarketingtools nodig om hun code op uw website te installeren. Crazy Egg werkt op dezelfde manier. Laten we eens kijken naar wat Crazy Egg-code.

Zodra u zich aanmeldt bij uw Crazy Egg-dashboard, ziet u een link links onder ‘Mijn code’.

waar je een gek eiercodefragment krijgt

Klik op die link en u wordt naar een pagina gebracht waar uw Crazy Egg-trackingcode handig in een mooie lichtblauwe doos voor u wordt gepresenteerd.

Crazy Egg-webfragment

Wat u gaat doen, ongeacht of het Crazy Egg-trackingcode of een andere trackingcode is, plakt die code in elke webpagina van uw website.

Omdat deze kleine operatie misschien de eerste keer voor jou is of je problemen hebt om het te doen, zullen we ons verdiepen in wat er nodig is om dit voor elkaar te krijgen.

Hoe code op een website te zetten die wordt aangedreven door WordPress

Je hebt geluk. Er is een plug-in die deze taak vrij eenvoudig maakt. Het heet Tracking Code Manager .

Log in op uw website. Als u WordPress gebruikt, wordt u naar uw dashboard geleid. Klik op ‘Plug-ins’.

klik op plug-ins

Zodra u bij uw Plugins-scherm bent aangekomen, klikt u op ‘Nieuw toevoegen’.

voeg een nieuwe plugin toe

Zoek in het zoekvak aan de rechterkant naar ‘Tracking Code Manager’ en druk vervolgens op ‘Nu installeren’.

zoek naar trackingcode manager

Als het klaar is met installeren, zorg er dan voor dat je de plug-in activeert . Klik op “Instellingen”.

WordPress Tracking Code Manager-instellingen

Klik op “Nieuwe trackingcode toevoegen”.

voeg nieuwe trackingcode toe

… En voeg uw code in! Klik op Opslaan .

voeg code in de plug-in voor trackingcode

Als u om de een of andere reden de plugin Tracking Code Manager niet wilt gebruiken (of niet kunt), kunt u de trackingcode altijd handmatig in het header.php-bestand van uw WordPress-thema plaatsen (daar komen we binnenkort op terug) ).

Hoe code op een website die wordt aangedreven door WordPress.com

Er is altijd veel verwarring geweest tussen een website die wordt aangedreven door WordPress en een WordPress.com-website. Dat komt omdat ze twee verschillende dingen zijn!

Ik geef WordPress (of Auttomatic) een beetje de schuld voor het op dezelfde manier promoten van deze twee verschillende services. Maar laat me het uitleggen:

  • Een website die wordt aangedreven door WordPress is een website waarop WordPress content management software is geïnstalleerd op uw eigen webserver. Dat betekent dat je hebt betaald voor een domeinnaam (mijnnaam.com) EN je betaalt voor webhosting om je websitebestanden te hosten. In dit geval zou u of iemand anders de WordPress-software op uw webserver (webhost) hebben geïnstalleerd en deze mogelijk op uw huidige website hebben aangepast.
  • Een WordPress.com-website is meestal gratis. Je zou zijn gegaan naar WordPress.com en aangemeld voor uw website. U betaalt niet voor webhostingkosten en u bent begonnen met een URL zoals: myname.wordpress.com. Van daaruit hebt u mogelijk de nodige stappen ondernomen om uw eigen aangepaste domeinnaam, enz. (Mijnnaam.com) te krijgen.

Als u een WordPress.com-website gebruikt, bent u enigszins beperkt door welke website-code en JavaScript u op uw website kunt installeren. Dit komt omdat ze een beveiligingsprotocol hebben waaraan ze zich moeten houden en ze kunnen niet toestaan ​​dat gebruikers oude code in hun platform plakken. MySpace is blijkbaar daarom afgebroken!

WordPress.com heeft echter verschillende upgrades voor bedrijfsplannen. Ze hebben bijvoorbeeld een integratie met Google Analytics en bieden manieren om uw website aan te passen, zoals het toevoegen van socialemediaknoppen . Van wat ik kan vertellen, is het verkrijgen van een gratis WordPress.com-account voor het gebruik van verschillende websitediensten en -tools vrij beperkt. Als er iets is, lijkt het erop dat u moet upgraden naar een bedrijfsplanom uw mogelijkheden te ontgrendelen om dit te doen.

Hoe Website Codes en JavaScript-fragmenten op Hand-Coded Websites met behulp van FTP te installeren

Terug naar de oude school.

Tot op de dag van vandaag zijn veel websites “met de hand gecodeerd”, wat betekent dat ze van nul zijn gemaakt en geen content managementsysteem gebruiken. Als uw website in deze categorie valt, moet u naar uw site “FTP” om wijzigingen aan te brengen (of een repository voor versiebeheer te gebruiken).

FTP staat voor “File Transfer Protocol.” U kunt gratis FTP-programma’s zoals FileZilla downloaden om u te laten “FTP” naar uw website.

Kortom, met een FTP-programma kunt u websitebestanden en afbeeldingen slepen en neerzetten op uw webserver waar uw website wordt gehost. U kunt bestanden toevoegen, bestanden vervangen, bestanden verwijderen en zelfs de namen van bestanden wijzigen met een FTP-programma.

Ik beloof je – na 20 minuten knoeien met een FTP-programma, heb je het gelikt. Het lastigste deel voor de meeste mensen is gewoon verbinding maken met hun webserver.

Meestal komen mensen vast te zitten met het correct krijgen van hun hostnaam en gebruikersnaam. Of ze kennen hun FTP-wachtwoord niet.

De oplossing: bel uw webhost . Het kan een uur duren, maar ze zullen je er doorheen leiden. Het kan de moeite waard zijn om tijdens deze oproep uw scherm op te nemen. Of neem tenminste een paar goede aantekeningen.

Als je eenmaal binnen bent, is een van de eerste dingen die je wilt doen, een back-up maken van je website. Het is gewoon een slim idee. Als je later een boo-boo maakt, heb je tenminste een back-up van al je bestanden.

U kunt dit doen door ALLE uw bestanden VAN uw webserver naar uw computer te slepen (kopiëren). Meestal maak ik een map op mijn bureaublad genaamd “My Website Backup juni 2017.” Ik sleep ALLE website-bestanden naar die map. Soms maak ik zelfs een back-up van die map of maak ik er een .zip-bestand van. Yep – dubbele back-up.

Als u een FTP-programma zoals FileZilla gebruikt, krijgt u meestal een interface met twee vensters. Aan de linkerkant worden meestal de bestanden op uw computer weergegeven en in het rechterdeelvenster worden de bestanden op uw webserver weergegeven.

hoe FTP-bestanden te maken

Door bestanden heen en weer te slepen, kunt u bestanden van het ene systeem naar het andere vervangen.

Een woord van waarschuwing

Bestanden vervangen kan enigszins gevaarlijk zijn. Als een bestand nieuwer of ouder is dan het andere bestand op uw webserver of computer en u exact hetzelfde bestand op het andere systeem vervangt, verliest u een versie van dat bestand.

In de meeste gevallen is dat precies wat u wilt doen. U brengt wijzigingen aan in uw website, dus u hebt uiteraard een nieuwere bestandsversie die live moet gaan. Maar dat betekent dat u niet terug kunt naar een vorige versie als u een fout heeft gemaakt. Daarom is het een goed idee om al uw webbestanden te back-uppen voordat u wijzigingen aanbrengt .

Als u een fout maakt en u hebt back-upbestanden, kunt u gewoon uw back-upmap openen en het originele bestand plaatsen waar u het nodig hebt.

Nu … aan het installeren van website-codes

Vanuit mijn ervaring hebben de meeste mensen een van de drie soorten websites:

  1. Een website die het WordPress content management-systeem gebruikt
  2. Een website die iets soortgelijks als WordPress gebruikt
  3. Een handgecodeerde website

Als u WordPress of een contentbeheersysteem gebruikt, hoeft u alleen het header.php-bestand of een bestand met de naam ‘header’ of ‘head’ te zoeken. Gewoonlijk is dat het bestand dat de <head> -sectie van ALL dicteert uw webpagina’s. Dit is waar de meeste website-codes en -fragmenten moeten komen.

headerbestand

Je gaat de website-code (of fragment) in je headerbestand plakken en deze is meestal actief op ALLE webpagina’s. Eén bestand om ze allemaal te regeren!

Gebruik een gratis programma zoals Sublime Text om dit bestand te openen. Open het bestand dat op uw computer staat (niet hetzelfde bestand dat op uw webserver staat).

Meestal klik ik met de rechtermuisknop op het bestand en open ik met Sublime Text. Wat er zal verschijnen is een prachtige regenboog van betoverend proza ​​met kleurcode.

Sommigen van jullie kunnen bang worden. Maar doe het niet. Het zal je geen pijn doen. Laten we het snel ontcijferen.

Alle webpagina’s kunnen worden onderverdeeld in twee eenvoudige secties. Het hoofd en het lichaam. Het hoofd wordt aangeduid met HTML-code <head> en </ head>. Het lichaam wordt aangeduid door <body> en </ body>.

het hoofd en de inhoud van een HTML-bestand

Het merendeel van de “dingen” waarmee uw webpagina werkt en tekst en afbeeldingen weergeeft, valt tussen deze twee secties. U kunt meestal een zoekopdracht op de pagina uitvoeren om deze HTML-tags te vinden.

Als de websitecode of het JavaScript-fragment nodig is om naar de <head> van uw website te gaan … nou ik wed dat u een goed idee hebt waar die code moet gaan.

voeg hier code in

Nadat u uw code of fragment hebt ingevoegd, slaat u uw bestand op en uploadt u het naar uw webserver om het nieuwe hoofdbestand live te maken.

Als uw website met de hand is gecodeerd en er lijkt geen hoofd- of headerbestand te zijn, moet u mogelijk uw websitecode in elke webpagina plakken. Soms is dit geen big deal. Als uw website slechts 5 pagina’s heeft, hoeft u de code maar 5 keer te plakken.

voorbeeld website lijst met bestanden

Hierboven ziet u een hypothetische HTML-website die bestaat uit vier HTML-bestanden. In dit geval zou u al deze bestanden openen en uw websitecode (of fragment) in de <head> van elk bestand stoppen. Ten slotte zou u ze opslaan en uploaden naar uw webserver, ter vervanging van de oudere bestanden met deze nieuwere, bijgewerkte bestanden.

Hoe weet ik of het werkte?

Doorgaans zal de website-code (of -fragment) die u installeert een communicatielijn instellen met de service die u gebruikt. Bijna alle services laten je weten of je code werkt of niet. Als u bijvoorbeeld de trackingcode van Google Analytics installeert, wanneer u zich aanmeldt bij uw Google Analytics-account, zal het u vertellen of uw code correct is geïnstalleerd of niet.

Hoe code op een Squarespace-site te zetten

Voor degenen onder u die Squarespace gebruiken voor uw website, maken ze het invoegen van website-codes en JavaScript-fragmenten vrij eenvoudig. U kunt ” code-injectie ” gebruiken om code in te voegen.

Klik in je Beginmenu op Instellingen> Geavanceerd> Code-injectie. U kunt code toevoegen aan uw <head> of uw voettekst van uw website. Dit is de verspilling door screenshots:

squarespace home menu

Begin door op “INSTELLINGEN” te klikken.

Blader een beetje naar beneden en klik vervolgens op “Geavanceerd”.

klik op Squarespace-code-injectie

Klik vervolgens op ‘Code-injectie’.

klik op code-injectie

Meestal wilt u uw website-code invoegen in de <head> van uw webpagina’s. Ze hebben ook een optie om code in je voettekst te plaatsen als je dat moet doen.

Klik tot slot op “OPSLAAN”.

Hoe code op een Shopify-site te plaatsen

Klik vanuit uw Shopify-beheerder op ‘Online winkel’. Selecteer vervolgens ‘Thema’s’.

Shopify-thema's

Klik op het vak “Acties” om het vervolgkeuzemenu te openen. Selecteer vervolgens “HTML / CSS bewerken”.

Selecteer ‘Fragmenten’.

Klik op “Fragmenten” om het dialoogvenster “Een nieuw fragment toevoegen” te openen.

Klik op ‘Een nieuw fragment toevoegen’. U krijgt een formulier voor het toevoegen van een nieuw fragment.

Geef uw fragment een naam en klik op de knop ‘Fragment maken’.

Voer de code voor uw fragment in het gebied in voor “tracking snippet.liquid.” Klik op “Opslaan” en u bent klaar om te beginnen!

Hoe code op een Wix-website te plaatsen

Wix is ​​in snel tempo een populaire maker van de website aan het worden. Het lijkt op WordPress.com omdat je vrij beperkt bent door welke codes en fragmenten je kunt installeren. Het is eigenlijk vastgelopen net als WordPress.com.

Ze hebben echter wel een Wix App Market waar je verschillende marketing-, sociale media- en analytische oplossingen op je site kunt krijgen. U kunt hier ook stemmen op de broodnodige oplossingen .

Hopelijk heeft dit je geholpen

Als u een ander systeem voor uw website gebruikt, controleert u of deze plug-ins, extensies of add-ons bieden om u te helpen de code te verkrijgen die u nodig hebt op uw site. Vaak hebben websiteproviders integraties voor de services die u nodig hebt. Doe gewoon wat graafwerk en wees niet bang om hun ondersteuningscentrum te bellen of e-mailen.


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format