{"id":1239,"date":"2020-04-11T03:39:55","date_gmt":"2020-04-11T03:39:55","guid":{"rendered":"http:\/\/luisrodriguez.pe\/blog\/?p=1239"},"modified":"2020-04-11T21:12:10","modified_gmt":"2020-04-11T21:12:10","slug":"como-crear-template-en-google-tag-manager","status":"publish","type":"post","link":"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/","title":{"rendered":"C\u00f3mo crear Template en Google Tag Manager"},"content":{"rendered":"\n<p><strong>Google Tag Manager<\/strong> nos permite crear una <strong>plantillas \/<\/strong> <strong>template <\/strong>  <strong> <\/strong>que nos ayuda para realizar tareas repetitivas y poder tener una interfaz donde personas que sin necesidad de saber c\u00f3digos  podr\u00e1n crear tag f\u00e1cilmente.<\/p>\n\n\n\n<p><strong>Google Tag Manager<\/strong> brinda un editor  para crear un interfaz (formulario) y tambi\u00e9n una secci\u00f3n donde podremos ingresar javascript con funciones propias. <\/p>\n\n\n\n<p>La lista de API&#8217;S tienen disponibles documentaci\u00f3n en el siguiente link.   <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><a href=\"https:\/\/developers.google.com\/tag-manager\/templates\/api#injectscript\">https:\/\/developers.google.com\/tag-manager\/<\/a><a href=\"https:\/\/developers.google.com\/tag-manager\/templates\/api\">templates<\/a><a href=\"https:\/\/developers.google.com\/tag-manager\/templates\/api#injectscript\">\/api<\/a> <\/p><\/blockquote>\n\n\n\n<p>Seg\u00fan las funciones disponibles estamos muy restringidos pero existe una funci\u00f3n que considero que nos podr\u00eda ayudar mucho <a href=\"https:\/\/developers.google.com\/tag-manager\/templates\/api#injectscript\">injectScript<\/a> en poder utilizar JS externos donde estos si podr\u00edan utilizar todo los beneficios del javascript.<\/p>\n\n\n\n<p>El editor de plantillas tiene pasos para configurarlo<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"694\" height=\"157\" src=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-3.png\" alt=\"\" class=\"wp-image-1272\" srcset=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-3.png 694w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-3-300x68.png 300w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-3-600x136.png 600w\" sizes=\"(max-width: 694px) 100vw, 694px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Info \/ Informaci\u00f3n<br><\/strong>Ingresamos el nombre, descripci\u00f3n e imagen que le asignaremos al nuevo tag que crearemos. <\/li><li><strong>Fields \/ Campos<br><\/strong>el asistente que nos ayuda crear un formulario con una disposici\u00f3n de varios componentes. <\/li><li><strong>Code \/ C\u00f3digo<br><\/strong>Tenemos un Campo donde nos permite ingresar codigo fuente con las funciones disponibles (API)<\/li><li><strong>Permissions \/ Permisos<br><\/strong>los permisos se actualizan automaticamente segun la API que utilicemos (en algunos casos es necesario ingresar o seleccionar valores)<\/li><li><strong>Test \/ Pruebas<\/strong><br>podemos simular la ejecuci\u00f3n del formulario generado.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Ejemplo practico de crear template<\/h2>\n\n\n\n<p>En este ejemplo crearemos una  <strong>template <\/strong>  que nos ayudar\u00eda a controlar el horario que se muestran la opci\u00f3n de conversar por whatsapp en la pagina web .<\/p>\n\n\n\n<p>a continuaci\u00f3n realizaremos los pasos mencionados.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Info \/ Informaci\u00f3n<\/h3>\n\n\n\n<p>Ingresamos datos b\u00e1sicos de nuestro nuevo <strong>template <\/strong>que creamos<br>Nombre, Descripci\u00f3n e icono (libres en poner cualquier nombre)<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"736\" height=\"518\" src=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-2.png\" alt=\"\" class=\"wp-image-1269\" srcset=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-2.png 736w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-2-300x211.png 300w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-2-600x422.png 600w\" sizes=\"(max-width: 736px) 100vw, 736px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Fields \/ Campos<\/h3>\n\n\n\n<p>En esta parte con el asistente crearemos una interfaz con los componentes que ya nos ofrece tagmanager<\/p>\n\n\n\n<p>Presionamos el bot\u00f3n de \u00abA\u00f1adir campo\u00bb y como vamos a hacer configuraci\u00f3n para desktop y mobile (en un caso real es poco probable que se tengan distintos horarios para desktop y mobile pero lo usaremos en este ejemplo para utilizar mas componentes) necesitamos agrupar y tenemos un componente para realizarlo \u00abGrupo\u00bb.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"770\" height=\"798\" src=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-5.png\" alt=\"\" class=\"wp-image-1275\" srcset=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-5.png 770w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-5-289x300.png 289w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-5-768x796.png 768w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-5-600x622.png 600w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/figure><\/div>\n\n\n\n<p>Ingresamos los valores y el primer input es el nombre del componente que asignamos (valor interno), Estilo de grupo seleccionamos el valor de que este abierto ya que es como un accordion, Nombre visible es lo que el usuario visualiza<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"945\" height=\"291\" src=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-9.png\" alt=\"\" class=\"wp-image-1279\" srcset=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-9.png 945w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-9-300x92.png 300w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-9-768x236.png 768w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-9-600x185.png 600w\" sizes=\"(max-width: 945px) 100vw, 945px\" \/><\/figure><\/div>\n\n\n\n<p>al final de este formulario nos muestra un bot\u00f3n \u00abA\u00f1adir campo\u00bb que nos permite ingresar un nuevo compotente, tengamos en cuenta que hasta ahora solo agregamos un contenedor que agrupa y ahora agregaremos un select para ingresar los rangos de horarios<\/p>\n\n\n\n<p>cuando presionamos el bot\u00f3n \u00abA\u00f1adir campo\u00bb seleccionamos<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"93\" src=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-10.png\" alt=\"\" class=\"wp-image-1280\" srcset=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-10.png 663w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-10-300x42.png 300w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-10-600x84.png 600w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure><\/div>\n\n\n\n<p>cuando agregamos el componente nos vamos a la tuerca que muestra al lado derecho y activamos \u00abValor predeterminado\u00bb para poder iniciar el select con un valor por defecto.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"721\" src=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-12-1024x721.png\" alt=\"\" class=\"wp-image-1282\" srcset=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-12-1024x721.png 1024w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-12-300x211.png 300w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-12-768x541.png 768w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-12-600x423.png 600w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-12.png 1248w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Agregamos un nombre al componente en mi caso es desktop_horario y luego debemos a\u00f1adir los option del select para ello presionamos <strong>\u00abA\u00f1adir elemento de men\u00fa\u00bb<\/strong> y nos pedira 2 valores como cualquier option, el texto que se muestra y el value que es el valor interno.<\/p>\n\n\n\n<p>como se ve agrego 3 rangos de horarios que se va mostrar en el select. Al final nos pide un nombre del label que tendra el select y el valor por defecto ingresamos el value de alguno de nuestros opcion que creamos. Para el ejemplo coloque el valor 3 que es 09:00 AM a 06:00 PM<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"740\" src=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-11.png\" alt=\"\" class=\"wp-image-1281\" srcset=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-11.png 662w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-11-268x300.png 268w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-11-600x671.png 600w\" sizes=\"(max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>Ya terminamos para desktop ahora continuamos con mobile y como b\u00e1sicamente sera lo mismo podemos utilizar la opci\u00f3n de duplicar <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"946\" height=\"406\" src=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-13.png\" alt=\"\" class=\"wp-image-1285\" srcset=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-13.png 946w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-13-300x129.png 300w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-13-768x330.png 768w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-13-600x258.png 600w\" sizes=\"(max-width: 946px) 100vw, 946px\" \/><\/figure><\/div>\n\n\n\n<p>y modificamos los nombres y deber\u00eda que dar algo as\u00ed.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"921\" height=\"460\" src=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-14.png\" alt=\"\" class=\"wp-image-1286\" srcset=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-14.png 921w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-14-300x150.png 300w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-14-768x384.png 768w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-14-600x300.png 600w\" sizes=\"(max-width: 921px) 100vw, 921px\" \/><\/figure><\/div>\n\n\n\n<p>con esto ya terminamos la parte de configuraci\u00f3n de campos, al lado derecho nos muestra una la vista previa de como queda el formulario<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"883\" height=\"644\" src=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-15.png\" alt=\"\" class=\"wp-image-1287\" srcset=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-15.png 883w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-15-300x219.png 300w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-15-768x560.png 768w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-15-600x438.png 600w\" sizes=\"(max-width: 883px) 100vw, 883px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Code \/ C\u00f3digo<\/h3>\n\n\n\n<p>el c\u00f3digo lo dejare comentado en detalle <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ incluimos las api's que utilizaremos\n\n\/\/esta api la misma funcionalidad que el console.log\nconst log = require('logToConsole');  \n\/\/esta api va hacer el llamado a otro js\nconst injectScript = require('injectScript'); \n\/\/esta api sirve para saber si la url tiene permisos\nconst query = require('queryPermission');  \n\n\/\/data es una variable que nos trae toda la data insertada en formulario que realizamos y \n\/\/nos retorna un JSON\nlog('data =', data); \n\n\/\/seteamos la variable donde tenemos nuestro php para ejecutar script en el lado del servidor y combinando con javascript\nconst URLBackEnd = 'https:\/\/luisrodriguez.pe\/gtm_template\/horarios.php';\n\/\/concatenamos y enviamos por GET las variables\nconst url =URLBackEnd+\"?mobile_horario=\"+data.mobile_horario+\"&amp;desktop_horario=\"+data.desktop_horario;\n\n\/\/creamos 2 funciones que ser\u00e1n necesarias para pasarle a la api injectScript \n\/\/es necesario que sea uno en caso exitoso o un error.\nfunction Success(){\n  log('ok');\n  data.gtmOnSuccess();\n} \nfunction Failure(){\n  log('error');\n  data.gtmOnFailure();\n} \n\n\/\/la api queryPermission nos sirve para consultar si la url tiene permiso \n\/\/si para que la url tenga permiso en el tag permisos se coloca la url del dominio \n\/\/donde esta alojado el php \nif (query('inject_script',url)){\n   log('se ejecuto JS: '+url);\n   \/\/la api injectScript va ejecutar la url que indiquemos\n   injectScript(url,Success,Failure);\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"> <strong>Permissions \/ Permisos<\/strong><\/h3>\n\n\n\n<p>despu\u00e9s de insertar el script en esta pesta\u00f1a autom\u00e1ticamente te mostraran los permisos seg\u00fan las API&#8217;S que incluimos.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"965\" height=\"380\" src=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-16.png\" alt=\"\" class=\"wp-image-1291\" srcset=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-16.png 965w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-16-300x118.png 300w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-16-768x302.png 768w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-16-600x236.png 600w\" sizes=\"(max-width: 965px) 100vw, 965px\" \/><\/figure><\/div>\n\n\n\n<p>como se puede ver, solo tenemos  2 permisos y es por la api de  <strong>logToConsole&nbsp; <\/strong>y <strong>injectScript<\/strong>. <\/p>\n\n\n\n<p>dejamos como esta el de  <strong>logToConsole  <\/strong>y solo insertamos  en \u00ab<strong>Inserta secuencias de comandos<\/strong>\u00bb el dominio donde esta alojamos nuestro php que insertamos en el c\u00f3digo. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"239\" src=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-17.png\" alt=\"\" class=\"wp-image-1292\" srcset=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-17.png 650w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-17-300x110.png 300w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-17-600x221.png 600w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/figure><\/div>\n\n\n\n<p>al lado derecho ya podr\u00edamos probar el formulario  ejecut\u00e1ndolo, no hace falta ingresar nada al formulario por que colocamos que tenga data seleccionada por defecto<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"962\" height=\"759\" src=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-18.png\" alt=\"\" class=\"wp-image-1293\" srcset=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-18.png 962w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-18-300x237.png 300w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-18-768x606.png 768w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-18-600x473.png 600w\" sizes=\"(max-width: 962px) 100vw, 962px\" \/><\/figure>\n\n\n\n<p>todo esta corriendo correctamente y tambi\u00e9n nos muestra la url que esta concatenada y lo dejamos en log en el  c\u00f3digo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Capturamos la data en el PHP<\/h2>\n\n\n\n<p>solo debemos capturar los datos que se envian y para hacerlo dinamico  esta parte solo agregamos estas lineas en el php<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$data=$_GET;\n$data=json_encode($data);  \necho $data;<\/code><\/pre>\n\n\n\n<p>y podremos ver lo todo el GET que se envia<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"258\" height=\"119\" src=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-19.png\" alt=\"\" class=\"wp-image-1294\"\/><\/figure><\/div>\n\n\n\n<p>como  <strong>injectScript  <\/strong>inserta <strong>javascript <\/strong>debemos hacer que nuestro <strong>php <\/strong>ejecute <strong>javascript <\/strong>y esto es simple y al script que ya tenemos  podemos agregar las siguientes lineas.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php \nheader('Content-Type: application\/javascript');\n$data=$_GET;  \n$data=json_encode($data);   \n?> \nvar whatsapp  = {\n    data:&lt;?php echo $data?> \n}\nconsole.log(whatsapp.data)\n<\/code><\/pre>\n\n\n\n<p>al ejecutar esto en el navegador nos responder\u00e1 as\u00ed<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"533\" height=\"149\" src=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-20.png\" alt=\"\" class=\"wp-image-1296\" srcset=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-20.png 533w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-20-300x84.png 300w\" sizes=\"(max-width: 533px) 100vw, 533px\" \/><\/figure><\/div>\n\n\n\n<p>ahora ese script lo podemos ejecutar y tenemos.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"539\" height=\"135\" src=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-21.png\" alt=\"\" class=\"wp-image-1297\" srcset=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-21.png 539w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-21-300x75.png 300w\" sizes=\"(max-width: 539px) 100vw, 539px\" \/><\/figure>\n\n\n\n<p>entonces podemos utilizar script del lado del servidor y cliente. <\/p>\n\n\n\n<p>En este script deber\u00edas programar un bot\u00f3n y seg\u00fan  la opci\u00f3n seleccionada mostrar en los horarios correctos  dicho bot\u00f3n en la web, pero como este articulo no se trata de programaci\u00f3n no se realizara esa parte. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfC\u00f3mo usarlo?<\/h2>\n\n\n\n<p> cuando tengamos listo  el  <strong>template <\/strong> ya lo tendremos disponible cuando nos dirijamos a crear nuevos tag.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"439\" height=\"368\" src=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-22.png\" alt=\"\" class=\"wp-image-1298\" srcset=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-22.png 439w, https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/image-22-300x251.png 300w\" sizes=\"(max-width: 439px) 100vw, 439px\" \/><\/figure><\/div>\n\n\n\n<p>Esta es una forma en que puedes usar <strong>template <\/strong>y aprovechar los beneficios que nos brinda  <strong>injectScript  <\/strong>y  revisando la documentaci\u00f3n de las API&#8217;s podr\u00e1s abrir tus horizontes para lograr m\u00e1s cosas. <\/p>\n","protected":false},"excerpt":{"rendered":"Google Tag Manager nos permite crear una plantillas \/ template que nos ayuda para realizar tareas repetitivas y poder tener una interfaz donde personas que sin necesidad de saber c\u00f3digos podr\u00e1n crear tag f\u00e1cilmente. Google Tag Manager brinda un editor para crear un interfaz (formulario) y tambi\u00e9n una secci\u00f3n donde podremos ingresar javascript con funciones[&#8230;]","protected":false},"author":1,"featured_media":1267,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[196],"tags":[197,194,192,195],"class_list":["post-1239","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-tag-manager","tag-google-tag-manager","tag-gtm","tag-tagmanager","tag-template"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>C\u00f3mo crear Template en Google Tag Manager<\/title>\n<meta name=\"description\" content=\"Nos ayuda para realizar tareas repetitivas y poder tener una interfaz donde personas que sin necesidad de saber c\u00f3digos podr\u00e1n crear tag f\u00e1cilmente.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo crear Template en Google Tag Manager\" \/>\n<meta property=\"og:description\" content=\"Nos ayuda para realizar tareas repetitivas y poder tener una interfaz donde personas que sin necesidad de saber c\u00f3digos podr\u00e1n crear tag f\u00e1cilmente.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Luis Rodriguez\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/luisrodriguez.pe\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-11T03:39:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-11T21:12:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/template-tagmanager-e1585782024923.png\" \/>\n\t<meta property=\"og:image:width\" content=\"651\" \/>\n\t<meta property=\"og:image:height\" content=\"240\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Luis Rodriguez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@luizmirodriguez\" \/>\n<meta name=\"twitter:site\" content=\"@luizmirodriguez\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Luis Rodriguez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/\"},\"author\":{\"name\":\"Luis Rodriguez\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\"},\"headline\":\"C\u00f3mo crear Template en Google Tag Manager\",\"datePublished\":\"2020-04-11T03:39:55+00:00\",\"dateModified\":\"2020-04-11T21:12:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/\"},\"wordCount\":944,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/template-tagmanager-e1585782024923.png\",\"keywords\":[\"Google Tag Manager\",\"GTM\",\"tagmanager\",\"template\"],\"articleSection\":[\"Google Tag Manager\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/\",\"name\":\"C\u00f3mo crear Template en Google Tag Manager\",\"isPartOf\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/template-tagmanager-e1585782024923.png\",\"datePublished\":\"2020-04-11T03:39:55+00:00\",\"dateModified\":\"2020-04-11T21:12:10+00:00\",\"author\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\"},\"description\":\"Nos ayuda para realizar tareas repetitivas y poder tener una interfaz donde personas que sin necesidad de saber c\u00f3digos podr\u00e1n crear tag f\u00e1cilmente.\",\"breadcrumb\":{\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/#primaryimage\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/template-tagmanager-e1585782024923.png\",\"contentUrl\":\"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/template-tagmanager-e1585782024923.png\",\"width\":651,\"height\":240},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/luisrodriguez.pe\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo crear Template en Google Tag Manager\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#website\",\"url\":\"https:\/\/luisrodriguez.pe\/blog\/\",\"name\":\"Blog Luis Rodriguez\",\"description\":\"Analytics Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/luisrodriguez.pe\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c\",\"name\":\"Luis Rodriguez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g\",\"caption\":\"Luis Rodriguez\"},\"description\":\"Hola, Soy Luis Rodriguez, radico en Lima \u2013 Per\u00fa, formado en una carrera inform\u00e1tica, desempe\u00f1ando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi inter\u00e9s en la Anal\u00edtica Web me ayud\u00f3 mucho entender el funcionamiento interno de las herramientas de anal\u00edtica, con las que vengo trabajo activamente desde 2017. Linkedin\",\"sameAs\":[\"http:\/\/luisrodriguez.pe\"],\"url\":\"https:\/\/luisrodriguez.pe\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo crear Template en Google Tag Manager","description":"Nos ayuda para realizar tareas repetitivas y poder tener una interfaz donde personas que sin necesidad de saber c\u00f3digos podr\u00e1n crear tag f\u00e1cilmente.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo crear Template en Google Tag Manager","og_description":"Nos ayuda para realizar tareas repetitivas y poder tener una interfaz donde personas que sin necesidad de saber c\u00f3digos podr\u00e1n crear tag f\u00e1cilmente.","og_url":"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/","og_site_name":"Blog Luis Rodriguez","article_publisher":"https:\/\/www.facebook.com\/luisrodriguez.pe","article_published_time":"2020-04-11T03:39:55+00:00","article_modified_time":"2020-04-11T21:12:10+00:00","og_image":[{"width":651,"height":240,"url":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/template-tagmanager-e1585782024923.png","type":"image\/png"}],"author":"Luis Rodriguez","twitter_card":"summary_large_image","twitter_creator":"@luizmirodriguez","twitter_site":"@luizmirodriguez","twitter_misc":{"Escrito por":"Luis Rodriguez","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/#article","isPartOf":{"@id":"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/"},"author":{"name":"Luis Rodriguez","@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c"},"headline":"C\u00f3mo crear Template en Google Tag Manager","datePublished":"2020-04-11T03:39:55+00:00","dateModified":"2020-04-11T21:12:10+00:00","mainEntityOfPage":{"@id":"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/"},"wordCount":944,"commentCount":0,"image":{"@id":"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/#primaryimage"},"thumbnailUrl":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/template-tagmanager-e1585782024923.png","keywords":["Google Tag Manager","GTM","tagmanager","template"],"articleSection":["Google Tag Manager"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/","url":"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/","name":"C\u00f3mo crear Template en Google Tag Manager","isPartOf":{"@id":"https:\/\/luisrodriguez.pe\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/#primaryimage"},"image":{"@id":"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/#primaryimage"},"thumbnailUrl":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/template-tagmanager-e1585782024923.png","datePublished":"2020-04-11T03:39:55+00:00","dateModified":"2020-04-11T21:12:10+00:00","author":{"@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c"},"description":"Nos ayuda para realizar tareas repetitivas y poder tener una interfaz donde personas que sin necesidad de saber c\u00f3digos podr\u00e1n crear tag f\u00e1cilmente.","breadcrumb":{"@id":"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/#primaryimage","url":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/template-tagmanager-e1585782024923.png","contentUrl":"https:\/\/luisrodriguez.pe\/blog\/wp-content\/uploads\/2020\/04\/template-tagmanager-e1585782024923.png","width":651,"height":240},{"@type":"BreadcrumbList","@id":"https:\/\/luisrodriguez.pe\/blog\/como-crear-template-en-google-tag-manager\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/luisrodriguez.pe\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo crear Template en Google Tag Manager"}]},{"@type":"WebSite","@id":"https:\/\/luisrodriguez.pe\/blog\/#website","url":"https:\/\/luisrodriguez.pe\/blog\/","name":"Blog Luis Rodriguez","description":"Analytics Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/luisrodriguez.pe\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/luisrodriguez.pe\/blog\/#\/schema\/person\/ec55de81e01fdaf3533eb78f6a49090c","name":"Luis Rodriguez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3b0f9734b267ecb38e1860734b4caebda4efa8be9a2bb536862b6a2ba23afa82?s=96&d=mm&r=g","caption":"Luis Rodriguez"},"description":"Hola, Soy Luis Rodriguez, radico en Lima \u2013 Per\u00fa, formado en una carrera inform\u00e1tica, desempe\u00f1ando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi inter\u00e9s en la Anal\u00edtica Web me ayud\u00f3 mucho entender el funcionamiento interno de las herramientas de anal\u00edtica, con las que vengo trabajo activamente desde 2017. Linkedin","sameAs":["http:\/\/luisrodriguez.pe"],"url":"https:\/\/luisrodriguez.pe\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/1239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/comments?post=1239"}],"version-history":[{"count":24,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/1239\/revisions"}],"predecessor-version":[{"id":1305,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/posts\/1239\/revisions\/1305"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/media\/1267"}],"wp:attachment":[{"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/media?parent=1239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/categories?post=1239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/luisrodriguez.pe\/blog\/wp-json\/wp\/v2\/tags?post=1239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}