Op welke link wordt gedrukt?

[rob1]

Goede Paas morgen allemaal,

Op mijn wel site www.chili-chile.nl heb ik een link pagina. Mijn idee is om de link pagina regelmatig te verversen met eventuele nieuwe links naar andere sites.
Maar ik weet niet hoe vaak er op welke link gedrukt wordt. Ik het dus een manier om het aanklikken van een link te volgen?

Op mijn link site staat bv een link als volgt: Site over het paasfeest. De tekst geen ik een hyperlink www.paasfeest.nl. (dit dus geheel als voorbeeld)
Als iemand hier op drukt wil ik dat graag weten. Wordt er veel gebruik van gemaakt dan laat ik de link staan, anders verdwijnt hij weer.

Ik ben geen programmeur, dus graag simpel uitleggen, liefst met een voorbeeld er bij

NB.: ik maak gebruik van Google Analytics. Maar daar zie ik geen optie voor mijn vraag.

 

[csshunter]

Hoi Rob,
Heb je hier wat aan?

• Het eerste resultaat voor de vraag op welke link wordt geklikt in het Google-zoekvenstertje levert wellicht al iets op.
  
  
• Zo zijn er nog meer, merk je als je hoe klikgedrag externe links meten aan Google vraagt.
• Bijvoorbeeld:Uitgaande links meten met Google Analytics
• Of anders: Uitgaande links simpel meten met Google Analytics

Met vriendelijke groet,
CSShunter
__________
PS: Ik denk dat de site niet in alle browsers doet wat je wilt:

En als een webpagina niet doet wat je wilt, ... (zie handtekening)

 

[rob1]

Hallo CSSHUNTER,

Bedankt voor de info, ik ga nu lezen.
Waar ik meer van schrok was dat de site er zo raar uitzag in de andere browsers. Maar dat is opgelost, en gelukkig was het niet voor alle pagina's van de site.
Alleen in Safari weet ik niet echt wat te doen. Maar dat vogel ik nog wel. Ik heb in ieder geval de browsers geïnstalleerd zodat ik beter kan controleren hoe het er uit zien.

 

[csshunter]

Hoi Rob,
Dat ziet er al een stuk beter uit!
Ik denk dat ook Safari mooi wordt met in de html:

...
<img src="home/resize.jpg" width="100%" class="auto-style9">

Dus de height="30%" helemaal weglaten.

Toelichting:
Als je één van de twee maten van een image (breedte of hoogte) weglaat, maakt de browser de weggelaten maat altijd precies in verhouding tot de wel aangegeven maat, op basis van de breedte/hoogte-verhouding van de afbeelding zelf. Dat geldt ook voor images die via een % geschaald worden.

Met vriendelijke groet,
CSShunter

 

[rob1]

Hi CCSHUNTER,

Dat wist ik niet van, ik probeer altijd met % alles op maat te krijgen. Dit met het idee, 10% is overal even veel op welk scherm dan ook. Nooit bij de browsers stilgestaan, en ik wist dus zeker niet dat als je 'height' weg laat het dan eigenlijk gelijk goed is. De titel chili-chile.nl had ik ook op de zelfde manier opmaat gemaakt. Ik heb nu eerst de jpg kleiner gemaakt zodat ik dat minder met % hoef te doen.
Moet ik bij mijn andere site ook doen, maar dat is voor later vandaag.

Het volgen van de links wil nog niet echt lukken, in Google Analytics kon ik altijd al zien welke pagina's van de site bezocht waren. Nu heb ik bij iedere knop het schuingedrukte staan.

<a href="http://www.voorbeeld.nl" onclick="pageTracker._trackPageview()"></a>
<a href="http://www.voorbeeld.nl" onclick="pageTracker._trackPageview(this.href)"></a>

Het zou dan volgens de info op de site te zien moeten zijn in Google Analytics. Maar dat is (nog) niet het geval. Maar dat zou wel eens door Analytics kunnen komen, als je de bezoekers stroom wil zien van een site loopt die altijd 1 dag achter. Of ik heb het verkeerd gedaan natuurlijk

Ik heb in ieder geval weer wat bij geleerd! Bedankt daar voor.

 

[rob1]

Hallo Allemaal,

