Hur du enkelt lägger till webbläsarfliksnotsifieringar i WordPress

Webbläsarfliknotiser är en av de enkla men effektiva funktionerna som tyst håller besökare engagerade och uppmuntrar dem att komma tillbaka.

Till exempel använder många e-handelswebbplatser detta för att försiktigt påminna användare om att återvända och slutföra sitt köp när de byter flikar. Det är subtilt, icke-påträngande och kan öka konverteringsgraden på din webbplats.

I den här guiden visar vi dig hur du enkelt lägger till aviseringar i webbläsarflikar i WordPress, så att du kan hålla besökarna fokuserade och återkommande. 🙌

När du väl har provat det kommer du att se varför det är ett så användbart verktyg för att hålla besökarna fokuserade och återkommande.

Varför lägga till aviseringar i webbläsarflikar i WordPress?

Aviseringar i webbläsarflikar hjälper till att få tillbaka besökare till din webbplats efter att de har bytt till en annan flik. Istället för att förlora en besökare helt, kan du använda subtila aviseringar för att påminna dem om ditt innehåll, dina produkter eller specialerbjudanden.

Detta gör aviseringar i webbläsarflikar till ett enkelt men effektivt sätt att öka engagemang och konverteringar. Här är några av de största fördelarna med att använda aviseringar i webbläsarflikar:

• Återengagera distraherade besökare: Uppmuntra användare att återvända till din webbplats efter att ha bytt till en annan flik.
• Minska övergivna kundvagnar: Påminn shoppare om produkter som lämnats i deras kundvagn innan de lämnar din butik.
• Öka konverteringar: Rikta uppmärksamheten mot specialerbjudanden, lead magnets och viktiga uppmaningar till handling.
• Förbättra varumärkeskännedom: Håll din webbplats i åtanke med anpassade meddelanden eller visuella aviseringar.
• Öka användarengagemanget: Uppmuntra besökare att fortsätta läsa artiklar, fylla i formulär eller utforska ditt innehåll.

En avisering i webbläsarfliken fungerar vanligtvis genom att ändra flikens titel, visa ett anpassat meddelande, uppdatera faviconen eller visa ett antal aviseringar när en besökare lämnar din webbplats.

Till exempel kan en onlinebutik visa ett meddelande som "Glöm inte din kundvagn!" medan en blogg kan visa "Kom tillbaka för fler tips!" när en besökare öppnar en annan flik.

Här är ett exempel på en webbläsarfliksavisering.

Typer av aviseringar i webbläsarflikar

Beroende på dina mål kan du använda olika typer av aviseringar i webbläsarflikar för att fånga besökarnas uppmärksamhet och uppmuntra dem att återvända till din webbplats.

Här är en snabb jämförelse av de mest populära alternativen:

Med det sagt kommer vi att visa dig hur du enkelt lägger till olika typer av meddelanden i webbläsarfliken i WordPress.

Du kan använda länkarna nedan för att hoppa till den metod du väljer:

Installera WPCode för att lägga till webbläsarfliksanmälningar

Du kan enkelt lägga till webbläsarfliknotiser på din webbplats genom att lägga till anpassad kod i WordPress. Vanligtvis måste du redigera din temafils functions.php, men även ett litet fel kan förstöra din webbplats.

Därför rekommenderar vi att använda WPCode. Betrodd av över 3 miljoner webbplatser, det är det bästa pluginet för kodavsnitt i WordPress på marknaden.

Vi har funnit att det är det säkraste och enklaste sättet att lägga till anpassad kod på din webbplats. Det låter dig infoga anpassad JavaScript via ett dedikerat gränssnitt utan att redigera temafiler. Detta förhindrar oavsiktlig webbplatskrasch.

För detaljer, se vår WPCode-recension.

Först måste du installera och aktivera pluginet WPCode. För mer information kan du se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Gå efter aktivering till sidan Kodavsnitt » + Lägg till kodavsnitt från din WordPress admin-sidomeny.

