Adding Programmable Search through Tag Manager - google-tag-manager

Is there a way to add the following script, required by Google Programmable Search to Google Tag Manager? Just trying to minimize separate scripts included in my code.
<script async src="https://cse.google.com/cse.js?cx=e14513e5d62xxxxxx"></script>

NM, figured it out. In case someone cares, here's how you do it:
Keep the code part where you want to include your search in the page code.
The above script can be added to GTM via Custom HTML tag. Just drop it there and it's done.
Cheers

Related

Handlebar objects not working when linking to a script by an URL

There are 2 ways to use a script with in a script manager
linking to a script by an URL
manually entering in the script.
The handle bar objects don't seem to work while linking to a script by an URL but works when manually entering it. An example script is very simple as below:
console.log("{{product.id}}");
I just wanted to find a solution or a workaround to make the handlebar objects work seamlessly when the script is hosted on a CDN.
Screenshot below:
Consider using 2 scripts. One is an inline script to instantiate certain JS variables your CDN script needs, and the other is your CDN script which checks for window.your_data when it evaluates.
So your first script might be:
<script>
window.currentProductName = "{{product.name}}";
</script>
And your CDN script will check for window.currentProductName when it evaluates.
As script order is not guaranteed within the same insertion target, it's best to put the inline script in the header and the CDN script in the footer (generally better for site speed as well).
I'm not sure if this is what you're looking for but you should be able to accomplish this with the inject & jsContext handlebars helpers. See both here, with a 'console.log' example.
https://developer.bigcommerce.com/stencil-docs/reference-docs/handlebars-helpers-reference#inject
When you reference a script via the URL option it is added to the page via a script tag. This means it gets loaded and run on the client side as the page loads. It would not have access to handlebars.
When you directly enter the script in the manager it is first processed server side and the result is directly placed on the pages. It does have access to handlebars.
You may want to do a combination. A manual script to gather and store the data you need, then a url script to load the main js that can access the data you stored.
You could merge them as one by having the manual script dynamically add the script tag for your external script.

GTM both scripts (script / no-script) in header are working?

I have a question for GTM tag.
Actually, the customer put GTM tags (both tags - script /no-script) in the header.
Personally, I think it works well but I am not sure because I have this messages from google tag assistant. (which can verify the tag is working well or not)
enter image description here
Could you give some advice for this one?
I am not sure whether this works just fine or I need to ask customer change something for this one.
Thank you
If you have the option to implement the tag correctly you should. If you are using WordPress you could also use a plug-in.
The purpose of having and tag is ,
tag is used by default to collect analytics on the site and it is placed in header because its a tag(all scripts should be in header) and to collect information immediately when the page starts loading .
The shouldn't be placed in header section because its not a script and only scripts should be in header and also the use of tag is if a user disables the javascript while browsing the site then the no script tag will be used to collect the analytics on the site .
So, the its always good to place script tag in header as high as possible and no script in body as high as possible

Google tag manager adding async scripts in to head of page

I've recently moved some of our scripts into Google tag manager via Custom HTML with a document with write enabled. However, most, if not all scripts are being added to the head of the page as a async script.
For example:
<head>
<script async type="text/javascript" src="https://www.externalSite.co.uk/visitor.js?mhRand=1513770036670"></script>
</head>
Why are these being added to the head of the site, instead they should be loaded at the bottom of the page?
Am I missing a setting somewhere within GTM?
All Tag Manager Tags are loaded Async so no need to specify it.
You can not use the labels on the HTML Tag.
Since you can not control that i ll be load on the header you might want to do it as soon as possible. In order to do this just use a pageview trigger and firing priority. If any resourses depended on this script here is a nice post.

DOXFX using Application Insights end-user user analytics

How can you add Application insights end-user user analytics to DocFx to track the usage of every documentation page?
The Application Insights documentation states you need to insert the JavaScript snippet listed below immediately before the closing tag, but I'm not sure if this is possible in DocFx or the best way to accomplish.
Would you need a postprocessor, or could you use a custom template?
<!--
To collect end-user usage analytics about your application,
insert the following script into each page you want to track.
Place this code immediately before the closing </head> tag,
and before any other scripts. Your first data will appear
automatically in just a few seconds.
-->
<script type="text/javascript">
var appInsights=window.appInsights||function(config){
function i(config){t[config]=function(){var
i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s="AuthenticatedUserContext",h="start",c="stop",l="Track",a=l+"Event",v=l+"Page",y=u.createElement(o),r,f;y.src=config.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js";u.getElementsByTagName(o)[0].parentNode.appendChild(y);try{t.cookie=u.cookie}catch(p){}for(t.queue=[],t.version="1.0",r=["Event","Exception","Metric","PageView","Trace","Dependency"];r.length;)i("track"+r.pop());return i("set"+s),i("clear"+s),i(h+a),i(c+a),i(h+v),i(c+v),i("flush"),config.disableExceptionTracking||(r="onerror",i("_"+r),f=e[r],e[r]=function(config,i,u,e,o){var s=f&&f(config,i,u,e,o);return s!==!0&&t["_"+r](config,i,u,e,o),s}),t
}({
instrumentationKey:"###-###-###-##"
});
window.appInsights=appInsights;
appInsights.trackPageView();
</script>
No PostProcessor is needed. You can achieve this by customizing the template. More information can be found in official tutorial or this question. You can add your code in partials/head.tmpl.partial. It will affect all the generated page.

Insert dependencies dynamically in View (Javascript and CSS Files)

Friends, I am willing to follow the rules of the W3C where it is recommended that javascript and CSS files should be in individual files and not within the page.
Good, following this rule, and not wanting to overload the master page, I would like to embed the dependencies dynamically. So how could I insert the libraries dynamically? I think the bigger problem is the Ajax requests.
Example:
<script type="text/javascript" src="http://sstatic.net/so/js/master.js?v=6523"></script>
I tried using the JavascriptResult, but he writes the content on the page, and do not run as "Stream."
Any help is welcome. Thanks
If I understand correctly the problem, you want to add script files dynamically to the page.
You can try jQuery load function, that can parse for you the result in very intuitive way.

Resources