{"id":20572,"date":"2018-07-11T06:23:05","date_gmt":"2018-07-11T06:23:05","guid":{"rendered":"https:\/\/www.geotelecom.mx\/?p=20572"},"modified":"2023-09-27T14:27:26","modified_gmt":"2023-09-27T12:27:26","slug":"google-tag-manager-insercion-simple-codigo","status":"publish","type":"post","link":"https:\/\/www.geotelecom.mx\/en\/blog\/google-tag-manager-insertion-simple-code\/","title":{"rendered":"Google Tag Manager: How to simplify the insertion of code on your website"},"content":{"rendered":"<p style=\"text-align: justify;\">In the digital world we live in, technological innovation is advancing so fast that conventional commerce has moved to digital commerce. If you have been one of the first to jump on the bandwagon and you have a <em>e-commerce<\/em> or are you familiar with the world of <strong>Web analytics<\/strong>the <strong><em>marketing<\/em><\/strong> <strong>digital<\/strong> or the <strong>CRO<\/strong>Google Analytics and Google Adwords are two of the most useful tools offered by Google to better manage your business and advertising campaigns.<\/p><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Contents\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.geotelecom.mx\/en\/blog\/google-tag-manager-insertion-simple-code\/#%C2%BFQue_es_Google_Tag_Manager\" >What is Google Tag Manager?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.geotelecom.mx\/en\/blog\/google-tag-manager-insertion-simple-code\/#%C2%BFCuales_son_las_ventajas_de_Google_Tag_Manager\" >What are the advantages of Google Tag Manager?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.geotelecom.mx\/en\/blog\/google-tag-manager-insertion-simple-code\/#%C2%BFComo_puedo_instalar_Google_Tag_Manager_en_mi_sitio_Web\" >How can I install Google Tag Manager on my website?<\/a><\/li><\/ul><\/nav><\/div>\n\n<p style=\"text-align: justify;\">With these two tools you can keep track of all the interactions on your Web site: number of visitors, duration of visits, number of forms sent, etc. But in order to use these tools, it goes without saying that a previous installation is required.<\/p>\n<p style=\"text-align: justify;\">If you are not a programmer, you may be wondering. <strong>\"How can I install <\/strong>these<strong> codes on my Web site?<\/strong><strong>\".<\/strong> If you don't want to depend on developers and don't want to get involved in technical aspects such as FTP servers, integrated development environments, manual modifications of templates and HTML files, or having to meticulously study the operation of your <em>workframe<\/em> and take the risk of modifying what you shouldn't every time you need to update or insert a <em>script<\/em>Google Tag Manager is your best ally!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_Google_Tag_Manager\"><\/span>What is Google Tag Manager?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">Google Tag Manager is a \u00a0<strong>Tag Management Systems<\/strong>\u00a0(TMS), i.e., a <strong>label management tool<\/strong> Google provides for the implementation of tracking tags and conversions on your website.<\/p>\n<p style=\"text-align: justify;\">To be more clear, it is a container in which you can group and manage campaign tracking tags, code snippets or other scripts that you need to implement on your website. <strong>without<\/strong> have to <strong>manually modify the source code<\/strong>.<\/p>\n<p style=\"text-align: justify;\">Interesting, isn't it? Well, there's more.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFCuales_son_las_ventajas_de_Google_Tag_Manager\"><\/span>What are the advantages of Google Tag Manager?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"noresize aligncenter wp-image-20573\" title=\"Google Tag Manager Logo\" src=\"https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/Google-Tag-Manager.png\" alt=\"Google Tag Manager Logo\" width=\"293\" height=\"171\" srcset=\"https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/Google-Tag-Manager.png 856w, https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/Google-Tag-Manager-300x175.png 300w, https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/Google-Tag-Manager-768x449.png 768w\" sizes=\"(max-width: 293px) 100vw, 293px\" \/><\/p>\n<p style=\"text-align: justify;\">The main advantage of this label manager is the <strong>independence and autonomy<\/strong> that it offers with respect to the Web development department. But in addition to this great advantage, it offers many others:<\/p>\n<ul style=\"text-align: justify;\">\n<li><strong>Centralized tag management and code cleanup<\/strong>While previously the tags were inserted one by one in the source code of the page, with the implementation of GTM you will only need to insert the container code and you will be able to manage all the tags from its interface.<\/li>\n<li><strong>Increased performance<\/strong>: The <em>scritps<\/em> of the analysis tools we use will be loaded externally through the GTM's own tool on the server, without increasing the source code and, therefore, <strong>will slow down the loading speed<\/strong> This directly affects the user experience and SEO itself.<\/li>\n<li><strong>Easy integration<\/strong> with other Google tools.<\/li>\n<li><strong>Progressive migration: <\/strong>Installing GTM for tag management in your Web does not imply its exclusive use, that is, tags inserted in the conventional way can coexist with tags inserted through GTM without generating incompatibilities (WARNING! this applies as long as there is no duplication of codes, because if we insert Google Analytics in the conventional way and, later, we introduce a UA tag through GTM, it will collect the data in duplicate).<\/li>\n<li><strong>Easy testing and verification of tag operation:<\/strong> Since it has a <em>preview<\/em> in which we can check if the tags are activated on the desired page, before publishing them.<\/li>\n<li><strong>Version control: <\/strong>That is, if we modify our tags and make a mistake, we can always go back and recover the configuration of any version we have previously saved.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\"><img decoding=\"async\" class=\"noresize alignnone wp-image-20588\" src=\"https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/warning.png\" alt=\"Achtung\" width=\"17\" height=\"17\" srcset=\"https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/warning.png 256w, https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/warning-150x150.png 150w\" sizes=\"(max-width: 17px) 100vw, 17px\" \/>\u00a0 However, it must be taken into account that, although it is true that it offers independence from developers at a basic level, at more advanced levels, where you work with variables extracted from the Web itself, you will need the help of a programmer.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFComo_puedo_instalar_Google_Tag_Manager_en_mi_sitio_Web\"><\/span>How can I install Google Tag Manager on my website?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">If we have chosen to use this tool to manage the tags on our Web site, it is time to know how to install it. The installation process consists of the following <u>steps<\/u>:<\/p>\n<ol>\n<li style=\"text-align: justify;\">Create an account on <a href=\"https:\/\/tagmanager.google.com\/\">Google Tag Manager<\/a> with your Google email.<\/li>\n<li>Create an account and a container for your Web site.\n<ol>\n<li style=\"text-align: justify;\">From <strong>All accounts<\/strong>click on <strong>New account <\/strong>and set the account name:<img decoding=\"async\" class=\"noresize wp-image-20583 aligncenter\" title=\"GTM account setup\" src=\"https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/GTM-configurar-cuenta.png\" alt=\"GTM account setup\" width=\"343\" height=\"226\" srcset=\"https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/GTM-configurar-cuenta.png 508w, https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/GTM-configurar-cuenta-300x198.png 300w\" sizes=\"(max-width: 343px) 100vw, 343px\" \/><\/li>\n<li style=\"text-align: justify;\">It is convenient to use a descriptive name for the account, and, for the container configuration, the domain name and the type of device on which the container is to be applied. Generally, the option <strong>web type.<\/strong><strong><img loading=\"lazy\" decoding=\"async\" class=\"noresize aligncenter wp-image-20584\" title=\"GTM configure container\" src=\"https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/GTM-configurar-contenedor.png\" alt=\"GTM configure container\" width=\"434\" height=\"149\" srcset=\"https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/GTM-configurar-contenedor.png 643w, https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/GTM-configurar-contenedor-300x103.png 300w\" sizes=\"(max-width: 434px) 100vw, 434px\" \/><\/strong><\/li>\n<\/ol>\n<\/li>\n<li style=\"text-align: justify;\">Two code snippets will be automatically generated and displayed in a pop-up window:<img loading=\"lazy\" decoding=\"async\" class=\"noresize aligncenter wp-image-20593\" title=\"GTM codes\" src=\"https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/GTM-codigos-1.png\" alt=\"GTM codes\" width=\"725\" height=\"345\" srcset=\"https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/GTM-codigos-1.png 878w, https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/GTM-codigos-1-300x143.png 300w, https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/GTM-codigos-1-768x366.png 768w\" sizes=\"(max-width: 725px) 100vw, 725px\" \/><\/li>\n<li style=\"text-align: justify;\">We insert the code snippets in the appropriate places. To do this we can either contact the developer, or we can do the insertion ourselves. In the case of choosing the second option, we will open the file in which the HTML code is generated from the <em>header<\/em> of our Web (header.php of the theme that is being used in the case of using WordPress).<\/li>\n<\/ol>\n<p style=\"text-align: justify;\">The first code snippet will be inserted just as high as possible before the closing tag &lt;\/head&gt;. Within the same document, we look for the opening tag of the &lt;body&gt; and insert the second code fragment right after it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"noresize aligncenter wp-image-20579\" title=\"GTM code insertion in header\" src=\"https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/GTM-insercion-de-codigos-en-header.png\" alt=\"GTM code insertion in header\" width=\"732\" height=\"412\" srcset=\"https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/GTM-insercion-de-codigos-en-header.png 1152w, https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/GTM-insercion-de-codigos-en-header-300x169.png 300w, https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/GTM-insercion-de-codigos-en-header-1024x576.png 1024w, https:\/\/www.geotelecom.mx\/wp-content\/uploads\/2018\/07\/GTM-insercion-de-codigos-en-header-768x432.png 768w\" sizes=\"(max-width: 732px) 100vw, 732px\" \/><\/p>\n<ol start=\"5\">\n<li style=\"text-align: justify;\">Once the code has been inserted, we save the document and update the file on our FTP server (creating a backup copy to be able to revert changes if there are any errors).<\/li>\n<\/ol>\n<p style=\"text-align: justify;\">NOTE: This will be the <strong>single manual gearbox<\/strong> that we should do <strong>about the source code<\/strong>.<\/p>\n<ol style=\"text-align: justify;\" start=\"6\">\n<li>Once the GTM code is installed in your header.php file, we can check if it works correctly with the help of the <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/tag-assistant-by-google\/kejbdjndbnbjgmefkgdddjlbokphdefk?hl=es-419\">Google Chrome Tag Assistant extension<\/a>.<\/li>\n<\/ol>\n<p style=\"text-align: justify;\">If when you activate the extension and load the page it detects the GTM tag but displays it in yellow and returns error 404, don't be alarmed. It means that it is correctly installed but no version has been published to the container yet. As soon as you add a tag and publish the changes, everything will be working correctly and you will start seeing data in your AdWords and Analytics accounts.<\/p>\n<p style=\"text-align: justify;\">If you managed to install GTM following our little guide and want to know how to insert the Google Analytics tracking code, there will be a post about it soon, so stay tuned to our blog and, if you have any questions, <a href=\"https:\/\/www.geotelecom.mx\/en\/contact-2\/\">do not hesitate to contact us!<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>In the digital world in which we live, technological innovation is advancing so rapidly that conventional commerce has moved to digital commerce. If you have been one of the first to jump on the bandwagon and have an e-commerce or are familiar with the world of Web analytics, digital marketing or CRO, you will know that two of the most useful tools offered by Google to better manage your business and advertising campaigns are Google Analytics and Google Adwords.\nThrough these two tools you can keep track of all the interactions on your website: number of visitors, duration of visits, number of forms submitted, etc. But to be able to use these tools, it goes without saying that a previous installation is required.\nIf you are not a programmer, you may be wondering &quot;How can I install these codes on my Web site? If you don&#039;t want to depend on developers and don&#039;t want to get involved in technical aspects such as FTP servers, integrated development environments, manual modifications of templates and HTML files, or having to meticulously study the operation of your workframe and take the risk of modifying what you shouldn&#039;t every time you need to update or insert a script, Google Tag Manager is your best ally!\nWhat is Google Tag Manager?\nGoogle Tag Manager is a Tag Management System (TMS), i.e. a free tag management tool that Google provides for the implementation of tracking tags and conversions on your website.\nTo be more clear, it is a container in which you can group and manage campaign tracking tags, code snippets or other types of scripts that you need to implement on your website without having to manually modify the source code.\nInteresting, isn&#039;t it? Well, there&#039;s more.\nWhat are the advantages of Google Tag Manager?\n\nThe main advantage of this tag manager is the independence and autonomy it offers with respect to the Web development department. But in addition to this great advantage, it offers many others:\n\n \tCentralized tag management and code cleaning: While previously tags were inserted one by one in the source code of the page, with the implementation of GTM you will only need to insert the code of the container and you can manage all tags from its interface.\n \tIncreased performance: The scritps of the analysis tools we use will be loaded externally through GTM&#039;s own tool on the server, without increasing the source code and, therefore, will slow down the loading speed of the Web -which directly affects the user experience and SEO itself.\n \tEasy integration with other Google tools.\n \tProgressive migration: Installing GTM for tag management on your Web does not imply its exclusive use, i.e., tags inserted in the conventional way can coexist with tags inserted through GTM without generating incompatibilities (WARNING! this applies as long as there is no duplication of codes, because if we insert Google Analytics in the conventional way and, later, we introduce a UA tag through GTM, it will collect data in duplicate).\n \tEasy testing and verification of the operation of the tags: since it has a preview mode in which we can check if the tags are activated on the desired page, before publishing them.\n \tVersion control: That is, if we modify our tags and make a mistake, we can always go back and recover the configuration of any version we have previously saved.\n\n  However, we must take into account that, although it is true that it offers independence from developers at a basic level, at more advanced levels, in which we work with variables extracted from the Web itself, we will need the help of a programmer.\nHow can I install Google Tag Manager on my website?\nIf you have chosen to use this tool to manage tags on your website, it is time to find out how to install it. The installation process consists of the following steps:\n\n \tCreate a Google Tag Manager account with your Google email.\n \tCreate an account and a container for your website.\n\n \tFrom All accounts, click on New account and set up the account name:\n \tIt is convenient to use a descriptive name for the account, and, for the container configuration, the domain name and the type of device on which you want to apply the container. Generally, the web type option is used.\n\n\n \tTwo code snippets will be automatically generated and displayed in a pop-up window:\n \tWe insert the code snippets in the relevant places. To do this we can either contact the developer or do the insertion ourselves. In the case of choosing the second option, we will open the file in which the HTML code of the header of our Web is generated (header.php of the theme that is being used in the case of using Wordpress).\n\nThe first code fragment will be inserted just as high as possible before the closing tag &lt;\/head&gt;. Within the same document, we look for the opening tag of the &lt;body&gt; and insert the second code fragment right after it. Once the code is inserted, we save the document and update the file on our FTP server (creating a backup copy to be able to revert changes if there is any error). NOTE: This will be the only manual change we will have to make on the source code. Once the GTM code is installed in your header.php file, we can check if it works correctly with the help of the Google Chrome Tag Assistant extension. If when you activate the extension and load the page it detects the GTM tag but shows it in yellow and returns error 404, don&#039;t be alarmed. It means that it is correctly installed but no version has been published to the container yet. As soon as you add a tag and publish the changes, everything will be working correctly and you will start seeing data in your AdWords and Analytics accounts. If<\/p>","protected":false},"author":42,"featured_media":20586,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"","footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[39],"tags":[],"class_list":["post-20572","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-herramientas"],"_links":{"self":[{"href":"https:\/\/www.geotelecom.mx\/en\/wp-json\/wp\/v2\/posts\/20572","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.geotelecom.mx\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.geotelecom.mx\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.geotelecom.mx\/en\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/www.geotelecom.mx\/en\/wp-json\/wp\/v2\/comments?post=20572"}],"version-history":[{"count":0,"href":"https:\/\/www.geotelecom.mx\/en\/wp-json\/wp\/v2\/posts\/20572\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.geotelecom.mx\/en\/wp-json\/wp\/v2\/media\/20586"}],"wp:attachment":[{"href":"https:\/\/www.geotelecom.mx\/en\/wp-json\/wp\/v2\/media?parent=20572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.geotelecom.mx\/en\/wp-json\/wp\/v2\/categories?post=20572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.geotelecom.mx\/en\/wp-json\/wp\/v2\/tags?post=20572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}