Ik krijg het volgen van uitgaande links niet echt onder de knie. Ik heb van alles geprobeerd. Helaas, na een paar dagen niets in Google Analytics te zien.
Uit eindelijk het ik iets gevonden wat werkt dat is onderstaande

<title>link</title>

<!-- code voor uitgaande link -->
<script type="text/javascript">
function trackOutboundLink(link, category, action) { 
 
try { 
_gaq.push(['_trackEvent', category , action]); 
} catch(err){}
 
setTimeout(function() {
document.location.href = link.href;
}, 100);
}
</script>
<!-- einde code uitgaande link -->

<!-- code hieronder geeft aan dat de link's op deze pagina geopend worden in een nieuw tabblad -->
<base target="_blank" />
<!-- eind code hierboven geeft aan dat de link's op deze pagina geopend worden in een nieuw tabblad -->

</head>

<body>

<a href="http://www.uitgaandelink.nl" onClick="trackOutboundLink(this, 'Outbound Links', 'uitgaandelink.nl'); return false;">test link</a>


</body>

<!-- Google Analytics -->
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-00000000-1']);
  _gaq.push(['_setDomainName', 'pagina.nl']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<!-- Einde Google Analytics -->

</html>

Als ik dit in een test pagina maak werkt het. Ik klik op de link en in een nieuw tabblad opent de pagina van de link.
In Analytics kan ik later zien dat ik op de "link" pagina geweest ben en dat ik op een link naar pagina X gedrukt heb.

Test geslaagd dus! Nu in bouwen in de site dan werkt de site niet meer zoals de bedoeling is.
Ik wil dat als er op een link gedrukt wordt deze opent in een nieuw tabblad.
Als ik onClick="trackOutboundLink(this, 'Outbound Links', 'uitgaandelink.nl'); return false;"> achter <a href="http://www.uitgaandelink.nl" plak wat bedient wordt door een button, dan opent de link altijd in het zelfde tabblad. Wat ik ook probeer. Als ik dan bij het script boven in de pagina zorg dat het buiten werking is, dan werkt het weer wel. Maar worden de links niet meer gevolgd natuurlijk.

Wie weet raad?

Het gaat om de link pagina van www.foto-photo.nl. Nu werkt die pagina zo als ik het wil hebben, alleen zonder volgen van de aangeklikte links.

 

[csshunter]

Hoi Rob,
De nattigheid zit 'm in dit stukje code:
[JS]...
setTimeout(function() {
document.location.href = link.href;
}, 100);[/JS]
De "document.location" is altijd de URL van de actuele pagina. Als die vervangen wordt door een nieuwe URL, gebeurt dat dus in plaats van de actuele pagina: de target="_blank" werkt dan niet.

Ik heb hevig zitten schutteren om hier iets anders van javascript voor in de plaats te zetten, maar dat is me niet gelukt. Als je de "return false" er uit haalt, wordt meteen doorgeschakeld naar de pagina in het nieuwe tabblad, maar dan krijgt Google Analytics niet de vertraging van 100ms die nodig is.
Maar als je de "return false" er in laat staan, wordt er nooit doorgeschakeld.
Ook geprobeerd: de onclick-functie met de "return false" na een tijdje weghalen (dan heeft Google tijd gehad), en dan daarna een zichzelf-klikkende functie laten starten. Maar die werkte bij mij alleen als je daarna nog een keer op de link klikte, en niet spontaan. Misschien heb ik iets verkeerd gedaan, of misschien kan dat gewoon niet.
Ook Google bood geen uitkomst: allemaal doodlopende wegen tegengekomen. De voorbeelden openen allemaal in hetzelfde tabblad.
Het schijnt wel te kunnen als je er de javascript-bibliotheek jQuery aan toevoegt, maar dat is ook weer zo'n gedoe (als het al werkt).

Workaround?
Nu heb ik bedacht dat als je er een ander vertragingsmechaniek in zet, je de setTimeout-functie naar de document.location kunt laten vervallen, en dan is de "return false" niet nodig.
Als ander mechaniek kom ik uit op de "alert"-functie: een pop-up bericht in de browser, waar de bezoeker even "Ja" op moet klikken voordat de link gevolgd wordt.
De boodschap in het bericht kan zijn: "De link opent in een nieuw tabblad", dan is de bezoeker meteen gewaarschuwd.
Tegen de tijd dat het berichtje weggeklikt is, is zeker 100ms voorbij, en heeft Google tijd genoeg gehad om z'n werk te doen.

• Hier is de test: link-klik-ga.htm
  Zie broncode.
• Je kan 'm eens proberen in plaats van de pagina www.foto-photo.nl/links.html

Omdat ik vanaf een andere server draai moest ik wat wijzigingen aanbrengen; die moeten bij jou weer teruggedraaid worden:

• Regel 11 en 12 even wissen, en
• vervolgens moet regel 41 <base target="_blank" /> uit het commentaar gehaald worden.

Ik ben benieuwd of dat wat oplevert!

Met vriendelijke groet,
CSShunter
___________
PS-1:
Om valid html te zijn, moeten de Microsoft-verwijzingen uit de xmlns-declaratie van de <html>-tag gehaald worden.

PS-2:
De content-language is geen "en-us" maar gewoon "nl".

PS-3:
In de <head> van deze pagina moeten ook nog de javascript-functies FP_preloadImgs() en FP_swapImg() opgenomen worden om de hovers over de images te laten werken.

PS-4:
In de <body> moeten de onClick's met een kleine letter geschreven worden: onclick="..." (omdat het xhtml is: dan moeten alle tags en attributen met een kleine letter).

PS-5:
Het script op het laatst voor de Analytics moet net voor de </body></html> komen en niet tussen de </body> en de </html>.

• Op deze manier is de html-validator ook tevreden.

 

[rob1]

Hi CSSHunter,

Bedankt voor de hulp! Vandaag helaas geen tijd om aan mijn site te werken. Morgen middag ga ik aan de slag. Ik laat je weten hoe het gegaan is.

 

[rob1]

Hallo CSSHunter,

Ik heb je instructies uitgeprint en ben aan de slag gegaan. Ik heb stukje voor stukje in mijn oude link pagina gecopieerd. Op deze manier kan ik de verschillen zien en snap ik beter wat er gebeurt.
Wat ik niet begreep was waar ag.jr vandaan kwam. Ik heb dat inmiddels gevonden en snap de bedoeling. PS 1 t/m 5 heb ik uit gevoerd in alle pagina's van mijn site. Al moet ik PS-4 nog even beter na zoeken in onderdelen van de site. Na alles te hebben geupload, de site getest en met name de link pagina. Werkt perfect! In analytics kan ik mooi zien waar men op geklikt heeft.

Ik heb echter een vraag. In de onderstaande regels, blijven er 2 altijd geel (regel 6 en 10). Daar is dus iets fout. maar als ik ze vergelijk met de zelfde regel er boven die niet geel is ontdek ik geen verschillen (m.u.v. de verschillen die er moeten zijn)

<a href="http://www.acuarelart.cl/" onclick="trackOutboundLink(this, 'Outbound Links', 'Acuarelart')">
    <img style="border: 0" id="img4" src="knoppen_link/button56.jpg" height="25" width="125" alt="AquarelArt" onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'knoppen_link/button57.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img4',/*url*/'knoppen_link/button56.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'knoppen_link/button58.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'knoppen_link/button57.jpg')"><!-- MSComment="ibutton" fp-style="fp-btn: Simple Line 1; fp-font-size: 9" fp-title="AquarelArt" --></a>&nbsp;&nbsp;&nbsp;&nbsp;
	<em><span class="auto-style1">José Navarro, Chileens aquarellist.</span></em><p>	

