Google Global Site Tag (gtag.js) tracking code insertion issue

[Howard]

1. I add Goggles tracking script (per Google’s instructions) as first item in head (via code editor)
   

   

2. Save file

3. Result

What is happening here and why??

[psweb]

Hi Howard, the head section of Wappler does some auto reordering on save, to ensure things work correctly, so thats why. To be honest even with the reordering it has done it should still work correctly, as it kept the code blocks together even though it moved parts around.

The only thing i can suggest if you would prefer it to all stay together is to rather add your gtag stuff from Google Analytics to the last item in your head tag, so just before the </head> tag.

[Howard]

OK, just a bit disconcerting. It does seem to be working OK.
Thanks and happy holidays.

[Mozzi]

Is it possible… to place the script in a database? Basically let the client copy and paste the google analytics to your databse via admin tool…and render it on your page?
So in my database i would have in a table…

<script async src="https://www.googlet.....

Then how would one phrase this on your page?
Is it even possible to???

[psweb]

I cant see why not, as long as you bring the data back in dynamically like you would any other head type script, such as with NodeJS allowing you to bring in SEO Meta tags.

[Mozzi]

I have done it via your suggestion and it returns the data…

But not as tags… is there a formatter or something you know of that once can bring it is as

I know @Hyperbytes is also very into the SEO thing … maybe he has a solution for loading and rendering javascript out of a database onto your website… eg google tag…

Is there like a formatter… to format the tags as “code” eg…

<script async src="https://www.googletagmanager.com/gtag/js?id=G-1"></script>

[Hyperbytes]

I assume this is going into your layout Page?

this is and example of what i typically have when using DB based SEO in the layout and it works ok,

 <meta name="description" content="<%=_('query_seo.description')%>">
    <meta name="keywords" content="<%=_('query_seo.keywords')%>">
    <meta property="og:site_name" content="<%=_('query_seo.canonical')%>">
    <meta property="og:image" content="<%=_('query_seo.og_image')%>">
    <meta property="og:url" content="<%=_('query_seo.canonical')%>">
    <meta property="og:title" content="<%=_('query_seo.title')%>">
    <meta property="og:description" content="<%=_('query_seo.og_description')%>">
    <meta name="twitter:image" content="<%=_('query_seo.twitter_image')%>">
    <meta name="twitter:url" content="<%=_('query_seo.canonical')%>">
    <meta name="twitter:title" content="<%=_('query_seo.twitter_title')%>">
    <meta name="twitter:description" content="<%=_('query_seo.twitter_description')%>">
    <link rel="canonical" href="<%=_('query_seo.canonical')%>">
    <meta property="og:type" content="website">

So i guess it is the presence of the script tag which is causing the issue
Not sure if placing it in a < col > and outputting it as HTML may work?

[Mozzi]

Hi. I have all the above as yo have it and works great…

but the problem now comes in with the <script>

but let me give you suggestion a go… as a normal data biding {{query.googltraking}} wont do the trick…

[Hyperbytes]

just set up a test, will have a play. Never needed to do this before

[Mozzi]

Thanks… i have searched the forum… but its weird that no one has asked this question… maybe they all add the clients google analytics manually. I have seen wordpress sites where you can paste the Google Analytics in… but then again that was php… but Node is a different story? Maybe when @Teodor has time in a few days. He can explain what would be the best approach be to paste “script” into a database and then render it on the page for google analytics … my clients use google … lead forensics… facebook pixel and a few other more… … otherwise one could create the script on the page… and then maybe just phrase the “gtag” code???

[Hyperbytes]

I see the issue
If you remove the script tags from the database and manually hard code them into the head with the actuall script between

<script>
    {{serverconnect1.data.query_tag.script}}
</script>

it does not render

If you render the entire script into the head, it is rendered but moved to the body

    {{serverconnect1.data.query_tag.script}}

it is rendered but moved to the body

[Hyperbytes]

don’t seem to be able to get this to work, seems the options are include script tags in the DB field and have it render but move to the body or leave out script tags in DB field and it doesn’t render in the head.
Think your are going to have to call the team in on this one.

[Mozzi]

Thanks for giving it a go… much appreciated… just asked because i know you well versed in the “weird” not so orthodoxos ways of doing things thank you for having a gooooo…

[Hyperbytes]

I only wish I was as good as some people think i am

[Mozzi]

you are… you are… you have helped me may times via your tutorials and posts!!! and forever grateful for that…

[Mozzi]

O well for now… im going to force the client to provide me only with the the codes…
eg…

Global site tag (gtag.js) - Google Analytics
Google Tag Manager
Facebook Pixel Code

i will just support these for now… .

and what i have done now below works like a charm as it renders.

i have added the scripts directly on the page… and then just “insert” the “short” codes.

and you will see in the source… it renders very pretty…

[mebeingken]

I thought I would revive this thread since I had to figure it out today having first run into what @Hyperbytes describes above.

Here’s what works:

I store the tenant script(s) in the database as it is provided by the vendor (GA, FB pixel, etc.) For example for GA:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XYYYYYYYZ"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XYYYYYYYZ');
</script>

I have a load_layout API which is called by the Server Side Data Server Connect on the layout.

This API load_layout outputs the value from the database (simple single query with output on)

In the head of the layout, I insert the script

<head>
    <script src="/dmxAppConnect/dmxAppConnect.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous"></script>

    <%-_('snippet.head_start')%>
    ...
</head>

snippet is the name of the single query and head_start is the column name/alias.

The part I had to work on is the syntax of the template. I’ve always used <%=_ %> which causes the script to end up in a <text> tag down in the body along with any scripts that follow.

By changing to <%-_ %> (dash instead of equal) it outputs the unescaped value.

More about the ejs templating at: https://github.com/mde/ejs#tags