Der er mange måder du kan implementere din Google Analytics tracking m.m. på din Shoporama webshop. Denne guide beskriver vores anbefalede løsning. Her benytter vi Google Tag Manager og får opsat følgende:
Google Analytics med e-commerce tracking (både mulighed for Universal Analytics og GA4).
Google Ads konverteringssporing
Facebook konverteringssporing
Forvent at en udvikler skal bruge ca. 1-2 timer på implementeringen og du selv en 1-2 timer på den.
Hvilke trin skal gøres?
Disse step skal du igennem for at få din sporing til at virke.
Tilføj to tracking filer til din skabelon (skal din udvikler gøre)
Tilføj diverse tracking ID'er i Shoporama backend (kan du selv gøre)
Tilføj classes og data til div'er i din skabelon (skal din udvikler gøre)
Upload en container i din Google Tag Manager (kan du eller din Google Ads / Facebook Ads konsulent gøre).
Herunder gennemgår vi de enkelte trin og linker til de filer, du skal bruge.
#1 Tilføj to tracking filer
Din udvikler skal sørge for at du har de følgende to stumper kode inde på alle dine sider. Den ene skal placeres lige efter <head> og den anden lige efter <body> elementet.
Koden der skal placeres øverst i <head> elementet er denne.
Koden der skal placeres lige efter <body> er denne.
#2 Indsæt din tracking ID'er i Shoporama.
Klik nu på Design øverst i Shoporama. Klik herefter på fanen "Sporing".
Sæt herefter flueben i "Aktiver sporing i din shop".
Herefter udfylder du følgende (som du ønsker at tracke):
Facebook Pixel ID
Google Analytics ID
Google Ads Conversion ID
Google Tag Manager ID
Herefter klikker du "Gem".
#3 Upload container i Google Tag Manager
Herefter skal du blot ind i Google Tag Manager og importere denne container. Så skulle din Google Analytics, Facebook tracking og Google Ads tracking spille.
Sådan importerer du containeren i Google Tag Manager
Log ind i Google Tag Manager
Klik på Admin
Klik nu på "Import container"
Vælg containeren fra din computer
Herefter vælger du "Existing"
Derefter "Default workspace"
Du klikker nu på Confirm
Herefter Submit
Du skal nu navngive din import og kan give den navnet "Shoporama import".
#4 Tilføj rette classes på div'er og input felter i temaet
For at man kan registrere, hvornår der lægges varer i kurven m.m., skal enkelte elementer have bestemte classes og data-attributter. Dette er en ændring i dit tema, som din udvikler skal stå for. Herunder følger guide til din udvikler.
Kategorier og landingssider
Hvert produkt på en landingsside skal have klassen "productEntity". Det vil typisk være en div og denne vil så skulle se sådan ud.
<div class="productEntity">
På samme <div> skal der nogle øvrige variabler på til Google Tag Managers datalayer. Den komplette <div> ser sådan ud.
Denne div er typisk pakket ind i et <a> element. Det skal have klassen "productEntityClick"
Hvis man kan lægge i kurv fra kategorisiden/landingssiden, skal submit feltet have klassen "productEntityAddToCart".
Produktsiden
På selve produktsiden skal læg i kurv-formularen have id'et "basket_form".
Antal i formularen skal have id'et "qty".
Submit feltet skal have klassen "productEntityAddToCart".
Hvis du anvender varianter på produkter skal select elementet have et id, der hedder "attributes".
Denne selects option elementer, skal have en data-attribut, der hedder data-item_variant="<{$variants[k]->getVal()|escape}>"
På den måde ved du, hvilken variant folk har købt..
Indkøbskurven (basket.html)
På samme måde som ved kategorier og landingssider skal der være en <div class="productEntity">
Som med kategorier skal der yderligere data-attributter på. Der er et samlet kodeeksempel her.
Kan man klikke på produktet skal <a> elementet også ha' klassen "productEntityClick" som på kategorier og landingssider.
Hvis man har +/- knapper til at øge eller sænke antallet af et produkt i kurven, skal de have klasserne productEntityDecreaseCart og productEntityIncreaseCart.
Har man en slet-knap i indkøbskurven, skal den have klassen productEntityRemoveFromCart
Valg af fragtmetode (oftest på shipping.html men til tider også på address.html)
Denne funktion virker kun med radio buttons. Her skal hver radio button have denne attribut med
data-shipping_name="<{$shippings[i]->getName()|escape}>"
så det vil se sådan ud
<input type="radio" name="shipping_id" data-shipping_name="<{$shippings[i]->getName()|escape}>">
Valg af betalingsmetode (typisk på approve.html men til tider også på address.html eller shipping.html)
På samme måde som med fragt, skal den have denne attribut
data-payment_name="<{$gateways[i]->getName()|escape}>"
så det vil se sådan ud
<input type="radio name="payment_gateway_id" data-payment_name="<{$gateways[i]->getName()|escape}>">
Submitknappen, der sender brugeren til betaling skal have klassen "paymentStep", så det vil se sådan ud
<input type="submit" value="Gå til betaling" class="paymentStep">
Herefter skulle din tracking og e-handelssporing køre som smurt (forudsat ehandelssporing er opsat i Google Analytics).