Adding analytics scripts to Plasmic pages.

Plasmic Studio Questions
1

Is there a way to add analytics tracking scripts into the head of every page in the nocode plasmic version?

2

Hey @heady_impala! You can create a component and add the Embed HTML component to include your analytics tracking script. Then, you can set this page as the default page wrapper. After that, every time you create a new page, this component will be automatically added to your page.
For your existing pages, you will need to do it manually.

3

Hey @samuel thanks! But this way it will end up in the body, and not in the head correct?

4

Oh, sorry! I missed the fact that you wanted to add to the head.
Currently, there is no way to achieve this with nocode. :pensive:

5

got it! And what about with code? I thought of an event listener for pageload that will inject it into the head but not sure of this is suitable… or if there is a better way perhaps with code?

6

Hi, you can add the head metadata like this, for instance into your catch all page: https://docs.plasmic.app/learn/page-head-metadata/

7

ah and then using the page meta data override component @yang?

8

Sorry I think I misread your initial question, if all you want is to add Google analytics site wide, then add it to your next JS code base. Pretend plasmic wasn’t there, and add GA normally https://nextjs.org/docs/messages/next-script-for-ga

9

@yang im using the studio not next… is that possible with the studio?

10

Not at the moment unfortunately!

11

@samuel I tried implementing what you suggested by wrapping it in an embed, the result though, is that the screen freezes from editing, With an error at top.

This is the script I tried to add… its a Segment.com script:

<script>
  !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){if(window.analytics.initialized)return window.analytics[e].apply(window.analytics,arguments);var i=Array.prototype.slice.call(arguments);i.unshift(e);analytics.push(i);return analytics}};for(var i=0;i<analytics.methods.length;i++){var key=analytics.methods[i];analytics[key]=analytics.factory(key)}analytics.load=function(key,i){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="<https://cdn.segment.com/analytics.js/v1/>" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=i};analytics._writeKey="iBtC2TNo7TNsfpt34dBDRQGiZPb7ikL2";;analytics.SNIPPET_VERSION="4.16.1";
  analytics.load("iBtC2TNo7TNsfpt34dBDRQGiZPb7ikL2");
  analytics.page();
  }}();
</script>
12

’

Screen Shot 2023-09-07 at 12.39.44 PM.png
Screen Shot 2023-09-07 at 12.39.44 PM.png1920Ă—1009 260 KB

13

Hi, I am also interesting in a solution for this, as I am working on a project where I will need to add Google Analytics support.

The project will use primarily the Plasmic editor with no custom code support, so it is essential that this be done without self-hosting and via the Plasmic editor.

Thanks.

1 Like