Easy template include and arrangeFields on global Google fields

apostrophecms · Mar 13, 2018 · b0ff2f0 · b0ff2f0
1 parent a8bef72
commit b0ff2f0
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 47 deletions.
diff --git a/README.md b/README.md
@@ -34,61 +34,28 @@ module.exports = {
 };
 ```
 
-Add the following to `layout.html` that all of your pages extend, or to `outerLayout.html` if you have one in `apostrophe-templates/views/`.
-
-```nunjucks
-{% if data.piece %}
-  {% if data.piece.seoTitle %}
-    {% set title = data.piece.seoTitle %}
-  {% else %}
-    {% set title = data.piece.title %}
-  {% endif %}
-{% else %}
-  {% if data.page.seoTitle %}
-    {% set title = data.page.seoTitle %}
-  {% else %}
-    {% set title = data.page.title %}
-  {% endif %}
-{% endif %}
+If you would like to configure additional fields to allow an editor to add a Google Analytics tracking ID and a Google site verification ID you can do so by setting `seoGoogleFields: true` in `apostrophe-global` in your project.
 
-{% block title %}{{ title }}{% endblock %}
+Add the following include to your `<head></head>` in `layout.html` that all of your pages extend, or to `outerLayout.html` if you have one in `apostrophe-templates/views/`. This will output the meta tags needed for SEO and Google Analytics/Verification configuration.
 
+```nunjucks
 {% block extraHead %}
   {% if data.piece %}
-    {% if data.piece.seoDescription %}
-      {% set description = data.piece.seoDescription %}
+    {% if data.piece.seoTitle %}
+      {% set title = data.piece.seoTitle %}
+    {% else %}
+      {% set title = data.piece.title %}
     {% endif %}
   {% else %}
-    {% if data.page.seoDescription %}
-      {% set description = data.page.seoDescription %}
+    {% if data.page.seoTitle %}
+      {% set title = data.page.seoTitle %}
+    {% else %}
+      {% set title = data.page.title %}
     {% endif %}
   {% endif %}
-  {% if data.piece.seoDescription or
-        data.page.seoDescription %}
-    <meta name="description" content="{{ description }}" />
-  {% endif %}
-{% endblock %}
-```
-
-If you would like to configure additional fields to allow an editor to add a Google Analytics tracking ID and a Google site verification ID you can do so by setting `seoGoogleFields: true` in `apostrophe-global` in your project.
 
-Add the following to `layout.html` that all of your pages extend, or to `outerLayout.html` if you have one in `apostrophe-templates/views/` to add configurable Google Analytics and Google site verification.
+  {% block title %}{{ title }}{% endblock %}
 
-```nunjucks
-  {% block extraHead %}
-    {% if data.global.seoGoogleVerificationId %}
-      <meta name="google-site-verification" content="{{ data.global.seoGoogleVerificationId }}" />
-    {% endif %}
-
-    {% if data.global.seoGoogleTrackingId %}
-     <!-- Global site tag (gtag.js) - Google Analytics -->
-     <script async src="https://www.googletagmanager.com/gtag/js?id={{ data.global.seoGoogleTrackingId }}"></script>
-     <script>
-       window.dataLayer = window.dataLayer || [];
-       function gtag(){dataLayer.push(arguments);}
-       gtag('js', new Date());
-       gtag('config', '{{ data.global.seoGoogleTrackingId }}');
-     </script>
-   {% endif %}
-  {% endblock %}
+  {% include "apostrophe-seo:view.html" %}
+{% endblock %}
 ```
diff --git a/lib/modules/apostrophe-seo-global/index.js b/lib/modules/apostrophe-seo-global/index.js
@@ -17,5 +17,16 @@ module.exports = {
       }
     ] : [];
     options.addFields = options.addFields.concat(seoGoogleFields || []);
+
+    options.arrangeFields = [
+      {
+        name: 'seoGoogleIds',
+        label: 'Google IDs',
+        fields: [
+          'seoGoogleTrackingId',
+          'seoGoogleVerificationId'
+        ]
+      }
+    ].concat(options.arrangeFields || []);
   }
 };
diff --git a/views/view.html b/views/view.html
@@ -0,0 +1,28 @@
+{% if data.piece %}
+  {% if data.piece.seoDescription %}
+    {% set seoDescription = data.piece.seoDescription %}
+  {% endif %}
+{% else %}
+  {% if data.page.seoDescription %}
+    {% set seoDescription = data.page.seoDescription %}
+  {% endif %}
+{% endif %}
+{% if data.piece.seoDescription or
+      data.page.seoDescription %}
+  <meta name="description" content="{{ seoDescription }}" />
+{% endif %}
+
+{% if data.global.seoGoogleVerificationId %}
+<meta name="google-site-verification" content="{{ data.global.seoGoogleVerificationId }}" />
+{% endif %}
+
+{% if data.global.seoGoogleTrackingId %}
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ data.global.seoGoogleTrackingId }}"></script>
+<script>
+ window.dataLayer = window.dataLayer || [];
+ function gtag(){dataLayer.push(arguments);}
+ gtag('js', new Date());
+ gtag('config', '{{ data.global.seoGoogleTrackingId }}');
+</script>
+{% endif %}