{"id":10604,"date":"2024-11-14T17:40:53","date_gmt":"2024-11-14T17:40:53","guid":{"rendered":"https:\/\/ceowebltd.com\/blog\/?p=10604"},"modified":"2024-11-14T17:40:53","modified_gmt":"2024-11-14T17:40:53","slug":"how-to-use-css-selectors-to-create-triggers-in-google-tag-manager","status":"publish","type":"post","link":"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/","title":{"rendered":"How to use CSS selectors to create triggers in Google Tag Manager"},"content":{"rendered":"<div class=\"flex max-w-full flex-col flex-grow\">\n<div class=\"min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"38398613-6d49-4734-b7c5-add4eb1f1c8f\" data-message-model-slug=\"gpt-4o-mini\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[3px]\">\n<div class=\"markdown prose w-full break-words dark:prose-invert dark\">\n<p>CSS selectors are a powerful way to target specific elements on a webpage. In Google Tag Manager (GTM), you can use CSS selectors to create triggers that activate tags when specific elements on your site are clicked, viewed, or interacted with. Using CSS selectors for triggers allows you to track user actions on a page without needing to modify your site\u2019s code.<\/p>\n<p>This guide will walk you through the steps to use CSS selectors to create triggers in Google Tag Manager.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_73 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 Content\"><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-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/#Benefits_of_Using_CSS_Selectors_in_GTM\" title=\"Benefits of Using CSS Selectors in GTM\">Benefits of Using CSS Selectors in GTM<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/#Steps_to_Use_CSS_Selectors_to_Create_Triggers_in_Google_Tag_Manager\" title=\"Steps to Use CSS Selectors to Create Triggers in Google Tag Manager\">Steps to Use CSS Selectors to Create Triggers in Google Tag Manager<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/#Step_1_Identify_the_Element_You_Want_to_Track\" title=\"Step 1: Identify the Element You Want to Track\">Step 1: Identify the Element You Want to Track<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/#Step_2_Create_a_Trigger_Using_the_CSS_Selector\" title=\"Step 2: Create a Trigger Using the CSS Selector\">Step 2: Create a Trigger Using the CSS Selector<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/#Step_3_Create_a_Tag_to_Fire_with_the_Trigger\" title=\"Step 3: Create a Tag to Fire with the Trigger\">Step 3: Create a Tag to Fire with the Trigger<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/#Step_4_Test_Your_Trigger_and_Tag\" title=\"Step 4: Test Your Trigger and Tag\">Step 4: Test Your Trigger and Tag<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/#Step_5_Publish_the_Container\" title=\"Step 5: Publish the Container\">Step 5: Publish the Container<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/#Advanced_Use_of_CSS_Selectors_in_GTM\" title=\"Advanced Use of CSS Selectors in GTM\">Advanced Use of CSS Selectors in GTM<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Benefits_of_Using_CSS_Selectors_in_GTM\"><\/span>Benefits of Using CSS Selectors in GTM<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><strong>No Code Changes Required<\/strong>: You don&#8217;t need to modify your website&#8217;s HTML or JavaScript code.<\/li>\n<li><strong>Target Specific Elements<\/strong>: Allows you to track user interactions with specific elements like buttons, links, forms, or images.<\/li>\n<li><strong>Flexible<\/strong>: CSS selectors offer a wide range of ways to select elements based on classes, IDs, attributes, or even pseudo-classes like <code>:hover<\/code>.<\/li>\n<li><strong>Powerful Customization<\/strong>: With CSS selectors, you can create highly specific triggers for tracking complex user behaviors.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Steps_to_Use_CSS_Selectors_to_Create_Triggers_in_Google_Tag_Manager\"><\/span>Steps to Use CSS Selectors to Create Triggers in Google Tag Manager<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4><span class=\"ez-toc-section\" id=\"Step_1_Identify_the_Element_You_Want_to_Track\"><\/span>Step 1: Identify the Element You Want to Track<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>The first step in using CSS selectors for triggers is to identify the element you want to track. This could be any clickable or interactive element on your webpage, such as:<\/p>\n<ul>\n<li>Buttons<\/li>\n<li>Links<\/li>\n<li>Images<\/li>\n<li>Form submissions<\/li>\n<li>Navigation items<\/li>\n<\/ul>\n<p>You will need to inspect the HTML of your webpage to find the CSS selector for the target element.<\/p>\n<ol>\n<li><strong>Inspect the Element<\/strong>:\n<ul>\n<li>Right-click on the element you want to track on your website and choose <strong>Inspect<\/strong> (or <strong>Inspect Element<\/strong> in some browsers).<\/li>\n<li>In the Developer Tools panel, locate the HTML code for the element.<\/li>\n<li>Note the <strong>CSS class<\/strong>, <strong>ID<\/strong>, <strong>attribute<\/strong>, or other unique identifiers that can be used to target the element.<\/li>\n<\/ul>\n<p>Example HTML for a button:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center select-none py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"cta-button\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"submitButton\"<\/span> <span class=\"hljs-attr\">data-category<\/span>=<span class=\"hljs-string\">\"signup\"<\/span>&gt;<\/span>Sign Up<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<p>For this example, you could target the button using:<\/p>\n<ul>\n<li><code>#submitButton<\/code> (ID selector)<\/li>\n<li><code>.cta-button<\/code> (Class selector)<\/li>\n<li><code>[data-category=\"signup\"]<\/code> (Attribute selector)<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h4><span class=\"ez-toc-section\" id=\"Step_2_Create_a_Trigger_Using_the_CSS_Selector\"><\/span>Step 2: Create a Trigger Using the CSS Selector<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Now that you&#8217;ve identified the element, you can create a trigger in GTM that fires when a user interacts with that element. We&#8217;ll walk through setting up a <strong>Click Trigger<\/strong> using a CSS selector.<\/p>\n<ol>\n<li><strong>Log into Google Tag Manager<\/strong>:\n<ul>\n<li>Go to your <a href=\"https:\/\/tagmanager.google.com\" target=\"_new\" rel=\"noopener\">Google Tag Manager account<\/a> and select the container you want to configure.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Create a New Trigger<\/strong>:\n<ul>\n<li>Go to the <strong>Triggers<\/strong> section in GTM and click <strong>New<\/strong> to create a new trigger.<\/li>\n<li>Choose the <strong>Trigger Type<\/strong>. For this example, we\u2019ll use <strong>Click \u2013 All Elements<\/strong> (for tracking clicks on elements like buttons, links, etc.).<\/li>\n<\/ul>\n<\/li>\n<li><strong>Configure the Trigger<\/strong>:\n<ul>\n<li>Under <strong>This trigger fires on<\/strong>, select <strong>Some Clicks<\/strong> to ensure that the trigger fires only on specific clicks.<\/li>\n<li>Set up the <strong>conditions<\/strong> for the trigger. This is where you will use the CSS selector.\n<p>For example:<\/p>\n<ul>\n<li><strong>Click Element<\/strong> matches CSS selector <code>#submitButton<\/code> (ID selector for the button).<\/li>\n<li>Alternatively, if you&#8217;re using a class, you might use <code>Click Element<\/code> matches CSS selector <code>.cta-button<\/code>.<\/li>\n<\/ul>\n<p>The condition can also be based on attributes, like:<\/p>\n<ul>\n<li><code>Click Element<\/code> matches CSS selector <code>[data-category=\"signup\"]<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Here&#8217;s an example of a trigger condition for a button with the ID <code>submitButton<\/code>:<\/p>\n<ul>\n<li><strong>Click Element<\/strong> matches CSS selector <code>#submitButton<\/code>.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Save the Trigger<\/strong>:\n<ul>\n<li>After configuring the trigger, click <strong>Save<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h4><span class=\"ez-toc-section\" id=\"Step_3_Create_a_Tag_to_Fire_with_the_Trigger\"><\/span>Step 3: Create a Tag to Fire with the Trigger<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Once you have set up the trigger using the CSS selector, you&#8217;ll need to create a tag that will fire when the trigger condition is met.<\/p>\n<ol>\n<li><strong>Create a New Tag<\/strong>:\n<ul>\n<li>Go to the <strong>Tags<\/strong> section in GTM and click <strong>New<\/strong>.<\/li>\n<li>Select the tag type you want to use (e.g., <strong>Google Analytics \u2013 Universal Analytics<\/strong>, <strong>GA4 Event<\/strong>, or <strong>Custom HTML<\/strong>).<\/li>\n<\/ul>\n<\/li>\n<li><strong>Configure the Tag<\/strong>:\n<ul>\n<li>Set up the tag according to what you want to track. For example:\n<ul>\n<li><strong>Google Analytics \u2013 Universal Analytics<\/strong>: Choose the Track Type (e.g., Event) and set the <strong>Category<\/strong>, <strong>Action<\/strong>, and <strong>Label<\/strong>.<\/li>\n<li><strong>GA4 Event Tag<\/strong>: Set the event name and parameters.<\/li>\n<\/ul>\n<\/li>\n<li>Choose the <strong>Trigger<\/strong> you created in the previous step. This will ensure that the tag fires when the specified element is clicked.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Save the Tag<\/strong>:\n<ul>\n<li>Click <strong>Save<\/strong> to store the tag.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h4><span class=\"ez-toc-section\" id=\"Step_4_Test_Your_Trigger_and_Tag\"><\/span>Step 4: Test Your Trigger and Tag<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Before publishing your changes, it&#8217;s essential to test that your trigger and tag work correctly.<\/p>\n<ol>\n<li><strong>Enable Preview Mode<\/strong>:\n<ul>\n<li>In GTM, click on the <strong>Preview<\/strong> button. This opens a preview mode, where you can test the changes on your live site without publishing them.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Test the Trigger<\/strong>:\n<ul>\n<li>Open your website in a new tab (with Preview mode enabled).<\/li>\n<li>Click on the element that you&#8217;re tracking (e.g., the button or link).<\/li>\n<li>In the GTM preview mode, verify that the trigger fires correctly, and that the tag is activated.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Debug the Implementation<\/strong>:\n<ul>\n<li>If the trigger doesn&#8217;t fire, double-check the CSS selector you used. Ensure the selector accurately targets the element.<\/li>\n<li>You can use GTM\u2019s <strong>Variables<\/strong> feature to capture the <code>Click Element<\/code> and see what element is being triggered.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Check in Google Analytics<\/strong>:\n<ul>\n<li>If you&#8217;re sending data to Google Analytics, go to <strong>Real-Time &gt; Events<\/strong> and verify that the event appears when you click the element.<\/li>\n<li>For GA4, check <strong>Real-Time &gt; Events<\/strong> or <strong>Engagement &gt; Events<\/strong> to confirm that your event is being tracked.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h4><span class=\"ez-toc-section\" id=\"Step_5_Publish_the_Container\"><\/span>Step 5: Publish the Container<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Once you&#8217;re confident that the trigger and tag are working correctly, you can publish the container.<\/p>\n<ul>\n<li>Go to the <strong>Versions<\/strong> section in GTM and click <strong>Submit<\/strong> to publish the changes.<\/li>\n<li>Provide a version description (e.g., \u201cAdded click trigger for signup button\u201d).<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Advanced_Use_of_CSS_Selectors_in_GTM\"><\/span>Advanced Use of CSS Selectors in GTM<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li><strong>Using Multiple Conditions<\/strong>:\n<ul>\n<li>You can combine multiple CSS selectors using <strong>OR<\/strong> conditions in GTM. For example, you can set a trigger to fire when any of the following happens:\n<ul>\n<li><strong>Click Element<\/strong> matches CSS selector <code>.cta-button<\/code><\/li>\n<li><strong>Click Element<\/strong> matches CSS selector <code>.signup-button<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><strong>Targeting Nested Elements<\/strong>:\n<ul>\n<li>Use more specific selectors to target nested elements. For instance, if you&#8217;re tracking clicks on a button inside a <code>div<\/code>, use a selector like:\n<ul>\n<li><code>div .cta-button<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><strong>Using Pseudo-Classes<\/strong>:\n<ul>\n<li>You can use pseudo-classes like <code>:hover<\/code> or <code>:focus<\/code> to track interactions with elements in specific states (e.g., when a button is hovered).\n<ul>\n<li>Example: <code>button.cta-button:hover<\/code> (fires when the button is hovered).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><strong>Track Dynamic Content<\/strong>:\n<ul>\n<li>If your website uses dynamically generated content (e.g., loaded via JavaScript), you might need to set up <strong>DOM Element<\/strong> variables in GTM to capture those dynamic elements.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Using CSS selectors to create triggers in Google Tag Manager is a highly effective way to track user interactions on your site without requiring code changes. By identifying the right elements on your page and targeting them with CSS selectors, you can create highly customized and flexible triggers for actions such as clicks, form submissions, or other user interactions. This setup can provide you with rich insights into user engagement, helping to optimize the user experience and achieve your business goals.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"mb-2 flex gap-3 empty:hidden -ml-2\">\n<div class=\"items-center justify-start rounded-xl p-1 flex\">\n<div class=\"flex items-center\"><button class=\"rounded-lg text-token-text-secondary hover:bg-token-main-surface-secondary\" aria-label=\"Copy\" data-testid=\"copy-turn-action-button\"><\/button><\/p>\n<div class=\"flex\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>CSS selectors are a powerful way to target specific elements on a webpage. In Google Tag Manager (GTM), you can use CSS selectors to create&#8230;<\/p>\n","protected":false},"author":214,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-10604","post","type-post","status-publish","format-standard","hentry","category-digital-marketing"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to use CSS selectors to create triggers in Google Tag Manager - CEOweb Ltd. Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use CSS selectors to create triggers in Google Tag Manager - CEOweb Ltd. Blog\" \/>\n<meta property=\"og:description\" content=\"CSS selectors are a powerful way to target specific elements on a webpage. In Google Tag Manager (GTM), you can use CSS selectors to create...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/\" \/>\n<meta property=\"og:site_name\" content=\"CEOweb Ltd. Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-14T17:40:53+00:00\" \/>\n<meta name=\"author\" content=\"Emmanuel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Emmanuel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/\",\"url\":\"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/\",\"name\":\"How to use CSS selectors to create triggers in Google Tag Manager - CEOweb Ltd. Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/#website\"},\"datePublished\":\"2024-11-14T17:40:53+00:00\",\"dateModified\":\"2024-11-14T17:40:53+00:00\",\"author\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f\"},\"breadcrumb\":{\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ceowebltd.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use CSS selectors to create triggers in Google Tag Manager\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/#website\",\"url\":\"https:\/\/ceowebltd.com\/blog\/\",\"name\":\"CEOweb Ltd. Blog\",\"description\":\"Guest Posting - Digital Marketing &amp; Web Services\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ceowebltd.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f\",\"name\":\"Emmanuel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9e883d40261b9b272de51992551b3eec4df631b7579a4fbec69c36a006dcbaf2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9e883d40261b9b272de51992551b3eec4df631b7579a4fbec69c36a006dcbaf2?s=96&d=mm&r=g\",\"caption\":\"Emmanuel\"},\"url\":\"https:\/\/ceowebltd.com\/blog\/author\/emmanuel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use CSS selectors to create triggers in Google Tag Manager - CEOweb Ltd. Blog","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:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/","og_locale":"en_US","og_type":"article","og_title":"How to use CSS selectors to create triggers in Google Tag Manager - CEOweb Ltd. Blog","og_description":"CSS selectors are a powerful way to target specific elements on a webpage. In Google Tag Manager (GTM), you can use CSS selectors to create...","og_url":"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/","og_site_name":"CEOweb Ltd. Blog","article_published_time":"2024-11-14T17:40:53+00:00","author":"Emmanuel","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Emmanuel","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/","url":"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/","name":"How to use CSS selectors to create triggers in Google Tag Manager - CEOweb Ltd. Blog","isPartOf":{"@id":"https:\/\/ceowebltd.com\/blog\/#website"},"datePublished":"2024-11-14T17:40:53+00:00","dateModified":"2024-11-14T17:40:53+00:00","author":{"@id":"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f"},"breadcrumb":{"@id":"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ceowebltd.com\/blog\/how-to-use-css-selectors-to-create-triggers-in-google-tag-manager\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ceowebltd.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to use CSS selectors to create triggers in Google Tag Manager"}]},{"@type":"WebSite","@id":"https:\/\/ceowebltd.com\/blog\/#website","url":"https:\/\/ceowebltd.com\/blog\/","name":"CEOweb Ltd. Blog","description":"Guest Posting - Digital Marketing &amp; Web Services","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ceowebltd.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/4759c204c0b0f1d134ec16e8ec777a6f","name":"Emmanuel","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ceowebltd.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9e883d40261b9b272de51992551b3eec4df631b7579a4fbec69c36a006dcbaf2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9e883d40261b9b272de51992551b3eec4df631b7579a4fbec69c36a006dcbaf2?s=96&d=mm&r=g","caption":"Emmanuel"},"url":"https:\/\/ceowebltd.com\/blog\/author\/emmanuel\/"}]}},"_links":{"self":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10604","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/users\/214"}],"replies":[{"embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/comments?post=10604"}],"version-history":[{"count":1,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10604\/revisions"}],"predecessor-version":[{"id":10605,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/posts\/10604\/revisions\/10605"}],"wp:attachment":[{"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/media?parent=10604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/categories?post=10604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ceowebltd.com\/blog\/wp-json\/wp\/v2\/tags?post=10604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}