Håll nu muspekaren över alternativet ‘Lägg till din anpassade kod (nytt kodavsnitt)’ och klicka på knappen ‘+ Lägg till anpassat kodavsnitt’ under den.

Välj sedan kodtypen från listan med alternativ på skärmen.

Därefter kommer du att tas till sidan 'Skapa anpassat kodavsnitt'.

Oavsett vilken typ av webbläsarfliksnottis du använder, kommer du att ange koden här.

Typ 1: Visa nya uppdateringar som en webbläsarfliksavisering

Den här metoden är utmärkt om du vill fånga användarens uppmärksamhet genom att simulera aktivitet på din webbplats. Ett nummer kommer att visas i flikens titel, vilket gör att det ser ut som om ett nytt meddelande eller en uppdatering väntar på användaren.

Till exempel använder webbplatser som Facebook och LinkedIn detta för att visa olästa aviseringar. Du kan använda denna psykologiska utlösare för att uppmuntra användare att byta tillbaka till din flik för att se vad de missar.

När du är på sidan ‘Skapa anpassad kodsnutt’ måste du namnge din kodsnutt. Du kan välja vad som helst som hjälper dig att identifiera koden.

Välj sedan ”JavaScript Snippet” som ”Code Type” från menyn.

Sedan behöver du bara kopiera och klistra in följande kodavsnitt i rutan 'Kodförhandsgranskning':

let count = 0;
const originalTitle = document.title;
let titleInterval;

function startCounting() {
    if (!titleInterval) { // Only start if not already running
        titleInterval = setInterval(() => {
            count++;
            document.title = '(' + count + ') ' + originalTitle;
        }, 2000);
    }
}

function stopCounting() {
    clearInterval(titleInterval);
    titleInterval = null;
    document.title = originalTitle;
    count = 0; // Reset count when returning
}

window.addEventListener('blur', startCounting);
window.addEventListener('focus', stopCounting);

Denna kod uppdaterar kontinuerligt webbläsarflikens titel med ett ökande nummer när användaren byter bort från fliken, vilket simulerar pågående aktivitet.

När användaren återvänder till din webbplats återställs titeln till det normala och räknaren nollställs.

När du har gjort det, scrolla ner till avsnittet 'Insertion'. Välj helt enkelt alternativet 'Auto Insert' och lämna platsen som 'Site Wide Header'.

Därefter, scrolla tillbaka till toppen av sidan och byt från 'Inaktiv' till 'Aktiv'.

Klicka slutligen på knappen ‘Spara utdrag’ för att lagra dina inställningar.

När det är klart kommer ditt anpassade kodavsnitt att läggas till på din webbplats och börja fungera.

Typ 2: Ändra favicons som en webbläsarfliksnots

Med den här metoden kommer du att visa en annan favicon i webbläsarfliken när användare navigerar till en annan flik. Detta är ett subtilt sätt att påminna dem om att din webbplats fortfarande är öppen.

För att dynamiskt ändra favicon är det bästa praxis att modifiera href för den befintliga favicon-länken som tillhandahålls av ditt WordPress-tema (vanligtvis hittad via document.querySelector('link[rel="icon"]')).

Detta är bättre än att infoga en ny <link>-tagg, vilket kan leda till konflikter eller oväntat beteende.

För att uppnå detta kommer vi att använda ett JavaScript-utdrag som byter bild när användaren lämnar sidan och återställer den när de återvänder.

Besök först sidan Code Snippets » + Add Snippet och klicka på '+ Add Custom Snippet'.

På skapar-sidan, välj 'JavaScript Snippet' som 'Code Type' från menyn.

När du har gjort det, kopiera och klistra in följande kod i rutan 'Code Preview':

// This script assumes an existing favicon link in the head (e.g., from your theme).
// If your theme doesn't provide one, you might need to add a default <link> tag
// using an HTML snippet in WPCode, inserted into the site-wide header.