<a href="http://www.chili-chile.nl/" onclick="trackOutboundLink(this, 'Outbound Links', 'Chili-chile')">
	<img style="border: 0" id="img5" src="knoppen_link/button80.jpg" height="25" width="125" alt="Chili-Chile" onmouseover="FP_swapImg(1,0,/*id*/'img5',/*url*/'knoppen_link/button5A1.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img5',/*url*/'knoppen_link/button80.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img5',/*url*/'knoppen_link/button5B1.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img5',/*url*/'knoppen_link/button5A1.jpg')"><!-- MSComment="ibutton" fp-style="fp-btn: Simple Line 1; fp-font-size: 9" fp-title="Chili-Chile" --></a>&nbsp;&nbsp;&nbsp;&nbsp;
	<em><span class="auto-style1">Chili-chile, pagina met info over Chili.</span></em><p>
	
<a href="http://www.zwartenbergse-polder.nl/" onclick="trackOutboundLink(this, 'Outbound Links', 'Zwartenbergsepolder')">
	<img style="border: 0" id="img6" src="knoppen_link/buttonA9.jpg" height="25" width="125" alt="Zwartenbergsepolder" onmouseover="FP_swapImg(1,0,/*id*/'img6',/*url*/'knoppen_link/buttonAA.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img6',/*url*/'knoppen_link/buttonA9.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img6',/*url*/'knoppen_link/buttonAB.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img6',/*url*/'knoppen_link/buttonAA.jpg')"><!-- MSComment="ibutton" fp-style="fp-btn: Simple Line 1; fp-font-size: 9" fp-title="Zwartenbergsepolder" --></a>&nbsp;&nbsp;&nbsp;&nbsp;
	<em><span class="auto-style1">Website over de zwartenbergse polder nabij Etten-Leur.</span></em></p>

