Merge pull request #6 from NYULibraries/feature/target_document

Feature/target document

Author: Elliott Grieco

README.md

@@ -60,6 +60,8 @@ This will add the necessary script tags to the bottom of the `head` of your web
 
 You'll need to configure the module by passing it an object as an angular `constant` named `googleAnalyticsConfig`.
 
+Optionally, you can also use an array of configurations if you need to add multiple tag managers to your page.
+
 #### Required
 | name | type | usage |
 |------|-------------|--------|
@@ -85,7 +87,8 @@ You'll need to configure the module by passing it an object as an angular `const
 | name | type | usage |
 |------|-------------|--------|
 | `externalScriptURL` | `string` |  If you are using an alternative URL, specify the source of the external script that is loaded. Use `null` if you don't want an external script to be loaded (especially for legacy Google Analytics using an `inlineScript`) |
-| `inlineScript` | `string` | Specify the inline script tag to be inserted below the external script tag. ||
+| `inlineScript` | `string` | Specify the inline script tag to be inserted below the external script tag. |
+| `target` | `string` | (default: `'head'`) What element on the document you would like to append the injected script to. E.g. `body`. Uses `document.querySelector` to find the first instance of the element. ||
 
 #### Customization Example
 
@@ -105,7 +108,8 @@ app.constant('googleAnalyticsConfig', {
       ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();
-  `
+  `,
+  target: 'body',
 })
 ```
 output:

src/js/googleAnalytics.module.js

@@ -1,7 +1,7 @@
 import "angulartics";
 import "angulartics-google-tag-manager";
 
-function buildConfig({ externalScriptURL, inlineScript, trackingId }) {
+function buildConfig({ externalScriptURL, inlineScript, trackingId, target }) {
   const defaultCode = `window.dataLayer = window.dataLayer || [];
                           function gtag(){dataLayer.push(arguments);}
                           gtag('js', new Date());
@@ -11,6 +11,7 @@ function buildConfig({ externalScriptURL, inlineScript, trackingId }) {
   return {
     externalSource: externalScriptURL === undefined ? defaultURL : externalScriptURL,
     inlineCode: inlineScript || defaultCode,
+    target: target || 'head',
   };
 }
 
@@ -24,11 +25,11 @@ angular
 
     return ({
       injectGACode: () => {
-        configs.forEach(({ externalSource, inlineCode }) => {
+        configs.forEach(({ externalSource, inlineCode, target }) => {
           if (externalSource !== null) {
             const externalScriptTag = document.createElement('script');
             externalScriptTag.src = externalSource;
-            document.head.appendChild(externalScriptTag);
+            document.querySelector(target).appendChild(externalScriptTag);
           }
 
           const inlineScriptTag = document.createElement('script');
@@ -41,7 +42,7 @@ angular
             inlineScriptTag.text = inlineCode;
           }
 
-          document.head.appendChild(inlineScriptTag);
+          document.querySelector(target).appendChild(inlineScriptTag);
         });
       },
     });

src/spec/googleAnalytics.factory.spec.js

@@ -142,4 +142,35 @@ describe('googleAnalyticsService', () => {
       expect(innerText).toEqual(googleAnalyticsConfigWithNullExternalURL.inlineScript);
     });
   });
+
+  describe('with a defined target', () => {
+    beforeEach(module('googleAnalytics', ($provide) => {
+      $provide.constant('googleAnalyticsConfig', Object.assign({}, googleAnalyticsConfigWithDefaults, { target: 'body' }));
+    }));
+
+    let gaInjectionService;
+    beforeEach(inject((_gaInjectionService_) => {
+      gaInjectionService = _gaInjectionService_;
+    }));
+
+    describe('injectGACode', () => {
+      let scripts;
+      beforeEach(() => {
+        const getScripts = () => document.querySelector('body').querySelectorAll('script');
+        Array.from(getScripts()).forEach(script => script.parentNode.removeChild(script));
+        gaInjectionService.injectGACode();
+        scripts = getScripts();
+      });
+
+      it('should add the default external script tag to the specified target', () => {
+        const src = scripts[0].src;
+        expect(src).toEqual(`https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsConfig.trackingId}`);
+      });
+
+      it('should add the default inline script tag to the specified target', () => {
+        const innerText = scripts[1].innerText.replace(/\s+/g, ' ').trim();
+        expect(innerText).toContain(`gtag('config', '${googleAnalyticsConfig.trackingId}')`);
+      });
+    });
+  });
 });