Add ability to add trackers

studio1902 · Sep 9, 2020 · 1126e12 · 1126e12
1 parent c820192
commit 1126e12
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -228,13 +228,15 @@ Peak includes full SEO support. It's easy to expand on since it's al built with
 * Auto generated hreflang tags on localized sites.
 * Add knowledge graph data (organization, person or custom).
 * Auto generated optional JSON-ld breadcrumbs.
+* Add trackers: Google Analytics, Google Tag Manager, Site Verification or Fathom.
 
 [Screenshot global](https://studio1902.ams3.cdn.digitaloceanspaces.com/assets/statamic-peak/screenshots/peak-seo-01.png) | [Screenshot per entry](https://studio1902.ams3.cdn.digitaloceanspaces.com/assets/statamic-peak/screenshots/peak-seo-02.png) | [Screenshot per entry](https://studio1902.ams3.cdn.digitaloceanspaces.com/assets/statamic-peak/screenshots/peak-seo-03.png)
 
 ### Disable SEO features
 
 If you plan on using an addon for SEO and Peak's built in features, do the following:
 * Remove `{{ partial:snippets/seo }}` from `resources/views/layout.antlers.html`.
+* Remove `{{ yield:google_tag_manager }}` from `resources/views/layout.antlers.html`.
 * Remove the SEO section and import from `resources/blueprints/collections/pages/page.yaml`.
 * Delete the SEO global `content/globals/seo.yaml`.
 

diff --git a/content/globals/seo.yaml b/content/globals/seo.yaml
@@ -1 +1,12 @@
-title: SEO
+title: SEO
+data:
+  json_ld_type: none
+  breadcrumbs: false
+  sitemap_collections:
+    - pages
+  use_google_site_verification: false
+  use_google_analytics: false
+  anonymize_ip: false
+  use_google_tag_manager: true
+  google_tag_manager: CRAPFACE
+  use_fathom: false
diff --git a/resources/blueprints/globals/seo.yaml b/resources/blueprints/globals/seo.yaml
@@ -139,7 +139,7 @@ sections:
     display: Sitemap
     fields:
       -
-        handle: section_siteamp
+        handle: section_sitemap
         field:
           type: section
           instructions: 'Configure the sitemap.xml'
@@ -154,3 +154,90 @@ sections:
           listable: hidden
           default: pages
           display: Collections
+  trackers:
+    display: Trackers
+    fields:
+      -
+        handle: section_trackers
+        field:
+          type: section
+          instructions: 'Configure trackers and analytics.'
+          listable: false
+          display: Trackers
+      -
+        handle: use_google_site_verification
+        field:
+          type: toggle
+          instructions: 'Add a google-site-verification meta tag to your head.'
+          listable: false
+          display: 'Google site verification'
+      -
+        handle: google_site_verification
+        field: common.title
+        config:
+          width: 66
+          display: 'Verification key'
+          validate:
+            - 'required_if:use_google_site_verification,true'
+          if:
+            use_google_site_verification: 'equals true'
+      -
+        handle: use_google_analytics
+        field:
+          type: toggle
+          instructions: 'Add Google Analytics tracking code to your head (privacy concern).'
+          listable: false
+          display: 'Google Analytics'
+      -
+        handle: google_analytics
+        field: common.title
+        config:
+          width: 66
+          display: 'Tracking ID'
+          validate:
+            - 'required_if:use_google_analytics,true'
+          if:
+            use_google_analytics: 'equals true'
+      -
+        handle: anonymize_ip
+        field:
+          type: toggle
+          width: 33
+          listable: false
+          display: "Anonymize IP's"
+          if:
+            use_google_analytics: 'equals true'
+      -
+        handle: use_google_tag_manager
+        field:
+          type: toggle
+          instructions: 'Add Google Tag Manager tracking code to your head (privacy concern).'
+          listable: false
+          display: 'Google Tag Manager'
+      -
+        handle: google_tag_manager
+        field: common.title
+        config:
+          width: 66
+          display: 'Tracking ID'
+          validate:
+            - 'required_if:use_google_tag_manager,true'
+          if:
+            use_google_tag_manager: 'equals true'
+      -
+        handle: use_fathom
+        field:
+          type: toggle
+          instructions: 'Add Fathom tracking code to your head.'
+          listable: false
+          display: Fathom
+      -
+        handle: fathom
+        field: common.title
+        config:
+          width: 66
+          display: 'Site ID'
+          validate:
+            - 'required_if:use_fathom,true'
+          if:
+            use_fathom: 'equals true'
diff --git a/resources/views/layout.antlers.html b/resources/views/layout.antlers.html
@@ -14,6 +14,7 @@
         x-data="{ mobileNavOpen: false }" 
         :class="{ 'no-scroll': mobileNavOpen }"
     >
+        {{ yield:google_tag_manager }}
         {{ partial:layout/header }}
         {{ template_content }}
         {{ partial:layout/footer }}

diff --git a/resources/views/snippets/_seo.antlers.html b/resources/views/snippets/_seo.antlers.html
@@ -66,7 +66,7 @@
                         "position": {{ count }},
                         "name": "{{ title }}",
                         "item": "{{ permalink }}{{ url }}"
-                    } {{ unless last}},{{ /unless}}
+                    } {{ unless last}},{{ /u nless}}
                 {{ /nav:breadcrumbs }}
             ]
         }
@@ -91,4 +91,39 @@
     <meta property="og:image" content="{{ permalink }}{{ glide:og_image width='1200' height='600' fit='crop_focal' }}">
 {{ elseif seo:og_image }}
     <meta property="og:image" content="{{ permalink }}{{ glide:seo:og_image width='1200' height='600' fit='crop_focal' }}">
+{{ /if }}
+
+{{# Trackers #}}
+{{ if seo:use_google_tag_manager }}
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','{{ seo:google_tag_manager }}');</script>
+{{ /if }}
+
+{{ if seo:use_google_tag_manager }}
+    {{# Yield this section in all your layouts after opening the <body> #}}
+    {{ section:google_tag_manager }}
+        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ seo:google_tag_manager }}" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    {{ /section:google_tag_manager }}
+{{ /if }}
+
+{{ if seo:use_google_site_verification }}
+    <meta name="google-site-verification" content="{{ seo:google_site_verification }}" />
+{{ /if }}
+
+{{ if seo:use_google_analytics }}
+    <script async src="https://www.googletagmanager.com/gtag/js?id={{ seo:google_analytics }}"></script>
+    <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('set', new Date());
+    gtag('config', '{{ seo:google_analytics }}' {{ if seo:anonymize_ip }}, {'anonymize_ip': true}{{ /if }});
+    </script>
+{{ /if }}
+
+{{ if seo:use_fathom }}
+    <script src="https://cdn.usefathom.com/script.js" site="{{ seo:fathom }}" defer></script>
 {{ /if }}