Custom Image on Google Tag Manager (AMP)

Question

I need to add custom scripts to my AMP GTM container.

We have one for a facebook event. For custom image URL we are using https://www.facebook.com/tr?id=[MY_ID]=PageView&noscript=1

I need to do something similar for Pardot.

<script type="text/javascript">
piAId = '123456';
piCId = '123';
piHostname = 'pi.pardot.com';

(function() {
function async_load(){
var s = document.createElement('script'); s.type = 'text/javascript';
s.src = 'https://pi.pardot.com/pd.js';
var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c);
}
if(window.attachEvent) { window.attachEvent('onload', async_load); }
else { window.addEventListener('load', async_load, false); }
})();
</script>

We have other types of tracking that I'd like to have a custom image for so we can do everything in our GTM container.

Is this possible to do the same way I did facebook? Is there a standard way of doing this? Adding query args?

Any help / guidance is appreciated

Answer 1

There is no custom HTML tag in an AMP container, since the use of AMP is restricted in AMP pages in the first place.

AMP pages can’t include any author-written JavaScript. Instead of using JavaScript, interactive page features are handled in custom AMP elements. (Source)

I think you knew that, even though you asked for custom script.

For the real question if you can convert the Pardot script to a custom image tag I do not see any straightforward solution. The linked script reads cookies and HTML parameters and loads additional javascript. Custom images cannot do that (and the AMP container does not have a cookie variable, so you cannot get at the values through GTM).

This really looks like a case for Pardot tech support to see if they have an AMP compatible version of their tag.