@griddo/cx 1.66.6 → 1.66.9

package/gatsby-ssr.js

@@ -1,75 +1,24 @@
 /* eslint-disable node/no-missing-require */
 import * as React from 'react';
-import parse from 'html-react-parser';
-const { ssr, generateAutomaticDimensions = null } = require('components');
-
-let analyticsScript = [];
-let analyticsDimensions = [];
+const { ssr } = require('components');
 
 export const wrapPageElement = ({ props }) => {
   if (ssr.wrapPageElement) {
     return ssr.wrapPageElement(props);
   }
-  const {
-    pageContext: {
-      siteScript: siteScriptBulk,
-      page: {
-        dimensions
-      }
-    }
-  } = props;
-
-  //Añadir el script. Dependiendo de si lo que recibe es el trackingId o el script
-  const siteScript = siteScriptBulk ? siteScriptBulk.trim() : "";
-  const src = `https://www.googletagmanager.com/gtag/js?id=${siteScript}`;
-  const scriptCode = siteScript.includes('<script') ? [parse(siteScript)] : [<script async key="site-script" dangerouslySetInnerHTML={{ __html: siteScript }} />]
-
-  analyticsScript = siteScript && siteScript.startsWith('UA-') ?
-    [<script async src={src}></script>]
-    :
-    (siteScript ? scriptCode : []);
-  ;
-
-  //Las dimensiones o DataLayer
-  const dynamicValuePrefix = '__SCRIPT:';
-  const dimensionValues = dimensions?.values || {};
-  const automaticDimensionValues = generateAutomaticDimensions ? generateAutomaticDimensions(props) : {};
-  const allDimensionsValues = {
-    ...dimensionValues,
-    ...automaticDimensionValues,
-  };
-  const allDimensions = [];
-  for (const dimension of Object.keys(allDimensionsValues)) {
-    const dimensionValue = allDimensionsValues[dimension];
-    allDimensions.push(`"${dimension}":${dimensionValue?.startsWith(dynamicValuePrefix) ? `${dimensionValue.slice(dynamicValuePrefix.length, dimensionValue.endsWith(';') ? -1 : dimensionValue.length)}` : `"${dimensionValue}"`}`);
-  }
-
-  analyticsDimensions = allDimensions.length ?
-    [<script
-      async
-      key="site-script"
-      dangerouslySetInnerHTML={{
-        __html: `dataLayer.push({${allDimensions.join(',')}})`
-      }} />]
-    :
-    []
-    ;
 };
 
 export const onRenderBody = props => {
   if (ssr.onRenderBody) {
     ssr.onRenderBody(props);
   }
-  const { setHeadComponents, setPostBodyComponents } = props;
+  const { setHeadComponents } = props;
 
   const additionalHeadComponents = [
     <script>window.dataLayer = window.dataLayer || [];</script>,
   ];
 
-  const additionalBodyComponents = [...analyticsScript, ...analyticsDimensions];
-
   setHeadComponents([...additionalHeadComponents]);
-  setPostBodyComponents([...additionalBodyComponents]);
 };
 
 export const onPreRenderHTML = props => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/cx",
   "description": "Griddo SSG based on Gatsby",
-  "version": "1.66.6",
+  "version": "1.66.9",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -64,7 +64,7 @@
     "react-helmet": "^6.0.0"
   },
   "devDependencies": {
-    "@griddo/eslint-config-back": "^1.66.6",
+    "@griddo/eslint-config-back": "^1.66.9",
     "eslint": "^7.5.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-react": "7.14.3",
@@ -96,5 +96,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b651d639816bb26483bc43210df5780fddf27f48"
+  "gitHead": "caff7b04c079c10c847817476d8e3b718592929d"
 }

package/src/components/seo.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Helmet } from 'react-helmet';
+import parse from 'html-react-parser';
 
 const cleanCommaSeparated = x =>
   x
@@ -25,6 +26,8 @@ export default function SEO(props) {
     },
     fullUrl,
     showBasicMetaRobots,
