gatsby-plugin-amp - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

package.json

 {
   "name": "gatsby-plugin-amp",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A gatsby plugin for scaffolding AMP pages",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -79,2 +79,16 @@ # gatsby-plugin-amp
   options: {
+    analytics: {
+      type: 'gtag',
+      dataCredentials: 'include',
+      config: {
+        vars: {
+          gtag_id: <GA_TRACKING_ID>,
+          config: {
+            <GA_TRACKING_ID>: {
+              page_location: '{{pathname}}'
+            },
+          },
+        },
+      },
+    },
     canonicalBaseUrl: 'http://www.example.com/',
@@ -96,2 +110,27 @@ components: ['amp-form'],
 
+**analytics** `{Object}`
+If you want to include any `amp-analytics` tags, set that configuration here.
+
+&nbsp;&nbsp;&nbsp;&nbsp;**type** `{String}`
+&nbsp;&nbsp;&nbsp;&nbsp;Your analytics type. See the list of available vendors [here](https://www.ampproject.org/docs/analytics/analytics-vendors). 
+
+&nbsp;&nbsp;&nbsp;&nbsp;**dataCredentials** `{String}`
+&nbsp;&nbsp;&nbsp;&nbsp;You value for the `data-credentials` attribute. Omit to remove the attribute.
+
+&nbsp;&nbsp;&nbsp;&nbsp;**config** `{Object | String}`
+&nbsp;&nbsp;&nbsp;&nbsp;This can be either an object containing your analytics configuration or a url to your analytics configuration. If you use Google Analytics gtag, your cofiguration might look like this:
+
+```javascript
+vars: {
+  gtag_id: <GA_TRACKING_ID>,
+  config: {
+    <GA_TRACKING_ID>: {
+      page_location: '{{pathname}}'
+    },
+  },
+},
+```
+
+&nbsp;&nbsp;&nbsp;&nbsp; If you use a tag manager, your config would simply be a url like `https://www.googletagmanager.com/amp.json?id=GTM-1234567&amp;gtm.url=SOURCE_URL`. You can use double curly braces to interpolate the pathname into a configuration value e.g. `page_location: '{{pathname}}'`. See [here](https://www.ampproject.org/docs/reference/components/amp-analytics) to learn more about `amp-analytics` configurations.
+
 **canonicalBaseUrl** `{String}`
@@ -106,7 +145,2 @@ The base URL for your site. This will be used to create a `rel="canonical"` link in your amp template and `rel="amphtml"` link in your base page.
 
-**googleTagManager** `{Object}`
-If you use Google Tag Manager, you can use this to set your options. The plugin will include the `amp-analytics` script and create your `amp-analytics` tag. You can read more about `amp-analytics` [here](https://www.ampproject.org/docs/reference/components/amp-analytics)
-&nbsp;&nbsp;&nbsp;&nbsp;**containerId** `{String}`
-&nbsp;&nbsp;&nbsp;&nbsp;Your GTM container ID.
-
 **pathIdentifier** `{String}`
@@ -113,0 +147,0 @@ The url segment which identifies AMP pages. If your regular page is at `http://www.example.com/blog/my-awesome-post` and your AMP page is at `http://www.example.com/amp/blog/my-awesome-post`, your pathIdentifier should be `/amp/`

src/gatsby-ssr.js

@@ -6,2 +6,5 @@ import React, { Fragment } from "react";
 
+const interpolate = (str, map) =>
+  str.replace(/{{\s*[\w\.]+\s*}}/g, match => map[match.replace(/[{}]/g, "")]);
+
 export const onPreRenderHTML = (
@@ -18,6 +21,6 @@ {
   {
+    analytics,
     canonicalBaseUrl,
     components = [],
     excludedPaths = [],
-    googleTagManager,
     pathIdentifier
@@ -57,3 +60,3 @@ }
       )),
-      googleTagManager !== undefined ? (
+      analytics !== undefined ? (
         <script
@@ -91,8 +94,3 @@ async
   { setHeadComponents, setHtmlAttributes, setPreBodyComponents, pathname },
-  {
-    canonicalBaseUrl,
-    googleTagManager,
-    pathIdentifier,
-    useAmpClientIdApi = false
-  }
+  { analytics, canonicalBaseUrl, pathIdentifier, useAmpClientIdApi = false }
 ) => {
@@ -114,9 +112,23 @@ const isAmp = pathname.indexOf(pathIdentifier) > -1;
     setPreBodyComponents([
-      googleTagManager !== undefined ? (
+      analytics != undefined ? (
         <amp-analytics
-          config={`https://www.googletagmanager.com/amp.json?id=${
-            googleTagManager.containerId
-          }&gtm.url=SOURCE_URL`}
-          data-credentials="include"
-        />
+          type={analytics.type}
+          data-credentials={analytics.dataCredentials}
+          config={
+            typeof analytics.config === "string" ? analytics.config : undefined
+          }
+        >
+          {typeof analytics.config === "string" ? (
+            <Fragment />
+          ) : (
+            <script
+              type="application/json"
+              dangerouslySetInnerHTML={{
+                __html: interpolate(JSON.stringify(analytics.config), {
+                  pathname
+                })
+              }}
+            />
+          )}
+        </amp-analytics>
       ) : (
@@ -123,0 +135,0 @@ <Fragment />

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10356

increased by18.93%

Lines of code

133

increased by9.02%

Number of lines in readme file

147

increased by30.09%

No dependency changes