@griddo/cx 1.66.5 → 1.66.8

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.5",
+  "version": "1.66.8",
   "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.5",
+    "@griddo/eslint-config-back": "^1.66.8",
     "eslint": "^7.5.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-react": "7.14.3",
@@ -96,5 +96,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8a742124beca9714eddf49d01fce20ebb4bed4aa"
+  "gitHead": "310ebd96439ff23b8ef29962c94d51aa51fcd2e6"
 }

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

@@ -1,4 +1,6 @@
 const path = require('path');
+const fs = require('fs-extra');
+const { postSearchInfo } = require('./searches');
 const helpers = require('./helpers.js');
 
 async function renderPage(page, additionalInfo, createPage) {
@@ -25,7 +27,7 @@ async function renderSinglePage(page, additionalInfo, createPage) {
     showBasicMetaRobots,
     BUILD_MODE,
     sitePages,
-    siteScript
+    siteScript,
   } = additionalInfo;
 
   // 3 - Build final page object
@@ -91,7 +93,31 @@ async function renderSinglePage(page, additionalInfo, createPage) {
 
   if (assetPrefix) mappedPage.matchPath = fullPath.compose;
 
-  return createPage(mappedPage);
+  const exportFile = path.resolve(
+    __dirname,
+    '../../dist/',
+    `./${filepath}index.html`
+  );
+
+  createPage(mappedPage);
+
+  const content = fs.existsSync(exportFile)
+    ? fs.readFileSync(exportFile).toString()
+    : '';
+
+  await postSearchInfo({
+    title,
+    description: openGraph.description,
+    image: openGraph.image,
+    pageId: id,
+    languageId,
+    template: page.template_id || page?.template?.templateType || null,
+    siteId: page.site,
+    url: page.fullUrl,
+    content,
+  });
+
+  return content;
 }
 
 async function renderListPages(
@@ -152,15 +178,17 @@ async function renderMultiplePages(page, additionalInfo, createPage) {
       ? paginatedPage.fullUrl.slice(0, -1)
       : paginatedPage.fullUrl;
     const rightSectionSlug = sectionSlug?.replace(/\//g, '');
-    const newCompose = `${compose}${compose.endsWith('/') ? '' : '/'
-      }${rightSectionSlug}`;
+    const newCompose = `${compose}${
+      compose.endsWith('/') ? '' : '/'
+    }${rightSectionSlug}`;
     paginatedPage.fullUrl = `${fullUrl}/${rightSectionSlug}`;
     paginatedPage.fullPath.compose = newCompose;
     paginatedPage.slug = newCompose;
     paginatedPage.template.activeSectionSlug = sectionSlug;
     paginatedPage.template.activeSectionBase = fullUrl;
     if (title.trim()) paginatedPage.title = title;
-    paginatedPage.metaTitle = metaTitle.trim() || title.trim() || paginatedPage.metaTitle;
+    paginatedPage.metaTitle =
+      metaTitle.trim() || title.trim() || paginatedPage.metaTitle;
     if (metaDescription.trim()) paginatedPage.metaDescription = metaDescription;
     await renderSinglePage(paginatedPage, additionalInfo, createPage);
   }

package/src/utils/searches.js

@@ -0,0 +1,62 @@
+const { post } = require('../api');
+
+const baseURL = process.env.API_URL;
+
+async function postSearchInfo({
+  title,
+  description,
+  image,
+  pageId,
+  languageId,
+  siteId,
+  url,
+  content,
+  template,
+}) {
+  const response = await post(`${baseURL}/search`, {
+    title,
+    description,
+    image,
+    pageId,
+    languageId,
+    siteId,
+    url,
+    template,
+    content: prepareHTMLContentForSearch(content),
+  });
+
+  return response;
+}
+
+function prepareHTMLContentForSearch(content) {
+  const noTagsContent = removeHTMLTags(
+    ['meta', 'link', 'style', 'script', 'noscript', 'nav', 'header', 'footer'],
+    content,
+    ' '
+  );
+  const plainTextContent = stripHTMLTags(noTagsContent, ' ');
+
+  return stripSpaces(plainTextContent);
+}
+
+function removeHTMLTags(tags, content, replaceWith = '') {
+  let filteredContent = content;
+
+  tags.map(tag => {
+    filteredContent = filteredContent
+      .replace(new RegExp(`<${tag}.*?>.*?<\/${tag}>`, 'gis'), replaceWith)
+      .replace(new RegExp(`(<${tag}([^>]+)>)`, 'gis'), replaceWith);
+  });
+
+  return filteredContent;
+}
+
+function stripHTMLTags(content = '', replaceWith = '') {
+  return content.replace(/(<([^>]+)>)/gis, replaceWith);
+}
+
+function stripSpaces(str) {
+  return str.replace(/\s+/gis, ' ');
+}
+
+exports.postSearchInfo = postSearchInfo;