+    analyticsDimensions,
+    analyticsScript,
   } = props;
 
   const metaRobots = cleanCommaSeparated(
@@ -33,45 +36,79 @@ export default function SEO(props) {
   const showMetaRobots =
     showBasicMetaRobots || metaRobots !== 'index,follow,translate';
 
+  const analyticsSrc =
+    (analyticsScript &&
+      analyticsScript.startsWith('UA-') &&
+      `https://www.googletagmanager.com/gtag/js?id=${analyticsScript}`) ||
+    null;
+  const analyticsCode =
+    analyticsScript && !analyticsSrc && analyticsScript.includes('<script')
+      ? parse(analyticsScript)
+      : { props: { dangerouslySetInnerHTML: {} } };
+
+  const {
+    props: {
+      dangerouslySetInnerHTML: { __html: analyticsScriptCode },
+      // eslint-disable-next-line no-unused-vars
+      children: analyticsScriptChildren,
+      ...analyticsScriptProps
+    },
+  } = analyticsCode;
+
   return (
-    <Helmet title={title}>
-      <meta name="description" content={description} />
-      <meta name="title" content={title} />
-      {canonical && <link rel="canonical" href={canonical} />}
-      <link rel="icon" href={favicon} />
+    <>
+      <Helmet title={title}>
+        <meta name="description" content={description} />
+        <meta name="title" content={title} />
+        {canonical && <link rel="canonical" href={canonical} />}
+        <link rel="icon" href={favicon} />
+
+        {/* Alternate */}
+        {pageLanguages?.length > 1 &&
+          pageLanguages.map(item => (
+            <link
+              key={item.pageId}
+              rel="alternate"
+              href={`${item.url}`}
+              hreflang={item.locale?.replace(/_/g, '-')}
+            />
+          ))}
+
+        {/* Robots */}
+        {showMetaRobots && <meta name="robots" content={metaRobots} />}
+
+        {/* Facebook */}
+        <meta property="og:site_name" content={title} />
+        <meta property="og:locale" content={locale} />
+        <meta property="og:title" content={openGraph.title || title} />
+        <meta property="og:type" content={openGraph.type || 'website'} />
+        <meta property="og:url" content={canonical || fullUrl} />
+        <meta property="og:description" content={openGraph.description} />
+        <meta property="og:image" content={openGraph.image} />
 
-      {/* Alternate */}
-      {pageLanguages?.length > 1 &&
-        pageLanguages.map(item => (
-          <link
-            key={item.pageId}
-            rel="alternate"
-            href={`${item.url}`}
-            hreflang={item.locale?.replace(/_/g, '-')}
-          />
-        ))}
+        {/* Twitter */}
+        <meta property="twitter:card" content="summary_large_image" />
+        <meta property="twitter:url" content={canonical || fullUrl} />
+        <meta property="twitter:title" content={openGraph.title || title} />
+        <meta property="twitter:description" content={openGraph.description} />
+        <meta property="twitter:image" content={openGraph.twitterImage} />
 
-      {/* Robots */}
-      {showMetaRobots && <meta name="robots" content={metaRobots} />}
+        {/* Lang */}
+        <html lang={locale} />
 
-      {/* Facebook */}
-      <meta property="og:site_name" content={title} />
-      <meta property="og:locale" content={locale} />
-      <meta property="og:title" content={openGraph.title || title} />
-      <meta property="og:type" content={openGraph.type || 'website'} />
-      <meta property="og:url" content={canonical || fullUrl} />
-      <meta property="og:description" content={openGraph.description} />
-      <meta property="og:image" content={openGraph.image} />
+        {/* Analytics with UA- */}
+        {analyticsSrc && <script src={analyticsSrc}></script>}
 
-      {/* Twitter */}
-      <meta property="twitter:card" content="summary_large_image" />
-      <meta property="twitter:url" content={canonical || fullUrl} />
-      <meta property="twitter:title" content={openGraph.title || title} />
-      <meta property="twitter:description" content={openGraph.description} />
-      <meta property="twitter:image" content={openGraph.twitterImage} />
+        {/* {analyticsCode} */}
+        {(analyticsScriptProps?.src || analyticsScriptCode) && (
+          <script {...analyticsScriptProps} data-griddo-id={fullUrl}>
+            {analyticsScriptCode}
+          </script>
+        )}
 
-      {/* Lang */}
-      <html lang={locale} />
-    </Helmet>
+        {/* Data Layer */}
+        <script>{`window.dataLayer && window.dataLayer.push(${analyticsDimensions})`}</script>
+      </Helmet>
+    </>
   );
 }

package/src/components/template.js

@@ -2,7 +2,14 @@
 import * as React from 'react';
 import { Link, navigate } from 'gatsby';
 import Seo from './seo';
-import { components, templates, SiteProvider } from 'components';
+import { composeAnalytics } from '../utils/dataLayer';
+import {
+  generateAutomaticDimensions,
+  components,
+  templates,
+  SiteProvider,
+} from 'components';
+
 import { Page as RenderGriddoPage } from '@griddo/core';
 
 export default data => {
@@ -25,6 +32,11 @@ export default data => {
     sitePages,
   } = data.pageContext;
 
+  const { analyticsScript, analyticsDimensions } = composeAnalytics(
+    data,
+    generateAutomaticDimensions
+  );
+
   const library = {
     components,
     templates,
@@ -60,6 +72,8 @@ export default data => {
         fullUrl={content.fullUrl}
         componentsVersion={componentsVersion}
         showBasicMetaRobots={showBasicMetaRobots}
+        analyticsDimensions={analyticsDimensions}
+        analyticsScript={analyticsScript}
       />
 
       {/*

package/src/utils/dataLayer.js

@@ -0,0 +1,47 @@
+// import parse from 'html-react-parser';
+
+const composeAnalytics = (page, generateAutomaticDimensions = null) => {
+  const {
+    pageContext: {
+      siteScript: siteScriptBulk,
+      page: { dimensions },
+    },
+  } = page;
+
+  const analyticsScript = siteScriptBulk ? siteScriptBulk.trim() : '';
+
+  //Las dimensiones o DataLayer
+  const dynamicValuePrefix = '__SCRIPT:';
+  const dimensionValues = dimensions?.values || {};
+  const automaticDimensionValues = generateAutomaticDimensions
+    ? generateAutomaticDimensions(page)
+    : {};
+  const allDimensionsValues = {
+    ...dimensionValues,
+    ...automaticDimensionValues,
+  };
+  const allDimensions = [];
+  for (const dimension of Object.keys(allDimensionsValues)) {
+    const dimensionValue = allDimensionsValues[dimension];
+    allDimensions.push(
+      `"${dimension}":${
+        dimensionValue?.startsWith(dynamicValuePrefix)
+          ? `${dimensionValue.slice(
+              dynamicValuePrefix.length,
+              dimensionValue.endsWith(';') ? -1 : dimensionValue.length
+            )}`
+          : `"${dimensionValue}"`
+      }`
+    );
+  }
+
+  const analyticsDimensions = allDimensions.length
+    ? `{${allDimensions.join(',')}}`
+    : null;
+  return {
+    analyticsScript,
+    analyticsDimensions,
+  };
+};
+
+export { composeAnalytics };

package/src/utils/pages.js

@@ -111,6 +111,7 @@ async function renderSinglePage(page, additionalInfo, createPage) {
     image: openGraph.image,
     pageId: id,
     languageId,
+    template: page.template_id || page?.template?.templateType || null,
     siteId: page.site,
     url: page.fullUrl,
     content,

package/src/utils/searches.js

@@ -11,6 +11,7 @@ async function postSearchInfo({
   siteId,
   url,
   content,
+  template,
 }) {
   const response = await post(`${baseURL}/search`, {
     title,
@@ -20,6 +21,7 @@ async function postSearchInfo({
     languageId,
     siteId,
     url,
+    template,
     content: prepareHTMLContentForSearch(content),
   });