Å utvide Google Analytics på CSS-Triks med Tilpassede Dimensjoner

0
14

Ideen til denne artikkelen utløste når Chris skrev dette i Takk (2018 Utgave):

Jeg nesten ønske våre Nettadresser hadde årene på dem fordi jeg fortsatt ikke har en måte å omfang analytiske data for å kun vise meg data fra innhold som er publisert dette året. Jeg kan se de mest populære ting fra året, men som er uavhengig av når den ble publisert, og som er dominert av den store guider vi har hatt i år og holde seg oppdatert.

Jeg har vært en trofast leser av CSS-Triks, men har ennå ikke hadde noe å bidra med. Inntil nå. Å være en Google Analytics spesialist av dagen, dette var endelig noe jeg kunne bidra til CSS-Triks. La oss utvide Google Analytics på CSS-Triks!

Skriv inn Google Analytics-tilpasset dimensjoner

Google Analytics gir deg en masse interessant innsikt i hva de besøkende gjør på nettstedet, bare ved å legge den grunnleggende Google Analytics kodebiten på hver side.

Men Google Analytics er en one-size-fits-all-verktøyet.

For å gjøre det virkelig meningsfylt for et bestemt nettsted som CSS-Triks vi kan legge til flere meta-informasjon til våre Google Analytics-data.

Det året en artikkel ble lagt ut er et eksempel på et slikt meta-data som Google Analytics har ikke “ut av boksen”, men det er noe som er lett lagt til for å gjøre data mye mer nyttig. Det er der egendefinerte mål kommer i.

Opprette egendefinerte dimensjon i Google Analytics

Den første tingen å gjøre er å opprette nye egendefinerte dimensjon. I Google Analytics-GRENSESNITTET, klikk på gear-ikonet, og klikk på Tilpassede Definisjoner og deretter klikker du Egendefinerte Dimensjoner.

Google Analytics admin grensesnitt

Dette viser en liste over alle eksisterende tilpassede dimensjoner. Klikk på den røde knappen for å opprette en ny egendefinert dimensjon.

Tilpassede dimensjoner oversikt

La oss gi tilpasset dimensjon er et beskrivende navn. I dette tilfellet, “år” virker ganske riktig, siden det er det vi ønsker å måle.

Omfanget er viktig, fordi det definerer hvordan metadata skal brukes til eksisterende data. I dette tilfellet, artikkel år er knyttet til hver artikkel brukeren ser, så vi trenger å sette den til å “treffe” omfang.

Et annet eksempel vil være meta data om hele økten, slik at hvis brukeren er logget på, som vil bli lagret i en session-omfattet tilpasset dimensjon.

Ok, la oss redde vår dimensjon.

Når de tilpasset dimensjon er opprettet, Google Analytics gir eksempler på hvordan de skal gjennomføre det ved hjelp av JavaScript. Vi er tillatt opp til 20 tilpassede dimensjoner og tilpasset hver dimensjon er identifisert av en indeks. I dette tilfellet, “år” er den første tilpasset dimensjon, så det ble opprettet i Indeks 1 (se dimension1 i JavaScript-koden nedenfor).

Tilpasset dimensjon opprettet på Indeks 1

Hvis vi hadde andre egendefinerte mål som er definert, så de ville leve i en annen indeks. Det er ingen måte å endre indeks for en tilpasset dimensjon, så ta notat av én blir brukt. En liste over alle indekser kan alltid bli funnet i oversikt:

Det var det, nå er det på tide å kode!

Nå har vi til å trekke ut artikkelen år i koden og legge det til nyttelast, slik at den er sendt til Google Analytics med side utsikt hit.

Dette er koden vi trenger til å utføre, per kodebiten vi ble gitt når du oppretter en tilpasset dimensjon:

var dimensionValue = ‘SOME_DIMENSION_VALUE’;
ga(‘sett’, ‘dimension1’, dimensionValue);

