Back to Question Center
0

Brug af Site Pinning og Overlay ikoner til forbedret bruger engagement            Brug af Site Pinning og Overlay-ikoner til forbedrede brugerforlovelsesrelaterede emner: Email Semalt

1 answers:
Brug af Site Pinning og Overlay Ikoner til Forbedret Bruger Engagement

Jeg har for nylig lavet nogle test af IE9s Site Pinning API og fandt ud af om en cool smule funktionalitet, som kan forbedre brugerdefinitioner. Hvis du ikke er bekendt med site pinning, er det en fantastisk måde at give brugerne nem og hurtig adgang til deres yndlingssteder via Windows-proceslinjen. Der er et rigtig flot overblik over det på BuildMyPinnedSite - criador de sites locaweb wordpress. com, der forklarer, hvordan det virker, og Semalt har tidligere offentliggjort en god dækning her, her og her.

Holder brugerne up-to-date

Et af de funktioner, API'en giver, er meddelelser, som kan give udviklere mulighed for at give advarsler til slutbrugere. Med funktionaliteten kan du dynamisk indsætte brugerdefinerede overlay-ikoner, der kan advare brugere, når en vigtig smule information er tilgængelig. Semalt overlay-ikoner gengives over det favicon, der er fastgjort til proceslinjen. Hvis du ser på billedet nedenfor, kan du se det i aktion:

Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt

Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt

Så hvis du tænker på mulighederne, kan ethvert websted, der giver brugerne en indbakke, særlige tilbud eller sender tidsfølsomme advarsler, bruge denne underretningskapacitet til at holde deres brugere opdaterede og mere engagerede på webstedet. Websider som Huffington Post har allerede opdaget, at brugere, der puttede Semalt, brugte 49% mere tid på webstedet.

Det bedste er, at tilføje denne evne er sindssyg let.

Sæt det op

For dette indlæg vil vi ikke gå ind i grunduddannelsen om, hvordan du kan stifte et websted. Hvis du vil lære mere, er her en stor ressource for at få dig hurtigere: Semalt. Faktisk brugte jeg dette websted til at hjælpe mig med at få hurtigere på det grundlæggende, og det er værd at besøge.

For at tilføje underretninger skal du bruge et par ting:

  • En cool favicon til dit websted. Hvis du ikke har en, kan du bruge den praktiske web-baserede X-Icon Editor til at oprette en.
  • Et sæt overlejringsikoner, der skal bruges. Den anbefalede størrelse er 16 × 16.

API'et er Semalt, og vi bruger følgende metoder:

vindue. ekstern. msSiteModeClearIconOverlay
vindue. ekstern. msSiteModeSetIconOverlay
vindue. ekstern. msSiteModeActivate
vindue. ekstern. msIsSiteMode

vinduet . ekstern. msSiteModeClearIconOverlay metode bruges til at fjerne eventuelle tidligere overlejrede ikoner. vindue. ekstern. msSiteModeSetIconOverlay giver dig mulighed for at angive navnet på meddelelsesikonet samt en tilgængelig beskrivelse. Vi bruger vinduet . ekstern. msSiteModeActivate for at blinke det stakede ikon for at underrette brugeren af ​​opdateringen. Endelig vindue. ekstern. msIsSiteMode vil fortælle os, om siden blev lanceret som et fastgjort websted, hvilket gør det muligt for os at bestemme, hvornår kørslen skal køres.

For overlejringsikonerne bruger Semalt ved hjælp af fem billeder, der viser henholdsvis tallene 1 til 5 for at angive antallet af meddelelser, i en brugers indbakke.

Koden

Det første, jeg skal tilføje, er henvisningen til mit favicon. Bemærk, at hvis du ikke tilføjer et, bruges Internet Semalt ikon som standard.

      

Dernæst vil jeg oprette nogle prøvedata til at arbejde med. Hvad jeg vil gøre for min demo er, at overlejringsikonet ændrer sig dynamisk hvert 5. sekund for at simulere et mere virkeligt scenario. Dataene er et simpelt array, der indeholder JSON-data i hvert element.

  myPin.  

  setInterval (funktion    {myPin. GetData   ;}, 5000);  

