Affiliate Website erstellen: Ein offenes Beispiel #5

Hier kommt der fünfte Teil der Reihe über eine kleine Affiliate-Seite. Hier kommst Du zum vorherigen, dem vierten Teil.

Seit dem letzten Update habe ich die Strategie zur Vermehrung der Besucher ein bisschen umgeworfen. Zuvor habe ich den größten Teil der Zeit für die Erstellung von neuen Inhalten verwendet. Das hat mir ein einigermaßen stetiges, aber kleines Wachstum der Zugriffszahlen beschert. Die Seite ist nun rund 85.000 Wörter stark.

Diese Menge an Inhalten, zu denen jede Menge Bilder und inzwischen auch Videos zählen, sind schon ganz ordentlich. Aber es gibt Affiliate Seiten mit weit mehr. Als ich mit der Seite anfing, hatte ich darauf gehofft, mit 50k Wörtern schon weit mehr Nutzer anziehen zu können. Aus diesem Grund fuhr ich die Produktion von neuen Artikel herunter und konzentrierte mich darauf, die bestehenden zu verbessern und neue Methoden zu finden, Nutzer anzulocken.

Einerseits verbesserte ich ein paar technische Kleinigkeiten. Andererseits bastelte ich viel mehr Inhalte für Pinterest.

Technische Änderungen

Google hat ein neues Tool bereitgestellt, mit dem sich einige der wichtigste Faktoren einer Seite messen lassen, die für eine gute Position unter den Suchergebnissen sorgen können. Dieses Tool heißt web.dev und funktioniert ähnlich wie PageSpeed Insights, das ebenfalls von Google stammt.

web.dev misst aber nicht nur die Ladezeit, sonder prüft noch weitere Best Practices, einige SEO Faktoren und die Barrierefreiheit der Seite. Letztere erfordert, dass zum Beispiel Bilder mit einem alt-Tag versehen und Formularfelder einheitlich beschriftet sind, sodass Screenreader sie verständlich machen können. Hier ein Beispiel:

0

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

<label for="email-input">E-Mail Adresse</label> <input type="text" maxlength="128" id="email-input">

Das for-Attribut im label-Tag gibt an, zu welchem input-Tag die im Label enthaltene Beschriftung gehört. Die input-Felder zu Beschriften ist also nur die halbe Miete. Auf einigen Seiten ist die Beschriftung oberhalb, auf anderen vielleicht unterhalb. Daher sollte das label mit dem input-Tag über das for-Attribut verbunden sein. Ein anderer Weg besteht darin, den input-Tag in das label zu legen:

0

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

<label> E-Mail Adresse <input type="text" maxlength="128" id="email-input"> </label>

Ich bevorzuge die erste Variante mit dem for-Attribut, aber nur aus kosmetischen Gründen. Dagegen sogt die Schachtelung von input in label für ein bisschen mehr Übersichtlichkeit im Code.

LazyLoad für Bilder

Ein wertvoller Vorschlag von web.dev war LazyLoad. Damit wird das nachgelagerte Laden von Bildern gemanagt. Angenommen jemand besucht meinen Artikel über die Organisation vom Kühlschrank. Dann lädt der Browser die Seite an einem Stück und entscheidet kaum selbst, welche Teile eigentlich erst später gebraucht werden. Das kann ein Problem werden, wenn viele Medien auf einer einzigen, langen Seite eingebunden sind.

LazyLoad ist ein Weg, die Reihenfolge bzw. den Zeitpunkt vom Laden bestimmter Ressourcen zu bestimmen. Ähnlich wie die Lösung zum verzögerten Laden der js-Ressourcen aus dem dritten Teil der Artikelreihe, werden mit LazyLoad die Bilder erst dann geladen, wenn alles andere fertig geladen wurde. Auf diese Weise können Besucher mit dem Lesen beginnen, bevor alle Bilder geholt werden müssen. Besser noch: Die Bilder werden erst dann geladen, wenn sie ins Sichtfeld des Nutzers geraten. Bilder ganz unten auf der Seite, zu denen der Besucher womöglich gar nicht scrollt, werden nicht geladen.

Ein kleiner Pferdefuß bei der Verwendung von LazyLoad ist, dass die plötzlich geladenen Bilder den Text verschieben und der Leser die gerade betrachtete Zeile aus den Augen verliert. Das kann zum Teil damit abgefangen werden, indem ein Platzhalterbild benutzt wird, bei dem kein LazyLoad zum Einsatz kommt. Dieser Platzhalter sollte möglichst klein sein (was die Dateigröße angeht). Zum Glück erkennen die meisten Browser, wenn ein Bild mehrfach vorkommt, weshalb es nur einmal heruntergeladen wird, obwohl es an verschiedenen Stellen vorkommt.

Das LazyLoad-Script von tuupola finde ich empfehlenswert. Es benötigt kein jQuery. Und so könnte der Code für ein Bild dann aussehen:

0

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

<img data-src="kuehlschrank.jpg" src="placeholder.jpg" class="lazyload" alt="Kühlschrank" /> <script src="path/to/file/lazyload.js"></script>

