HTML

html5 logoArticoli sull'uso del linguaggio HTML e la creazione e modifica di siti web statici realizzati con linguaggi affini al famoso Hyper Text Markup Language e tecnologie integrabili.  

Inserire il tag di Google Analytics con Google Tag Manager

Categoria: HTML Creato: Mercoledì, 29 Gennaio 2020 Scritto da Daniele Gagliardi

Avete creato un nuovo sito o avete apportato modifiche al vostro blog. State per implementare il codice di monitoraggio di Google Analytics attraverso plugin, template o quant'altro.avatar gtm ga

Nella sezione apposita Amministatore > Informazioni sul monitoraggio > Codice di monitoraggio, leggete la presenza di un nuovo sistema per l'inserimento di tale snippet: 

Google Tag Manager

Non sapendo come implementarlo e vinto dalla curisità, hai googolato fino qui... ed ora? Continua a leggere: sei nel posto giusto!

Se ti sei perso i precedenti articoli, ti consiglio di leggerli per farti un'infarinatura su cos'è e come funziona questo meraviglioso strumento:

Google Tag Manager: Cosa è e come funziona

Creare un account Google Tag Manager (ed installarlo su di un sito web)

Riassumo quanto detto finora riportando testualmente ciò che Google scrive in merito a GTM:

Il nostro strumento gratuito Google Tag Manager ti consente di aggiungere tag al tuo sito se contiene molti tag di analisi e monitoraggio. Valuta la possibilità di utilizzare Google Tag Manager se:

  • Utilizzi diversi strumenti di analisi e di monitoraggio del rendimento degli annunci che richiedono l'inserimento di tag nel sito.
  • L'aggiunta di tag al tuo sito web rallenta la pubblicazione delle campagne di marketing.

Vediamo ora come sfruttare questa "nuova" piattaforma per l'inserimento del tag di Google Analytics per effettuare l'analisi e monitoraggio di un sito web.