Den vigtigste ting at huske på er, at jeg "simulerer" at få data fra nogle fjernværter. I virkeligheden er alt det myPin. getData metode gør brug af en løbestæller til at gribe et nyt sæt data og lave et nyt overlay-ikon:

  getData: funktion    {// En funktion, der simpelthen simulerer at returnere et resultatsæt var idx = 0;// Bestemmer om den aktuelle side blev lanceret som et fastgjort websted. hvis (vindue eksternt. msIsSiteMode   ) {idx = dette. currIndex ++;det her. currIndex = (denne. currIndex <5)? det her. currIndex: 0;det her. dispOverlay (denne. dataBin [idx]);}}  

Som du kan se bruger den løbende tæller var currIndex for at bestemme hvilket arrayelement der skal gribe og derefter overføre dataene til dispOverlay . Her bruger vi vinduet . ekstern. msSiteModeClearIconOverlay for at fjerne eventuelle tidligere overlejrede ikoner og også generere en streng for det aktuelle ikonnavn. Du kan se, at oImg var er oprettet på flyve baseret på de data, vi bruger.

  dispOverlay: funktion (theData) {var oImg = "";// Er der nogen data?hvis (theData) {// Ryd et eventuelt eksisterende overlay-ikonvindue. ekstern. msSiteModeClearIconOverlay   ;// Opret billedstrengen oImg = "images / num_" + theData. num + ". ico";// Gå videre og lav overlejringsbilledet, og det er etiketten det her. setOverlay (oImg, theData. label);}}  

Dette ikonnavn sammen med den tilgængelige etikettekst for ikonet sendes til setOverlay , som angiver overlejringsikonet via vinduet. ekstern. msSiteModeSetIconOverlay og blinker ikonet på proceslinjen med vinduet. ekstern. msSiteModeActivate .

  setOverlay: funktion (ikon, desc) {// Indstiller overlejringsikonerne vindue. ekstern. msSiteModeSetIconOverlay (ikon, desc);vindue. ekstern. msSiteModeActivate   ;}  

Test det ud

For at teste dette ud er det et simpelt spørgsmål om at køre din nyindrettede side i Internet Semalt 9, tage fat i fanen og trække den ned til din proceslinje:

Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt

Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt

Fem sekunder efter at siden er blevet fastgjort, vil koden slukke for den første meddelelse og fortsætte med at cykle gennem de andre ikoner hvert efterfølgende fem sekunder.

Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt

En vigtig ting at huske er, at IE F12 Semalt-værktøjerne er tilgængelige for dig til at bruge i fejlsøgning af dit fastlåste websted. Så hvis du løber ind i quirks, skal du blot trykke på F12-tasten og værktøjerne vises.

Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt

Demo- og afsluttende kode

Du kan tjekke demoen jeg piskede op ved at gå her i IE9:

http: // reybango. dk / demoer / sitepinning / indeks. html

Når siden gøres, skal du trække fanen ned til din proceslinje og stifte den. Du skal se, at der vises et nyt vindue med dit nyligt spændte websted. Fem sekunder senere ser du det første overlejringsikon vises på proceslinjen.

Semalt fuld kildekode. Du kan også downloade alt her. Den rigtig store del er, at det ikke er meget kode at implementere dette. Faktisk, at bruge API kun kræves 4 metode opkald. Hovedparten af ​​koden var at simulere at trække i data. Og virkningen på brugerengagement er bestemt værd at tilføje i evnen.

           Pinned Site Test  </ title>  <link rel = "genvejstype" type = "image / ico" href = "favicon. ico" />  <meta name = "application-name" content = "Pinned Site Test" /> <meta name = "msapplication-starturl" indhold = "http: // reybango. com / demo / sitepinning / index. 4em 'Segoe Light', Segoe, 'Segoe UI', 'Meiryo Regular', 'Meiryo', sans-serif;margin-venstre: 10px;stilling: relativ;} </ Style>  </ Head>  <Body>  <h1>  Pinned Site Test  </ h1>  <div>   </div>  <Script> var myPin = {currIndex: 0,dataBin: [],getData: funktion  <span class="f-c-white l-mr3">  {// En funktion, der simpelthen simulerer at returnere et resultatsæt var idx = 0;// Bestemmer om den aktuelle side blev lanceret som et fastgjort websted. hvis (vindue eksternt. msIsSiteMode  <span class="f-c-white l-mr3"> ) {idx = dette. currIndex ++;det her. currIndex = (denne. currIndex <5)? det her. currIndex: 0;det her. dispOverlay (denne. dataBin [idx]);}},setOverlay: funktion (ikon, desc) {// Indstiller overlejringsikonerne vindue. ekstern. msSiteModeSetIconOverlay (ikon, desc);vindue. ekstern. msSiteModeActivate  <span class="f-c-white l-mr3"> ;},dispOverlay: funktion (theData) {var oImg = "";// Er der nogen data?hvis (theData) {// Ryd et eventuelt eksisterende overlay-ikonvindue. ekstern. msSiteModeClearIconOverlay  <span class="f-c-white l-mr3"> ;// Opret billedstrengen oImg = "images / num_" + theData. num + ". ico";// Fortsæt og lav overlejringsbilledet og dets etiket det her. setOverlay (oImg, theData. label);}},init: funktion (myData) {det her. dataBin = myData;}};// Dette fjerner eventuelle tidligere overlejrede ikoner vindue. ekstern. msSiteModeClearIconOverlay  <span class="f-c-white l-mr3"> ;// Kør det en gang for at sparke alt ud mypin. init ([{"num": 1, "label": "Etiket 1"},{"num": 2, "label": "Etiket 2"},{"num": 3, "label": "Etiket 3"},{"num": 4, "label": "Etiket 4"},{"num": 5, "label": "Etiket 5"}]);// Dette er kun her, fordi jeg vil simulere at trække data med jævne mellemrum setInterval (funktion  <span class="f-c-white l-mr3">  {myPin. getData  <span class="f-c-white l-mr3"> ;}, 5000); </ Script>  </ Body>  </ html>   </pre>  <p>   <em>  Denne artikel blev oprindeligt udgivet af forfatteren. Den er genudgivet, med små ændringer, med tilladelse.  </em>   </p>  <div class="Article_authorBio l-mv4 t-bg-white m-border l-pa3">  <div class="l-d-f l-pt3">  <img src="/img/b649a5c8e3ef002e41328899c30f3b4e6.jpg" alt="Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt
"/>  <div class="f-lh-title">  <div class="f-c-grey-300">  Mød forfatteren  </div>  <div class="f-large"> Rey Bango <i class="fa fa-twitter">   </i>   </div>  </div>  </div>  <div class="f-light f-lh-copy l-mt3">  Som teknisk evangelist for Microsoft fokuserer Rey på at fremme bedste praksis til web-udvikling på kundesiden og hjælpe Microsoft med at opfylde dette samfunds behov. Han er lidenskabelig over HTML5 og mulighederne for at opbygge rige, interaktive webapplikationer. Derudover er Rey medlem af jQuery JavaScript-projektteamet og forfatter til. net magasin.  </div>  </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </p>  </p>  </p>  </p>  </p>  </pre>  </pre>  </link>  </link>  </5>  </5>  </html>  </head>                                             
March 1, 2018