Zum src-Attribut gehört der Pfad zum Platzhalterbild. Das data-src-Attribut hält das eigentliche Bild. Mit dem script-Tag wird das LazyLoad-Script eingebunden. Davon braucht es also nur einen auf der ganzen Seite, auch wenn Du mehrere Bilder anzeigen möchtest.

Bis auf die dekorativen Bilder (Social-Icons, etc.) habe ich alle Bilder mit diesem LazyLoad ausgestattet und die Ladezeit damit signifikant gedrückt.

Social Media

Wie anfangs beschrieben, habe ich mehr Zeit in die Verbreitung bestehender, als in die Erstellung neuer Artikel gesteckt. Und das hat ganz gut geklappt. Im letzten Teil habe ich festgestellt, dass Twitter und Instagram für meine Zwecke verhältnismäßig nutzlos sind. Zumindest im direkten Vergleich zu Pinterest. Daher habe ich dort die meisten Postings eingestellt und mich von Twitter und Instagram abgewendet.

Postings auf Twitter oder Instagram sind kurzlebig. Pins auf Pinterest nicht: Ein guter Pin kann – sofern er oft genug gemerkt wurde – über Jahre Klicks einbringen. Für rund zwei Wochen erstellte ich regelmäßig Pins und ein wenig später stiegen die Nutzerzahlen erheblich:

Nutzerzahlen der Affiliate-Seite

Der Anstieg ebbte wieder ab, aber der tägliche Nutzerstrom blieb danach auf stabilem und höheren Niveau als davor. Danach kamen kaum neue Pins dazu und trotzdem blieben die Zugriffszahlen stabil. Als Quelle bringt Pinterest mittlerweile mehr Besucher, als die organische Suche. Immerhin.

Aber mit den neuen Besuchern gibt es ein Problem: Sie konvertierten sehr schlecht. Das Ziel der Seite ist schließlich, Gewinn durch Affiliate-Links zu erwirtschaften. Doch diese Besucher gelangen hauptsächlich über die mobile App von Pinterest auf meine Seite. Klickt jemand dort auf meinen Pin, öffnet sich die Seite im WebView der App. Das ist ziemlich ungünstig.

Es ist zu erwarten, dass Besucher, die von Pinterest kommen, seltener auf die Affiliate Links klicken. Denn sie sind nicht so aktiv auf der Suche nach etwas Bestimmtem, wie es die Nutzer sind, die von den organischen Suchergebnissen kommen.

Dazu kommt, dass selbst wenn sie auf einen Affiliate-Link klicken, der entsprechende Cookie (in den allermeisten Fällen) im WebView der Pinterest App gefangen ist. Klingt ungefährlich, ist aber pures Gift für Affiliate-Verkäufe. Spielen wir das mal durch:

  1. Nutzer klickt auf Pin
  2. WebView öffnet sich innerhalb der Pinterest App
  3. Nutzer klickt auf Affiliate-Link
  4. Zielseite setzt den Cookie, der kommende Verkäufe mit meinem Affiliate-Konto in Verbindung bringt

Will der Nutzer auf der Zielseite – in diesem Fall Amazon – etwas kaufen, dann muss er sich im WebView einloggen. Aber warum sollte er das tun, wenn er im Standardbrowser seines Smartphones bereits eingeloggt ist, oder sogar die Amazon-App besitzt. Er wechselt also die App. Aber der Cookie kommt nicht mit. Ohne ihn können die Käufe nicht mit meinem Affiliate-Konto verknüpft werden.

Selbst wenn der Nutzer sich gegen einen Kauf entscheidet, dann besteht noch immer die Chance, dass er seine Meinung innerhalb der Lebensspanne des Cookies (bei Amazon sind es 24h) ändert. Doch auch hier wird er wohl kaum den WebView zum Bestellen benutzen.

Nur wenige benutzen die Pinterest-Website; darüber würde die Weiterleitung und die Platzierung des Cookies funktionieren. Die meisten benutzen aber die mobile App:

Impressionen auf Pinterest

Impressionen auf Pinterest übers Web

Die beiden Kurven sehen sich auf den ersten Blick zwar ähnlich, aber sie unterscheiden sich in der Anzahl der Nullen. Die erste Kurve zeigt die Impressionen meiner Pins über auf allen Plattformen (iPhone, iPad, Android-Telefon, Android-Tablet, Web, mobiles Internet). Die zweite die der Zugriffe nur übers Web. Pinterest wird also kaum über die Website aufgerufen.

Fazit

Den Fokus auf Pinterest zu legen hat zu mehr Besuchern geführt, aber die Conversion ist sogar in absoluten Zahlen erheblich gesunken:

Monat Link Klicks Verkäufe
10.18 59 14
11.18 72 2
12.18 51 3

Das ist ein ernüchterndes Ergebnis. Es scheint so, als ob der gute alte organische Traffic einfach der beste ist. Tja. Mal sehen, was hier 2019 so passiert :)

Schließen