{"id":2006,"date":"2017-08-25T15:07:48","date_gmt":"2017-08-25T12:07:48","guid":{"rendered":"https:\/\/webanalyst.ro\/?p=2006"},"modified":"2017-08-29T13:18:13","modified_gmt":"2017-08-29T10:18:13","slug":"date-structurate-gtm","status":"publish","type":"post","link":"https:\/\/webanalyst.ro\/blog\/2017\/date-structurate-gtm\/","title":{"rendered":"Implementarea de Date Structurate cu Google Tag Manager"},"content":{"rendered":"

Vrei s\u0103 adaugi structured data<\/em> \u00een website-ul t\u0103u \u015fi nu ai acces sau abilit\u0103\u0163ile de programare specifice pentru a implementa acest lucru? Nu trebuie s\u0103 \u00ee\u0163i faci griji, exist\u0103 o solu\u0163ie simpl\u0103 \u015fi elegant\u0103 prin care po\u0163i adauga schema.org markups JSON-LD prin Google Tag Manager.<\/p>\n

Cristian B\u0103l\u0103u<\/strong>, Marketing Specialist la Evonomix, pasionat de SEO \u015fi content marketing ne va explica \u00een tutorialul de mai jos cum s\u0103 facem acest lucru.<\/p>\n

<\/p>\n

Ce sunt Structured Data<\/h2>\n

Datele structurate sau Schema.org Structure Data<\/em> sunt elemente specifice dintr-un vocabular de tag-uri care pot fi ad\u0103ugate \u00een HTML-ul unei pagini pentru a ajuta motoarele de c\u0103utare s\u0103 \u00een\u0163eleag\u0103 mai bine con\u0163inutul oferit \u00een aceea pagin\u0103. Exemplu:<\/p>\n

\"\"<\/p>\n

Cele mai mari motoare de c\u0103utare (Google, Bing, Yahoo \u015fi Yandex) au convenit \u00eempreun\u0103 asupra acestui vocabular pentru a \u00een\u0163elege mai bine con\u0163inutul paginilor \u015fi pentru a furniza utilizatorilor cele mai relevante rezultate \u00een func\u0163ie de c\u0103utarea f\u0103cut\u0103. C\u00e2nd ad\u0103ug\u0103m elemente Schema.org \u00een HTML-ul unei pagini avem ocazia s\u0103 \u00eembun\u0103t\u0103\u0163im \u015fi felul \u00een care pagin\u0103 noastr\u0103 este afi\u015fat\u0103 \u00een Search Engine Result Pages (SERPs) prin ad\u0103ugarea de rich snippets<\/em>, elemente care apar sub title tag-ul unei pagini \u00een motoarele de c\u0103utare, cum se poate vedea \u00een exemplul de la \u00eenceputul articolului.<\/p>\n

Importan\u0163a implement\u0103rii datelor structurate a crescut \u00een ultimii ani \u00een domeniul SEO, odat\u0103 cu introducerea lor \u00een 2011 \u015fi lansarea<\/a> schema.org.<\/p>\n

Ce este Tag Manager<\/h2>\n

Google Tag Manager este o solu\u0163ie gratuit\u0103 \u015fi un serviciu Google pentru management-ul tag-urilor de Javascrip \u015fi HTML folosite \u00een tracking-ul tool-urilor de analytics, marketing, SEO dar \u015fi implementarea de tag-uri custom. Nu este nevoie s\u0103 avem cuno\u015ftin\u0163e avansate de programare s\u0103 folosim Google Tag Manager. Se implementeaz\u0103 u\u015for urm\u0103rind\u00a0indica\u0163iile<\/a>.<\/p>\n

Trebuie s\u0103 \u00een\u0163elegem c\u0103 \u00een timp ce website-ul nostru cre\u015fte \u015fi se dezvolt\u0103 apar tot mai multe tag-uri de tracking, iar prin administrarea lor manual\u0103 (direct \u00een cod) irosim resurse \u015fi timp care poate fi folosit rezolv\u00e2nd probleme mai importante. Pe acest site exist\u0103 o sec\u021biune de articole despre GTM<\/a>.<\/p>\n

Google Tag Manager ne ofer\u0103 posibilitatea de a implementa tag-uri de Schema.org<\/strong> f\u0103r\u0103 a fi nevoie de cuno\u015ftin\u0163e avansate de programare sau s\u0103 fim pu\u015fi \u00een situa\u0163ia \u00een care trebuie s\u0103 mut\u0103m un astfel de task unui programator ocupat. Acest lucru ofer\u0103 o libertate nea\u015fteptat\u0103 speciali\u015ftilor din marketing care pot implementa \u015fi testa diferite markp-uri de date structurate precum \u015fi efectul acestor \u00een motoarele de c\u0103utare.<\/p>\n

\u00cen tutorialul de mai jos am s\u0103 detaliez procesul prin care pute\u0163i adaug\u0103 date structurate prin formatul JSON-LD \u00eentr-un website folosind doar Google Tag Manager.<\/p>\n

Tutorial<\/h2>\n
    \n
  1. Crearea unui markup JSON-LD<\/strong><\/li>\n<\/ol>\n

    Dac\u0103 nu ai cuno\u015ftin\u0163e avansate de programare JSON-LD nu trebuie s\u0103 te descurajezi, exist\u0103 un tool pe schemaapp.com care te va ajut\u0103 s\u0103 creezi \u015fi s\u0103 generezi markup-uri foarte detaliate de JSON-LD. G\u0103sim aici<\/a> un generator complet.<\/p>\n

    Tot ce trebuie s\u0103 faci este s\u0103 completezi c\u00e2mpurile de propiet\u0103\u0163i pentru fiecare markup pe care \u00eel dore\u015fti implementat \u00een website-ul t\u0103u (nu toate se aplic\u0103, unele din ele fiind op\u0163ionale) \u015fi s\u0103 copiezi codul generat.<\/p>\n

    \"\"<\/p>\n

      \n
    1. Crearea unui nou tag HTML in Google Tag Manager<\/strong><\/li>\n<\/ol>\n

      Trebuie s\u0103 cre\u0103m un nou tag HTML prin click pe butonul \u201eNew\u201d. \u00cei d\u0103m un nume descriptiv precum \u201eOrganizare Schema Markups\u201d.<\/p>\n

        \n
      1. Copierea codului JSON-LD<\/strong><\/li>\n<\/ol>\n

        Copiem codul generat pe schemaapp.com \u00een c\u00e2mpul de custom HTML din Google Tag Manager:<\/p>\n

        \"\"<\/p>\n

          \n
        1. Crearea un nou trigger pentru \u201ePage View\u201d<\/strong><\/li>\n<\/ol>\n

          Din zona de Triggering, select\u0103m All Pages, un trigger deja existent \u00een Google Tag Manager.<\/p>\n

            \n
          1. Salvarea tag-ului de custom HTML<\/strong><\/li>\n<\/ol>\n

            Ap\u0103s\u0103m buton-ul albastru de \u201eSave\u201d din col\u0163ul top dreapta al paginii. Pentru c\u0103 am inclus trigger-ul \u00een pasul 4 nu trebuie s\u0103 primim nici o notificare. Noul Tag HTML o s\u0103 apar\u0103 \u00een lista de tag-uri.<\/p>\n

              \n
            1. Publicarea<\/strong><\/li>\n<\/ol>\n

              Trebuie s\u0103 public\u0103m noul container prin ap\u0103sarea butonului albastru \u201eSubmit\u201d din col\u0163ul dreapta al paginii.\u00a0<\/strong><\/p>\n

                \n
              1. Testarea markup-ului<\/strong><\/li>\n<\/ol>\n

                Folosim Google Structured Data Testing Tool pentru a ne asigura c\u0103 implement\u0103rile sunt valide.<\/p>\n

                \"\"<\/p>\n

                Limit\u0103ri<\/h2>\n

                Personal, am descoperit c\u0103 schemaapp.com este un tool foarte complex pentru care exist\u0103 o oarecare curb\u0103 de \u00eenv\u0103\u0163are \u015fi, de multe ori, pentru anumite markup-uri trebuie s\u0103 \u015fti exact ce c\u00e2mpuri s\u0103 completezi \u015fi cum s\u0103 le completezi prin studierea dic\u0163ionarului schema.org, \u00een caz contrar vei ob\u0163ine coduri de markup cu erori sau pur \u015fi simplu incomplete, Google nu o s\u0103 aprecieze acest lucru \u015fi va marca toate aceste erori \u00een Search Console la categoria Search Appearance -> Structure Data.<\/p>\n

                Dar pentru implement\u0103ri cu markup-uri de baz\u0103 v\u0103 recomand o alternativ\u0103<\/a> la schemaapp.com. Cu doar 6 markup-uri principale \u0219i cu mai pu\u0163ine c\u00e2mpuri de completat, acest generator este perfect pentru speciali\u015ftii care nu au mai avut p\u00e2n\u0103 acum experien\u0163\u0103 \u00een implementarea de markp-uri JSON-LD cu Google Tag Manager.<\/p>\n

                Cele 6 categorii de markup-uri sunt oferite de acest instrument sunt:<\/strong><\/p>\n