Parto da una rassicurazione: Arrivati fin qui, la parte più dura (l'installazione) l'avete già fatta... Ora si tratta di mettere in moto GTM e godersi il viaggio!
Ovviamente, se volete sfruttare Google Tag Manager per l'uso con Google Analytics è sottointeso che voi abbiate un account GA e che abbiate già il codice di monitoraggio. Se ancora non lo possedete, fate l'accesso a Google Analytics, create il vostro account e successivamente il codice di monitoraggio associato al vostro sito web. Fatto? Ora puoi procedere...

Arrivato fin qui, se hai letto anche i precedenti articoli e ne hai seguito il ragionamento, hai il tuo primo contenitore pronto all'uso! E' ora di...

Creare il primo Tag

Per iniziare, dall'area di lavoro che ti si presenta, clicca sul pulsante Nuovo Tag

GTM pulsante nuovo tag

La finestra a scomparsa che ti si presenta ti aiuterà a creare il nuovo Tag inserendo tutte le informazioni necessarie al suo corretto funzionamento:

GTM nuovo tag senza titolo

Scegli il tipo di tag

La prima cosa da fare, è selezionare il tipo di Tag che si vuole creare. Come lascia intuire il titolo dell'articolo, sceglieremo la tipologia Google Analytics: Universal Analytics.

GTM tipo tag GA Universal

Rinomina e configura il tag

Nel frattempo dai anche un nome al tuo Tag. In alto a sinistra, fai click sulla dicitura Tag senza titolo e cambialo come preferisci... Io noiosamente gli do il nome di "Google Analytics".

Inserisci l'ID monitoraggio

Fatto ciò, non sono molte le informazioni da inserire... Ma è indispensabile il tuo codice di monitoraggio. Sono due i modi in cui puoi inserirlo:

GTM GA Impostazioni

  1. Dal menu a discesa sotto l'etichetta Impostazioni di Google Analytics scegli nuova variabile. Temporaneamente, ti si aprirà una nuova finestra a scomparsa dalla destra dello schermo. Qui, oltre a rinominare la variabile, dovrai semplicemente inserire il tuo ID monitoraggio ove richiesto. Ora fai click su Salva per confermare.
    Il vantaggio di questa opzione è che ti consente di creare una variabile contenente il tuo ID Monitoraggio che all'occorrenza potrai usare in altri Tag.

GTM nuova variabile

  1. Fai click su Abilita l'override delle impostazioni in questo tag. Ora nella casella apposita inserisci il tuo codice di monitoraggio di GA: Fatto!
    A differenza del precedente metodo, ciò avrà effetto solo per questo Tag... Comodo se vuoi seguire dallo stesso contenitore più codici di monitoraggio!

GTM tag override impostazioni

Scegli un attivatore

Definito il tuo Tag, è ora di dirgli quando si deve attivare... Fai dunque click sul riquadro Attivazione!

GTM nuovo attivatore

Come vedi è piuttosto semplice: elencato vi è un solo attivatore disponibile: All pages. Selezionalo per tornare al riquadro precedente.

GTM attivatore all pages

Se hai svolto tutto correttamente la tua finestra sarà simile a questa:

Clicca su Salva in altro a destra per confermare e salvare il tuo nuovo Tag!

Anteprima: Test di funzionamento del Tag

Ed ora? Non resta che "metterlo in moto" e vedere se realmente funziona. Come?

Come già accennato nei precedenti articoli, Google Tag Manager consente di testare il funzionamento dei Tag prima di confermarne la modifica: sulla tua area di lavoro, accanto al tuo ID GTM, ti basterà cliccare sul pulsante Anteprima:

GTM Invia modifiche - anteprima

Una volta fatto click comparirà un riquadro di colore arancione con un messaggio il quale ti rende noto che sei in modalità Anteprima. Ora per testarne il funzionamento, segui le indicazioni del riquadro: in un'altra scheda del browser (Google Chrome) apri il tuo sito web, quello sul quale hai installato GTM. Fatto?

Nella parte bassa della finestra, apparirà il riquadro di debug:

GTM debug

Il tuo tag dovrebbe ora apparire sotto la dicitura Tags Fired On This Page come illustrato nell'immagine qui sopra.

Se invece appare sotto Tags Not Fired On This Page, qualcosa è andato storto e ti consiglio di rileggere la guida per correggere le impostazioni del tuo Tag GA.

Pubblicare la versione

Una volta che il test è andato a buon fine, devi solo confermare le modifiche: dalla tua area di lavoro esci dalla modalità di anteprima e successivamente, clicca sul pulsante Invia in alto a destra e conferma le tue intenzioni.

Ora ti resta solo monitorare da Goole Analytics i dati del tuo sito web e goderti il frutto del tuo duro lavoro!

Se hai gradito l'articolo, condividilo, basta un click:

Creare un account Google Tag Manager (ed installarlo su di un sito web)

Categoria: HTML Creato: Mercoledì, 22 Gennaio 2020 Scritto da Daniele Gagliardi

avatar gtm con gatto sul computer Siamo arrivati al secondo articolo su Google Tag Manager. Obbiettivo di questo articolo è di guidarti nei primi passi all'uso di questo strumento: dapprima creare l'account GTM e poi implementare i codici forniti da Google indipendentemente se usi un sito statico, creato in WordPress o Joomla!

Se ti sei perso il primo articolo e vuoi sapere di cosa stiamo parlando leggi l'articolo:

Google Tag Manager: Cosa è e come funziona

Partiamo ora con la cosa più semplice: la creazione dell'account Google Tag Manager:

1. Crea un account

Vai su tagmanager.google.com e crea il tuo account gratuito su Google Tag Manager.
Se possiedi già un account Google (gmail), ti sarà sufficiente fare l'accesso a Google Tag Manager con le tue credenziali.

GTM nuovo account

Fatto l'accesso, clicchiamo su "Crea Account" per iniziarne la configurazione.

2. Crea un contenitore

Per prima cosa assegnamo un nome all'account e indichiamo il paese di provenienza.

Il voler concedere l'accesso ai dati a Google o ad altri servizi è opzionale: potete lasciarlo così com'è.

Ora è la volta del contenitore: Nel campo "Nome contenitore", per convenzione mettiamo l'URL stesso del sito.

Come tipo del contenitore selezioniamo "Web". Qui è possibile creare un contenitore anche per app Android o iOS ma non è il nostro caso...

GTM nome account e primo contenitore

Una volta finito di compilare i dati richiesti per confermare clicca su "Crea" in basso a sinistra.

3. Copia e inserisci il codice GTM sul tuo sito

Una volta accettate le condizioni (obbligatorio per poter usare il serivizio), ti verrà mostrata una finestra modale con i due snippet da implementare sul tuo sito web:

Installa GTM - Codici da incollare nel sito web

Copia il codice e inseriscilo sul tuo sito...

Su pagine HTML

Dovrai accedere alla cartella remota del tuo sito per poter modificare le pagine inserendovi manualmente il codice GTM. Se non sai come fare leggi l'articolo:

Configurare un client FTP

Una volta scaricato i file da monitorare, con un editor di testo dovrai inserirvi:

  • La prima porzione di codice dovrai incollarla all'inizio del tag <head> della tua pagina.
  • La seconda porzione di codice subito dopo il suo tag <body>.

Una volta fatte le modifiche, potrai fare l'upload della/e nuova/e pagina/e nel tuo spazio web sovrascrivendone la versione precedente.

Se gestisci un sito realizzato con un CMS come WordPress e Joomla!, avrai a disposizione plugin gratuiti per installare GTM in maniera indolore evitandoti di toccare il codice:

WordPress

Esistono decine di plugin che consentono di integrare GTM in WP. Ne esistono alcuni che fanno più di quanto abbiamo bisogno aggiungendo addirittura funzioni sperimentali.
Quello più usato attualmente, è Google Tag Manager for WordPress.
Una volta installato in WordPress (potete farlo dalla Bacheca > Plugin > Aggiungi nuovo > Ricercate "Google Tag Manager" sarà il primo ad apparire), basterà attivarlo.
Entrando dentro alle impostazioni del plugin, incollate il vostro codice contenitore (GTM-XXXXXX) e scegliete il metodo di inclusione della seconda porzione di codice, cioé quella del tag <body>.
Se non volete fare fatica a modificare a mano il vostro tema con il metodo Custom o non sapete come fare, potete scegliere il metodo sperimentale (codeless) e sperimentarne il funzionamento.

Joomla!

Il plugin si chiama: Google Tag Manager Plugin for Joomla Websites.
Scarica il plugin qui: Versione 1.0.1
Accedi al tuo Joomla! sito e seleziona Estensioni > Installa
Cerca il file googletagmanager.1.0.1.zip nella cartella Download del tuo PC (o dove lo hai salvato precedentemente)
Configura il plugin con l'ID del contenitore di Google Tag Manager GTM-XXXXXX)
Salva e pubblica il plugin, lasciando le impostazioni predefinite così come sono. 

Bene! ora siamo pronti a cominciare ad usare Google Tag Manager!

Prossimamente:

Nel prossimo articolo vedremo come creare il primo Tag per Google Analytics nel contenitore fin qui creato e come attivarlo.

Se hai gradito l'articolo, condividilo, basta un click:

Configurare un client FTP

Categoria: HTML Creato: Venerdì, 11 Ottobre 2019 Scritto da Daniele Gagliardi

Se avete mosso i vostri primi passi nella realizzazione di un sito web, vi sarete scontrati sicuramente con questo misterioso acronimo: FTP.

Cosa è l'FTP (File Transfer Protocol)

FTP è come ne lascia intendere il nome, un protocollo creato appositamente per il trasferimento dei file via internet, uno dei primi a dire il vero. Per questo ha subito diverse modifiche e miglioramenti fino ad arrivare ai giorni nostri. 

Detto questo, non ci perderemo in dettagli storici, ne tecnici. Se volete saperne qualcosa di più leggete l'articolo sull'FTP in Wikipedia.

L'obiettivo principale di questo articolo, è guidarvi nella configurazione di un client FTP per potervi consentire di trasferire in tutta comodità dal vostro PC i file di cui avrete bisogno per modificare o creare il vostro sito web.

Infatti il vostro sito può essere creato anche in locale, cioé sul vostro stesso computer di casa, grazie a strumenti come i server web apache o IIS facilmente installabili ed utili per la sperimentazione e la creazione prima del passo finale: caricare i file che compongono il vostro nuovo website nello spazio web che consentirà a tutti di vedere il vostro capolavoro.

L'operazione non è affatto complicata e sia che abbiate fatto la registrazione ad un servizio di hosting gratuito, sia che abbiate sottoscritto un abbonamento o "affittato" uno spazio web ad esempio con Aruba, coloro che vi forniscono tali servizi, insieme ad altri dati che vi saranno indispensabili per la gestione del prodotto acquistato vi daranno anche i dati di accesso per il servizio FTP.

FTP account

Detto questo come appariranno questi dati? Ecco un esempio:

FTP Hostname: 55.33.1.205 o mysite.it - Porta Ftp:21

Username: myusername
Password: 4jdffILe5Df

Di solito, il registrar una volta che il servizio è attivo, invia una mail con dati simili a quelli riportati qui sopra. L'hostname, è il server che fisicamente 'contiene' i vostri file (o li conterrà). La porta 21, è quella utilizzata e riservata per il protocollo FTP, cioé ciò che passa da questa 'porta', è identificato come trasferimento di file. Gli altri dati, sono le vostre credenziali: vi vengono fornite dal registrar, ma di solito la password è modificabile. L'utente precedentemente creato dal registrar, vi consentirà una maggiore sicurezza nell'accedere al vostro spazio web. Alcuni servizi di hosting, consentono di creare altri account FTP adhoc per consentire a terzi di accedere solo ad alcune cartelle o domini come Xlogic.org.

Comunque sia il concetto è lo stesso: i dati fornitivi, dovranno essere inseriti correttamente all'interno del vostro client FTP per consentirvi di accedere, navigare e modificare il contenuto del vostro spazio web a remoto.

Client FTP

Ora vi manca un client FTP che vi consentirà di configurare la connessione grazie all'inserimento dei vostri dati utente. 

Io personalmente, mi sono quasi sempre affidato al client FTP Filezilla: gratuito, facile da configurare e usare nonché multipiattaforma. Il programma opensource, ha anche la funzione esporta/importa il che vi consente di portare da un PC ad un altro eventuali configurazioni esistenti senza dover ripetere la procedura ogni volta.

Ve ne sono comunque altri come FireFTP (che si presenta come estensione del browser) e Wise-FTP (soluzione a pagamento). E' solo questione di preferenze e di ciò che più risulta pratico all'uso, nonché della piattaforma che usate. Lascio a voi sperimentare... per la guida in essere, utilizzero il mio preferito: Filezilla.

FileZilla - Installazione e configurazione

Una volta scaricato (meglio dal sito ufficiale) l'eseguibile sul vostro PC, installate il programma seguendo la procedura guidata: richiederà pochi minuti.

filezilla installazione

Passiamo ora alla parte più interessante, cioé la configurazione necessaria per far si che possiamo cominciare a utilizzare il nostro spazio remoto. Una volta aperto il programma, per iniziare velocemente una connessione, si può sfruttare il pannello Connessione rapida posta sotto la barra degli strumenti:

filezilla pannello connessione rapida

Sarà necessario far uso dei dati in nostro possesso, inserirli dove richiesto e infine fare click sul pulsante Connessione rapida.

Se invece vogliamo salvare la configurazione per un successivo riutilizzo, magari perché abbiamo più siti web o più account FTP, sarà il caso di sfruttare il Gestore siti. Potete arrivarci direttamente dal menu File, o dal pulsante immediatamente sotto (1):

filezilla > gestore siti > nuovo sito

Una volta apertasi la finestra del Gestore siti, per creare una nuova connessione, sarà sufficiente cliccare sul pulsante "Nuovo sito" (2). Apparirà nel primo riquadro, sotto la struttura ad albero "I miei siti" un nuovo elemento pronto da rinominare come meglio crediamo (3) ad esempio "mysite".

Una volta dato un nome alla nostra connessione, saranno da compilare i dati relativi all'account FTP. Spostiamoci quindi nel riquadro a destra e completiamo il form con i dati richiesti:

filezilla configurazione nuovo sito

Per testare la connessione e salvarne le impostazioni, cliccate infine sul pulsante "Connetti". Se tutto è stato correttamente inserito e la connessione viene stabilita vedremo qualcosa simile alla prossima immagine:

filezilla scambio file

Il riquadro sotto a quello di connessione rapida, velocemente ci mostrerà in successione i risultati delle interrogazioni al server ed infine ci avviserà di aver scaricato l'elenco completo della cartella remota che potremmo vedere nel riquadro 3. Selezionando una cartella in quest'ultimo riquadro, nella sezione contrassegnata con il numero 4, potremmo vederne il contenuto.

In modo simile, i riquadri a sinistra, 1 e 2 rappresentano i files in locale, cioé sul nostro computer. l'1, mostra con uno schema ad albero le cartelle del computer e il 2 i file contenuti nelle cartelle che di volta in volta selezioneremo.

Il sistema, consente quindi di vedere contemporaneamente i file all'interno del nostro PC e del computer remoto, un po' come se utilizzassimo Risorse del computer su Windows.

Attraverso il Drag & Drop o trascinamento, sarà ora semplice spostare file e cartelle dal riquadro 2 al 4 e viceversa, un po' come se si trovassero sul medesimo PC. Provare per credere.

Per ultimo, il riquadro più in basso ci terrà aggiornati sullo stato di avanzamento dei trasferimenti e dei file in coda agli spostamenti in corso. Ciò sarà utile soprattutto nel caso di spostamenti massivi di file o di archivi di medie e grandi dimensioni.

Avviso di connessione non sicura

Può essere che dopo aver configurato la connessione e aver cliccato su Connetti, appaia l'immagine sottostante:

filezilla avviso ftp in chiaro

L'avviso è certo da prendere in consierazione: se avete la possibilità di connettervi utilizzando i servizi più sicuri FTPS o SFTP usateli, specificandolo nella configurazione, sotto il nome del server nella casella Criptazione.

Tuttavia, la cosa non impedirà l'uso del programma ne tanto meno il trasferimento dei file. Se Filezilla dovesse dare errore con attivato l'uso del protocollo TLS (FTPS), provate a usare la connessione in chiaro, specificandolo sempre attraverso la casella Criptazione.

Per farlo, andate nuovamente su Gestore siti, selezionate il vostro sito, e modificate il parametro succitato.

Modifica di file e upload su server

Come abbiamo visto, il client FTP ci consente di spostare agevolmente i nostri file in remoto o viceversa, dal server al nostro PC.

Sia che gestiate un sito HTML statico, scritto in qualche linguaggio di programmazione come PHP, o che stiate utilizzando un CMS come Joomla! o WordPress, prima o poi sarete obbligati a passare dal protocollo FTP.

Ciò è essenziale per poter operare liberamente sui file che compongono il nostro sito in totale libertà.

Un client FTP sarà senz'altro utile in quanto ogni volta che ne avrete bisogno vi consentirà di spostare temporaneamente un file sul PC per modificarlo prima di effettuare l'ulpoad dello stesso sul server per rendere la modifica effettiva e visibile a tutti...

Spero di essere stato utile e di avervi dato una dritta per muovere i primi passi nel mondo del web... insomma buon FTP a tutti!

Se hai gradito l'articolo, condividilo, basta un click:

Google Tag Manager: Cosa è e come funziona

Categoria: HTML Creato: Venerdì, 17 Gennaio 2020 Scritto da Daniele Gagliardi

avatar gtm confusioneQualche tempo fa, collaborando con uno specialista di web marketing, sono venuto per la prima volta in contatto con Google Tag Manager. Poiché il mio uso di questi strumenti è limitato, specie visto la tipologia del mio blog e dei siti da me creati nel passato, non ho mai approfondito il tema.

Negli ultimi mesi forzato da Google che non riteneva il blog idoneo alla visualizzazione sui dispositivi mobili (anche se lo era ma non gli era gradito nonostante i miei sforzi), per scongiurare una penalizzazione alle visite e per la salute del blog e di come big G lo posiziona nella sua ricerca organica, ho ceduto ai continui solleciti cambiando infine template. 

Nel fare questo grande cambiamento, ho approfittato per fare un altro cambiamento: adottare Google Tag Manager per reinserire i Tag o codici di monitoraggio di Google Analytics

L'obbiettivo di questo come dei seguenti articoli, sarà spiegare in breve cosa è Google Tag Manager, come creare un account GTM e come utilizzarlo con Google Analytics e Google Ads... 

Cos'è Google Tag Manager?

Nell'ottobre del 2012 Google ha dato vita ad una rivoluzione che sta prendendo sempre più piede: Google Tag Manager. Perché una rivoluzione?

Prima della sua esistenza si doveva accedere al codice sorgente del sito web ed inserirvi fisicamente il codice di monitoraggio fornito da Google nel body e/o nell’head delle pagine.

Se si gestivano diversi siti e in essi diversi Tag di Marketing, in genere si doveva per ognuno di essi inserire gli snippet di codice uno ad uno all’interno del codice delle pagine che ci interessava monitorare.

Google Tag Manager, o più semplicemente GTM, semplifica di molto questo lavoro:

Google Tag Manager infatti offre uno strumento visuale unico per la loro gestione: In poche parole consente a fronte dell'inserimento di un'unica porzione di codice, l'implementazione di altri snippet di codice o Tag direttamente dalla sua console o GUI.

GTM Default Workspace

Una volta creato un Tag, si potrà attivarne e disattivarne l’esecuzione direttamente dall’interfaccia di Google Tag Manager.

Come funziona e perché usare Google Tag Manager?

Dopo aver attivato l’account, Google Tag Manager genererà due snippet o porzioni di codice. Per iniziare ad usarlo è necessario inserirli uno all'interno del tag <head> e l’altro appena dopo l’apertura del tag <body> del sito web. Questo una volta per sempre: non sarà più necessario ripetere l'operazione per nessun altro Tag o codice di monitoraggio!

Successivamente, dall’interfaccia di Google Tag Manager potrai creare quanti Tag desideri (Analytics, Google Ads, Facebook, LinkedIn...) senza dover metter mai mano al codice e senza avere conoscenze specifiche di programmazione

Aumenterai l'efficienza riducendo notevolmente i tempi di inserimento dei tag limitando gli errori di implementazione.

Una volta inseriti i Tag, ti sarà possibile verificarne subito il funzionamento grazie al sistema di Anteprima prima della loro "messa in moto", effettuando all'occorrenza i giusti ritocchi.

Inoltre grazie al caricamento asincrono degli script ti aiuterà anche a evitare rallentamenti nel caricamento delle pagine con ovvi vantaggi dal punto di vista della velocità e del bounce rate.

Elementi di GTM

Una volta fatto il primo accesso a Google Tag Manager, creato il tuo account, definito l'uso che ne vuoi fare (Sito web, applicazioni iOS o Android) e il nome del primo contenitore avrai a che fare con gli elementi che concorrono al funzionamento stesso di GTM.

Vediamone alcuni un po' più nel dettaglio:

Contenitori

E' come lascia intuire la stessa parola, l’ambiente che conterrà tutte le impostazioni dei Tag che verranno creati.

Una volta salvato, gli verrà assegnato un ID che avrà la seguente sintassi GTM-XXXXXX, salvo che al posto delle "X" vi sarà un codice alfanumerico univoco .

A questo punto sarà possibile cominciare a lavorarvi all'interno, gestendone le Aree di Lavoro, gli Ambienti, i Tag, gli Attivatori, le Variabili ed altro ancora.

All'interno dello stesso account, si può cancellare, modificare o creare più contenitori. Ognuno di essi potrà essere gestito separatamente, all'occorrenza anche da altri utenti da noi autorizzati.

Una volta salvato il contenitore, vi si potrà cominciare a creare all'interno i Tag che corrispondono alle nostre esigenze.

Tag

E' come già accennato il codice che viene fisicamente eseguito nelle pagine web.

Il Tag è responsabile dell'invio delle informazioni dal sito web sul quale è implementato ai sistemi di analisi e monitoraggio da noi utilizzati (ad es. Google Analytics).

Per poter funzionare, il Tag deve essere obbligatoriamente associato ad un Attivatore, in quanto viene eseguito solo quando si verifica l’evento in esso definito (trigger).

L’Attivatore stabilisce anche le condizioni da rispettare affinché il Tag possa essere attivato. Si possono definire tanti tipi di evento quante sono le esigenze di analisi dell'utente.
Eventi che possono determinare un Attivatore sono ad esempio la visita ad una pagina, un click su un particolare link, il tempo di permanenza sulla pagina da parte dell'utente ed altro ancora.

Il Tag, può inoltre contenere Variabili e/o Costanti che ne modificano il comportamento.

Variabili e Costanti

Le variabili sono elementi in grado di contenere valori che variano in base agli eventi: la scelta di un utente, un elemento sul quale si è fatto click, etc.

Google Tag Manager consente di definire due tipi di variabili:

  1. Variabili integrate, predefinite, sono semplicemente da attivare, un po' come fossero un interrutore on/off
  2. Variabili personalizzate, cioé create e definite dall'utente.

Le costanti invece, sono elementi che contengono valori che come ne lascia intuire il nome non mutano. Sono generalmente definite dall'utente.
Un esempio è la creazione di una costante contenente il codice univoco di Google Analytics.

Prossimamente:

Ora che sappiamo qualcosa in più su questo strumento, nel prossimo articolo su Google Tag Manager, affronteremo come creare un account GTM e... successivamente come gestire con esso:

  1. Google Analytics: installare e gestire GA.
  2. Google Ads: gestire il monitoraggio delle conversioni e il Tag di Remarketing.
Se hai gradito l'articolo, condividilo, basta un click:

Integrare WhatsApp Sharing Button Generator in una pagina HTML

Categoria: HTML Creato: Venerdì, 27 Settembre 2019 Scritto da Daniele Gagliardi

WhatsApp Sharing Button GeneratorIn questo articolo vedremo come integrare in un sito web statico un social button per condividere via WhatsApp il link della pagina dove questo si trova. 

Per farlo, ci serviremo di un plugin javascript: WhatsApp Sharing Button Generator

Nell'integrarlo nel vostro sito web, tenete conto che la condivisione su WhatsApp è attualmente supportata da iOS e Android. Questo plugin individuerà la piattaforma sulla quale la pagina verrà visualizzata e mostrerà il pulsante solo sui dispositivi compatibili.
Ciò vuol dire che se visualizzerete una pagina del vostro sito dalla finestra di un browser su un qualsiasi PC Windows, il pulsante non verrà mostrato. Al contrario, sarà visibile su telefoni e tablet Android o Apple.

Per integrare il plugin in un sito scritto in codice HTML, il processo sarà semplice:

Se cliccate sul link, verrete reindirizzati alla pagina di github di WhatsApp Sharing Button Generator

Basterà seguire i 5 semplici passaggi che sono elencati nella pagina del plugin per avere il pulsante di condivisione WhatsApp sulle pagine del vostro sito laddove ne integrerete il codice. 

Procuriamoci il necessario

Prima di iniziare, vi dovete munire di due strumenti fondamentali: Un client FTP come Filezilla e un editor di testi come Notepad++ entrambi opensource e gratuiti.

Potrebbe interessarti:

Configurare un client FTP

Fatto? bene. Dopo aver configurato il client FTP per accedere al vostro spazio web, individuate le pagine che volete integrino il pulsante WhatsApp Sharing. Scaricatele sul vostro PC in una cartella temporanea.

Ora aprite le vostre pagine con il vostro editor di testi per poterle modificare una per una.

Integrare il pulsante WhatsApp Sharing Button Generator

Sulla pagina del plugin, vi viene chiesto al punto 2 di configurare il vostro pulsante, cioé come volete che esso sia visualizzato sul vostro sito. Le opzioni sono 4 in tutto, vediamole una per una:

  • button size o dimensione del pulsante
  • button text o l'etichetta che verrà visualizzata come testo del bottone ad esempio "Condividi"
  • sharing text o meglio dire, il testo che precederà il link che verrà condiviso ad esempio "Guarda questo articolo"
  • custom url, current page url, si riferisce al link della pagina da condividere. Nel caso di un sito statico, selezionate custom url e incollate nella casella di testo apposita il link esatto alla vostra pagina html.

Arrivati fin qui, al punto 3 verrà generato il codice HTML del vostro pulsante. Sarà solo da copiare ed incollare il codice HTML all'interno della vostra pagina nel punto corrispondente ove desiderate che il pulsante appaia.

// HTML CODE
 0  <a href="whatsapp://send" data-text="Take a look at this awesome website:" data-href="vostro-url" class="wa_b  tn wa_btn_s" style="display:none">Share</a> 

Il punto 4, sarà scaricare il codice sorgente e gli script necessari a far funzionare il pulsante. Una volta scaricati sul proprio PC, scompattati in una cartella temporanea, andranno necessariamente uplodati sul server in una cartella interna allo spazio web che ospita il vostro website.

Per ultimo, dobbiamo fare in modo che la pagina sappia dove andare a prelevare lo script necessario a dar vita al pulsante che abbiamo integrato grazie al codice prima riportato al punto 3.

Per fare questo, basterà copiare e incollare il codice al punto 5 tra i tag <body> della vostra pagina HTML, magari prima del pulsante stesso. Ecco il codice esempio:

// JS CODE
 0  <script type="text/javascript">if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="url/to/your/button/whatsapp-button.js";h.appendChild(s);}</script> 