Als probeersel heb ik de eerste 'set' (regel 1 t/m 3) gecopieerd en er onder geplakt, dit met het idee dat de tweede regel daarvan dan ook geel zou worden. dat is echter niet het geval.
In jou link-klik-ga.htm was dat ook zag ik later. Hoe komt dat?

Maar als gezegd, de site werkt perfect!

Veel dank voor je hulp!

 

[csshunter]

Hoi Rob,
"Werkt perfect! In analytics kan ik mooi zien waar men op geklikt heeft."
Goed zo!

Het geel (bij hoveren via Firebug?) komt er omdat er toch een klein verschil is:

• De eerste link begint meteen met een <a>.
• De volgende links zitten ingepakt in een <p>.

Maar op andere dingen dan de Google-track was ik nog niet ingegaan.

Wat ik zou doen:

• Alle images er uit halen (dan hoeven er geen 3 buttons en 3 hover-varianten te worden gedownload: snellere pagina!).
• Het preloaden van de hover-varianten hoeft dan ook niet.
• Je bent ook het javascipt voor het wisselen bij een hover kwijt.
• In plaats daarvan kunnen de buttons helemaal met css opgemaakt worden, en ook hun hover-varianten.
• En css werkt razendsnel!
• De overblijvende html wordt opeens heel eenvoudig, en is ook snel uit te breiden:

<p><a href="http://www.acuarelart.cl" 
	onclick="trackOutboundLink(this, 'Outbound Links', 'Acuarelart')">AcuarelArt.cl</a>
José Navarro, Chileens aquarellist.</p>

<p><a href="http://www.chili-chile.nl" 
	onclick="trackOutboundLink(this, 'Outbound Links', 'Chili-chile')">Chili-Chile.nl</a>
Reisverslagen &amp; info over Chili.</p>

<p><a href="http://www.zwartenbergse-polder.nl" 
	onclick="trackOutboundLink(this, 'Outbound Links', 'Zwartenbergse-polder')">Zwartenbergse-polder.nl</a>
Website over de Zwartenbergse polder nabij Etten-Leur.</p>

Voor de css is dan dit nodig (in de <head> van de pagina):

<style type="text/css">
body {
	background: #FFFEFB;
	}
p {
	margin: 25px 0;
	padding: 0;
	font-family: "Bookman Old Style", "Times New Toman", times, serif;
	font-style: italic;
}
a {
	display: inline-block;
	width: 13em;
	margin: 0 20px 0 5px;
	padding: 2px 0;
	border-top: 1px solid #B2B3DE;
	border-bottom: 2px solid #4547A1;
	border-radius: 5px;
	font-family: "Trebuchet MS", arial, helvetica, sans-serif;
	font-style: normal;
	font-size: .7em;
	text-align: center;
	text-decoration: none;
	color: #4547A1;
	}
a:hover,
a:focus {
	background: #EBFFEB;
	border-top: 1px solid #8FD9D8;
	border-bottom: 2px solid #008080;
	color: #004040;
	}
</style>

• Test: link-klik-ga-nw.htm
• Voor elke nieuwe link hoef je nu ook geen twee nieuwe images meer aan te maken.

CSS is dus echt wonderbaarlijk! *)

Met vriendelijke groet,
CSShunter
_________
*) Je zou het ook voor de knoppen van het hoofdmenu kunnen gebruiken.
PS: Om van de <iframe>'s af te komen (zie: Alles over frames), kan je voor een simpel alternatief eens hier kijken. - Maar dat is een apart klusje!