Scripts doesn't work when embedded on pages; only works on dashboard

I have some scripts that I want to embed only in certain pages. The script unfortunately doesn’t work when I embed it in the pages but works fine when I put it in the before section on the dashboard under custom code. Would any of you know why that is? The scripts I want to embed include Google Tag Manager snippet, which needs to be embedded immediately after the opening tag in each page. Thank you!

This is the Google Tag Manager code I want to embed. It has been more than 24 hours since I embedded my google tag manager but I still haven’t :

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-NZP92Z"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-NZP92Z');</script>
<!-- End Google Tag Manager -->

This is the custom script for my table:

<script>
 var articles_global_data;

$.getJSON("https://www.googleapis.com/fusiontables/v2/query?sql=SELECT%20*%20FROM%201_UALMggn5hRy4gJQk8d4ZN-clD0SS-JGNQfE7do-&key=AIzaSyARDzql1SCv34S7Vt9bNvxS_k3-pvZCzvw", function(obj) {
    //data = obj.columns
    data = []; // Empty list
    for (var i = 0; i < obj.rows.length; i++) {
        row = obj.rows[i];
        data[i] = {}; // Empty dictionary object
        for (var j = 0; j < row.length; j++) {
            data[i][j.toString()] = row[j]; // Create a key and value pair.
        }
    }
    articles_global_data = data;
    
    $(function () {
        $('#articles_table').bootstrapTable({
            data: articles_global_data,
        });
    });

});

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
});
</script>

Here is my website preview link:
https://preview.webflow.com/preview/leasehackr?preview=15f127580298485a5699c3526d2d8692

Hi @littleviolette, thanks for the post :slight_smile: A few things:

  1. The noscript tag in your google tag manager code, will need to be wrapped by javascript writeln functions, because our custom code editor does not support he noscript tag. So for example, instead of this:


    You would use this:

  2. At the moment, it is only possible to add custom code to the header for all pages, not specific pages. Take a peek at this article for more info: http://forum.webflow.com/t/adding-custom-code-on-a-single-page/3739

  3. The table script code should be put in the Footer of your custom code panel. I have not tested this script, but if you add your page element with the unique ID “#articles_table”, then anywhere where you have this element ID in your site, the table you are calling should show up (provided there is not some issue with the script.).

Check those things first, and then if there are still issues, you can update the post :slight_smile: ​I hope this helps, cheers, Dave

Hi @cyberdave,

Thank you for the response. I did as you instructed by embedding the following code using the embed widget just after the opening of the tag:

<!-- Google Tag Manager -->
<script language="JavaScript">
<!--
document.writeln("<noscript><iframe src=\"//www.googletagmanager.com/ns.html?id=GTM-NZP92Z\"");
document.writeln("height=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"></iframe></noscript>");
//-->
</script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-NZP92Z');</script>
<!-- End Google Tag Manager --> 

I used Google’s Tag Assistant to check whether the tag is firing properly, and I get this error:

Any idea how I may solve the problem?

Hi, @littleviolette, thanks for the update. Could you please repaste the original code you received from google into the reply window, select that text and then use the preformatted text icon in the editor toolbar.

That will format the script correctly so that I can check it. :slight_smile:

Hi @cyberdave,

I am not 100% sure about what you mean, but here is the original code from Google Tag Management:

Here is the code I modified based on your instruction:

Hi @littleviolette :slight_smile: Thanks for the update… yes, it was that the original forum post corrupted the code…

Try this code:

<!-- Google Tag Manager -->
<script language="JavaScript">
<!--
document.writeln("<noscript><iframe src=\"//www.googletagmanager.com/ns.html?id=GTM-NZP92Z\"");
document.writeln("height=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"></iframe></noscript>");
//-->
</script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-NZP92Z');</script>
<!-- End Google Tag Manager -->

Replace the code you have now in your custom code section. Save changes and then republish and let me know the url you republish to, and I can check it :slight_smile:

Hi @cyberdave!

Thank you for getting back to me! I tried your code but am still getting the same error from the Google Tag Assistant.

My url is leasehackr.com.

Thanks!

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.