Her er den vanskelige delen. Den ga () – funksjonen er opprettet når Google Analytics kodebiten er lastet. For å minimere ytelse hit, det er plassert på bunnen av siden på CSS-Triks. Dette er det grunnleggende Google Analytics tekstutdraget ser ut som:

<script>
(function(i,s,o,g,r,a,m){jeg[‘GoogleAnalyticsObject’]=r;jeg[r]=jeg[r]||function(){
(jeg[r].q=i[r].q||[]).trykk(argumenter)},jeg[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.asynkron=1;a.src=g;m.parentNode.insertBefore(a,m)
})(vindu,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);
ga(‘opprett’, ‘UA-12345-1’, ‘auto’);
ga(‘send’, ‘sidevisning’);
</script>

Vi trenger å angi egendefinerte dimensjon verdi etter at kodebiten er analysert og før siden vis treff er sendt til Google Analytics. Derfor, vi trenger å sette den her:

// …
ga(‘opprett’, ‘UA-12345-1’, ‘auto’);
ga(‘sett’, ‘dimension1’, dimensionValue); // Sett tilpasset dimensjon verdi
ga(‘send’, ‘sidevisning’);

Denne koden er vanligvis plassert utenfor en WordPress-Løkke, men det er der vi vil ha tilgang til meta informasjon som artikkelen år. På grunn av dette, trenger vi å lagre artikkelen i året i en JavaScript-variabel inne i loopen, så referanse som variabel i Google Analytics kodebiten når vi kommer til bunnen av siden.

Lagre artikkelen året i loop

I WordPress, en standard løkken starter her:

<?php if ( have_posts() ) : mens ( have_posts() ) : the_post(); ?>

…og ender her:

<?php endwhile; annet : ?>
<p><?php esc_html_e (“Beklager, ingen innlegg matchet dine kriterier.’ ); ?></p>
<?php endif; ?>

Et sted mellom disse linjene, vil vi trekke ut året, og lagre det i en JavaScript-variabel:

<script>
var articleYear = “<?php the_time(‘Y’) ?>”;
</script>

Referanse artikkelen år i Google Analytics-utdrag

Google Analytics tekstutdrag er plassert på alle sider på nettstedet, men i år er det ikke fornuftig for alle sider (f.eks. hjemmesiden). Å være god JavaScript-utviklere som vi er, vil vi sjekke om variabelen har blitt definert for å unngå eventuelle feil.

ga(‘opprett’, ‘UA-68528-29’, ‘auto’);
if (typeof articleYear !== “undefined”) {
ga(‘sett’, ‘dimension1’, articleYear);
}
ga(‘send’, ‘sidevisning’);

Det er det! Google Analytics-side vis treff vil nå inkludere artikkelen år for alle sider der det er definert.

Tilpassede dimensjoner som ikke gjelder for historiske data

En ting er å vite om tilpasset dimensjon — eller noen andre endringer til Google Analytics-data — er at de bare gjelder for nye data som blir samlet inn fra nettstedet. Egendefinerte dimensjoner som er beskrevet i denne artikkelen, ble implementert i januar 2019, og det betyr at hvis vi ser på data fra 2018 vil det ikke ha noen data for egendefinerte dimensjoner.

Dette er viktig å huske for resten av denne artikkelen, når vi begynner å se på dataene. Egendefinerte dimensjoner er lagt til alle innleggene i CSS-Triks, som går helt tilbake til 2007, men at vi bare ser på sidevisninger som skjedde i 2019 — etter den egendefinerte mål ble gjennomført. For eksempel, når vi ser på artikler fra 2011, er vi ikke ser på sidevisninger i 2011 — vi ser på sidevisninger innlegg fra 2011 i 2019. Dette er viktig å huske på, når vi begynner å se på innlegg fra tidligere år.

Alle sett? OK, la oss ta en titt på den nye data!

Vise dataene i Google Analytics

Den enkleste måten å se de nye dataene er å gå til Atferd → Innhold → Alle Sider, som vil vise den mest viste sider:

Alle Sider-rapporten

I rullegardinmenyen over tabellen, og velg “år” som en sekundær dimensjon.

Året som sekundær dimensjon

Det gir oss en tabell som den nedenfor, som viser år for alle artikler. Legg merke til hvordan hjemmesiden, som er den nest mest sett side, er fjernet fra tabellen fordi den ikke har et år forbundet med det.

Vi begynner å få en bedre forståelse av nettstedet. Mest sett side (langt) er den komplette guiden til Flexbox som ble utgitt tilbake i 2013. Snakk om evergreen innhold!

Tabell med året som sekundær dimensjon

Videregående er god, primær er bedre

OK, så tabellen ovenfor gir en viss forståelse av de mest viste sider, men la oss snu dimensjoner, slik at året er den primære dimensjon. Det er ingen standard rapport for visning av tilpassede dimensjoner som det primære dimensjon, så vi trenger for å opprette en tilpasset rapport.

Egendefinerte Rapporter oversikt

Gi den Tilpassede Rapporten som et godt navn. Å finne den beregninger (blå) og mål (grønn) er enklest ved å søke.

Opprette Egendefinerte Rapporter

Her er hva den endelige Tilpasset Rapport bør se ut, med noen nyttige beregninger og dimensjoner. Legg merke til hvordan vi har valgt Side under Året. Dette vil være nyttig i et sekund.

Den endelige Tilpasset Rapport

Når vi treffer Lagre, ser vi at det samlede tall for alle artikkel år. 2013 er fortsatt på topp, men vi ser nå at 2011 også hatt noen flotte innhold, som ikke var i topp 10 lister vi tidligere har sett på. Dette tyder på at ingen enkelt artikkel fra 2011 sto ut, men i sum 2011 hadde noen gode artikler som mottar fortsatt mange synspunkter i 2019.

Aggregerte tall for artikkelen år

Andelen neste til antall sidevisninger er prosentandelen av den totale sidevisninger. Legg merke til hvordan 2018 “bare” står for 8.11% av alle sidevisninger og 2019 kontoer for 6.24%. Dette er ikke overraskende, men viser at CSS-Triks er delvis en stor suksess på grunn av den enorme mengden av sterk referanse materiale lagt ut i løpet av årene, som brukerne stadig refererer til.

La oss se inn i 2011.

Husk hvordan vi sette opp Egendefinerte Rapporter med Side under Året i mål? Dette betyr at vi kan nå klikke 2011 og drill-down inn det året.

Det ser ut som mye av almanac sidene ble publisert i 2011, som samlet har en mye sidevisninger. Legg merke til den nedre høyre hjørne der det står “1-10 av 375.” Dette betyr at 375 artikler fra 2011 har blitt vist på nettstedet i 2019. Det er imponerende!

Tilbake til spørsmålet: Flott innhold fra 2018

Før jeg glemmer: La oss svare på det første spørsmålet fra Chris.

La oss omfang analytics-data fra innhold som er publisert dette året (2018). Her er topp 10 innlegg:

Topp 10 innlegg publisert i 2018

Forstå to-ledet dyr

I Takk (2018 Edition), Chris skrev også:

For de siste årene, og jeg har blitt prøver å tenke på CSS-Triks som denne to-ledet dyret. En leder er at vi prøver å produsere langvarig referensiell innhold. Vi ønsker å være et nettsted som du kommer til eller lande på å finne svar på front-end spørsmål. Det andre hodet er at vi ønsker å være i stand til å bli lest som et magasin. Abonner, stikke innom en gang i uken, snag RSS… hva du vil, vi håper CSS-Triks er interessant å lese som en hobby magasin eller industri fille.

La oss grave i at med en annen tilpasset dimensjon: Post typen. CSS-Triks bruker en rekke custom post types som videoer, almanac oppføringer, og tekstutdrag i tillegg til den innebygde innlegg typer, som innlegg eller sider.

La oss også trekke ut det, som vi gjorde med artikkelen år:

<script>
var articleYear = “<?php the_time(‘Y’) ?>”;
var articleType = “<?php get_post_type($innlegget->ID) ?>”;
</script>

Vi vil lagre det til tilpasset dimensjon Indeks 2, som er hit-omfattet akkurat som vi gjorde med år. Nå kan vi lage en ny tilpasset rapport som dette:

Custom post types

Nå vet vi at blogginnlegg konto for 55% av sidevisninger, mens tekstutdrag og almanac (den langvarige referensiell innhold) konto for 44%.

Nå, blogginnlegg kan også være referensiell innhold, så det er trygt å si at minst halvparten av trafikken på CSS-Triks er å komme på grunn av den referensiell innhold.

Fra et one-man-band til et 333-forfatter innhold team

Når CSS-Triks startet i 2007 det var bare Chris. På tidspunktet for skriving, 333 forfattere har bidratt.

La oss se hvordan de forfatterne som har bidratt til side syn på CSS-Triks å bruke — du sikkert gjettet det — en annen tilpasset dimensjon!

<script>
var articleYear = “<?php the_time(‘Y’) ?>”;
var articleAuthor = “<?php the_author() ?>”;
var articleType = “<?php get_post_type($innlegget->ID) ?>”;
</script>

Her er de 10 mest sett forfattere i 2019.

Topp 10 forfattere på CSS-Triks

La oss bryte dette ned enda mer av året med en sekundær dimensjon og velg 500 rader i det nedre høyre hjørnet, så vi får alle 465 rader.

Topp 10 forfattere og året

Vi kan deretter eksportere data til Excel og gjør en pivot tabell til data, regner forfatterne per år.

Excel pivot-tabell med antall forfattere per år

Liker du kart? Vi kan gjøre ett med noen vakre v17 farger, som viser antall forfattere per år.

Forfattere per år

Det er fantastisk å se en jevn økning i forfattere som bidrar til CSS-Triks per år. Og gitt 2019 allerede har 33 forskjellige forfattere, ser det ut som 2019 kan sette en ny rekord.

Men er de nye forfattere å generere en hvilken som helst side-visninger?

La oss lage en ny pivot diagram hvor vi sammenligner Chris alle andre forfattere.

Pivot-tabell som sammenligner sidevisninger

…og så diagram over tid.

Andel av sidevisninger av forfatteren per år

Det definitivt ser ut som CSS-Triks er å bli en multi-forfatter nettstedet. Mens Chris er fortsatt den #1 forfatter, det er godt å se at den konstante strømmen av nye innhold av høy kvalitet ikke bare avhenger av ham, som er en god trend for CSS-Triks og gjør det mulig å dekke et mye mer emner fremover.

Men hva skjedde i 2011, spør du kanskje? La oss ta en titt. I en tilpasset rapport, kan du ha fem nivåer av dimensjoner. For nå vil vi holde fast med fire.

Tilpasset rapport med fire mål for å bore inn

Nå kan vi klikke på året 2011, og få listen over forfattere.

2011 forfattere

Hei Sara Takle! Hva awesome innhold gjorde du skriver i 2011?

Sara Takle almanac sider

Ser ut som mye av de almanac sider vi så tidligere. Klikk på det!

107 almanac sider av Sara Takle

Faktisk, mange av almanac sider! 107 for å være nøyaktig. Mye bra innhold som fortsatt mottar mange sidevisninger i 2019 til å starte opp.

Oppsummering

Google Analytics er et kraftig verktøy til å forstå hva brukerne gjør på din nettside, og med litt arbeid, meta data som er spesifikke for ditt nettsted kan gjøre det ekstra kraftig. Som vi har sett i denne artikkelen, kan du legge til et par enkle meta-data som allerede er tilgjengelig i WordPress kan låse opp en verden av muligheter til å analysere og legge en helt ny dimensjon av kunnskap om innhold og besøkende på et nettsted, som vi gjorde her på CSS-Triks.

Hvis du er interessert i en liknende reise som involverer tilpassede dimensjoner og gjøre Google Analytics-data måte mer nyttig, sjekk ut Chris Coyier og Philip Walton i å Lære å Bruke Google Analytics Mer Effektivt på CodePen.