document.addEventListener('DOMContentLoaded', function() {
    const faviconLink = document.querySelector('link[rel="icon"]'); // Find the existing favicon link
    if (!faviconLink) {
        console.warn("No favicon link found. Please ensure your theme adds one or add it manually in the head.");
        return;
    }

    const originalFavicon = faviconLink.href;
    // Replace with the full URL of your desired notification image
    const notificationFavicon = 'https://example.com/wp-content/uploads/2022/10/favicon-notification.png';

    window.addEventListener('blur', function() {
        faviconLink.href = notificationFavicon;
    });

    window.addEventListener('focus', function() {
        faviconLink.href = originalFavicon;
    });
});

Efter att ha klistrat in koden måste du ersätta URL:en i raden const notificationFavicon = med länken till din egen notifikationsbild.

Ladda helt enkelt upp din nya favicon till WordPress mediebibliotek och kopiera hela URL:en till den uppladdade bilden (t.ex. https://example.com/wp-content/uploads/2024/05/favicon-notification.png).

Klistra sedan in den inom citattecknen i koden.

När du har gjort det, scrolla ner till avsnittet 'Infogning'.

Du kan välja alternativet 'Automatisk infogning' om du vill bädda in koden automatiskt på varje sida.

För att ändra favicon på endast specifika sidor, välj alternativet 'Kortkod' och klistra in den i ett område som stöder kortkoder, som sidofältswidgetar eller längst ner i innehållseditor.

Gå sedan till toppen av sidan och växla omkopplaren från ‘Inaktiv’ till ‘Aktiv’ i det övre högra hörnet, och klicka sedan på knappen ‘Spara kodavsnitt’.

Efter det kommer din favicon att börja ändras som en webbläsarfliksnots.

Typ 3: Ändra sidtiteln som en webbläsarfliksavisering

Den här metoden är för dig om du vill ändra webbplatsens titel för att återfå dina besökares uppmärksamhet.

Genom att använda denna kodsnutt kommer din webbplatstitel att ändras för att visa ett iögonfallande meddelande när användare byter till en annan flik i webbläsaren.

Vi kommer att använda WPCode-pluginet för att ändra din webbplats titel till en webbläsarfliksnotifikation.

För att komma till sidan 'Create Custom Snippet', besök sidan Code Snippets » + Add Snippet från administratörs-sidofältet.

Klicka här på '+ Add Custom Snippet' under alternativet 'Add Your Custom Code (New Snippet)'.

Därefter måste du välja 'JavaScript-avsnitt' som kodtyp från listan över alternativ som visas på skärmen.

Nu när du är på sidan 'Create Custom Snippet', börja med att ange en titel för ditt kodutdrag.

Detta kan vara vad som helst för att hjälpa dig att komma ihåg vad koden är till för.

Sedan behöver du bara kopiera och klistra in följande kodavsnitt i rutan 'Kodförhandsgranskning':

function changeTitleOnBlur() {
	var timer     = null;
	var	title     = document.title;
	var altTitle  = 'Return to this page!';
	window.onblur = function() {
		timer = window.setInterval( function() {
			document.title = altTitle === document.title ? title : altTitle;
		}, 1500 );
	}
	window.onfocus = function() {
		document.title = title;
		clearInterval(timer);
	}
}

changeTitleOnBlur();

När du har klistrat in koden kan du redigera den och helt enkelt skriva det meddelande du vill visa på din webbläsarflik i koden.

För att skriva ditt önskade meddelande, gå helt enkelt till raden var altTitle = 'Återgå till den här sidan!'; och ta bort platshållartexten med meddelandet för din webbläsarfliksnottis.

Rulla sedan ner till avsnittet ‘Infogning’ och välj läget ‘Automatisk infogning’ för att aktivera din webbläsarfliksanmälan på varje sida.

Men om du bara vill att ditt iögonfallande meddelande ska visas på specifika sidor kan du välja alternativet ‘Kortkod’.

Till exempel kanske du bara vill lägga till den här koden på sidan 'Lägg i varukorg' för att minska övergivna kundvagnar på din webbplats.

Om så är fallet kan du välja alternativet Kortkod.

Skrolla sedan ner till alternativet 'Plats' och klicka på rullgardinsmenyn bredvid det.

Härifrån väljer du alternativet 'Webbplatsomfattande sidfot'.

Slutligen, skrolla tillbaka till toppen av sidan och växla omkopplaren från ‘Inaktiv’ till ‘Aktiv’.

Klicka sedan på knappen ‘Spara kodsnutt’ för att lagra dina inställningar.

Det var allt! Nu kommer din webbläsarfliksavisering att varna användare som lämnar din webbplats.

Bonus: Utforska webb-push-aviseringar för bredare räckvidd

Aviseringar i webbläsarfliken är effektiva, men de har en stor begränsning. De fungerar bara om användaren har din flik öppen.

Om du vill nå besökare även efter att de har stängt din webbplats behöver du webb-pushnotiser. Till skillnad från flikvarningar är detta aktiva meddelanden som skickas direkt till användarens enhet eller webbläsare.

Det enklaste sättet att ställa in detta är med PushEngage. Det är den bästa programvaran för push-notiser på marknaden.

PushEngage låter dig skicka automatiska uppdateringar för nya blogginlägg, prissänkningar eller övergivna kundvagnar. Vi använder det här på WPBeginner för att meddela våra prenumeranter om nya handledningar, och det är en toppkälla till återkommande trafik för oss.

För att lära dig mer om det, se vår fullständiga PushEngage-recension.

Den innehåller kraftfulla funktioner som A/B-testning, automatiska pushar, användarsegmentering och smarta påminnelser om opt-in. Dessa verktyg hjälper dig att bygga en lojal publik som fortsätter att komma tillbaka.

För mer information, se vår nybörjarguide om hur man lägger till webb push-notiser i WordPress.

Vanliga frågor om att lägga till aviseringar i webbläsarfliken

Här är några frågor som våra läsare ofta ställer relaterat till att lägga till flikvarningar i webbläsaren i WordPress:

Hur lägger jag till en meddelandefält i WordPress?

Det enklaste sättet att lägga till en anmälningsfält är att använda ett plugin som OptinMonster. Det låter dig skapa klistriga fält som sitter högst upp eller längst ner på din webbplats för att visa uppdateringar, reor eller varningar utan att skriva någon kod.

För mer information, se vår handledning om att skapa ett varningsfält i WordPress.

Hur lägger jag till aviseringar i WordPress?

För att lägga till notifikationer på plats kan du använda ett plugin som PushEngage eller använda WPCode för att infoga anpassade skript.

PushEngage hanterar aktiva webbpush-aviseringar som skickas till webbläsare, medan WPCode låter dig lägga till anpassade skript för passiva flikrubriksvarningar, som de i den här guiden.

Hur aktiverar jag webbläsaraviseringar?

Du måste registrera dig för en webb push-notistjänst som PushEngage.

När du har installerat deras WordPress-plugin kan din webbplats automatiskt be besökare om tillstånd att skicka varningar till deras webbläsare/enhet, även när de inte är på din webbplats just nu.

Hur lägger jag till ett meddelande i WordPress?

Du kan lägga till ett enkelt meddelande i ett inlägg med hjälp av standardblocket Grupp med en bakgrundsfärg i WordPress-redigeraren.

För webbplatsomfattande meddelanden som visas på varje sida rekommenderar vi att du använder ett flytande fält-plugin som OptinMonster eller SeedProd.

Hur lägger jag till ett popup-banner i WordPress?

Det bästa verktyget för att lägga till popup-banderoller är OptinMonster.

Det ger en dra-och-släpp-byggare för att skapa lightboxes, slide-ins och flytande banners som triggas baserat på specifika användarbeteenden, såsom tid på sidan eller avsikt att lämna.

För att komma igång, se vår handledning om att lägga till en popup i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till webbläsarfliksanmälningar i WordPress. Du kanske också vill se vår handledning om hur du lägger till funktionsrutor med ikoner i WordPress och kolla in vår lista över sätt att lägga till en mobilvänlig WordPress-webbplats.

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.