Dove al posto di "url/to/your/button/whatsapp-button.js", andrà inserito il percorso allo script javascript whatsapp-button.js che avete precedentemente caricato sul vostro server grazie al client FTP.

Ora resta solo da testarne il funzionamento... e se non dovesse funzionare... beh... sarà il caso di passare punto per punto e verificare quale dei passi elencati non avete completato a dovere...

Di solito ciò che si sbaglia sono proprio i percorsi ai file js... Quindi in caso di mancato funzionamento non disperate ed inziate a verificarne la correttezza.

Se hai gradito l'articolo, condividilo, basta un click:

Prima di andartene...

Perché non rimanere in contatto?

Clicca sul pulsante "Mi piace" qui sotto per rimanere aggiornato su tutti i nuovi contenuti e ricevere notifica degli articoli interessanti che condivido giornalmente sulla Pagina Facebook dedicata al blog.

Puoi anche iscriverti alla newsletter e al nuovo canale YouTube di blog.dangerx82 così da rimanere sempre aggiornato sui nuovi contenuti...

x

Per essere più facile ed intuitivo, il blog fa uso dei cookie, piccole porzioni di dati che consentono di capire come gli utenti navighino e ne visualizzino le pagine. I cookie non registrano alcuna informazione personale sull'utente ed eventuali dati identificabili non verranno memorizzati. Ti invitiamo a prendere visione della nostra Informativa sulla Privacy (aggiornata il 25/05/2020). Oppure visiona la nostra Cookie Policy (aggiornata il 17/10/2019):