Streaming live at 10am (PST)

Adding custom code in header or footer on a single page

@cyberdave Okay thank you - at the moment i will have to add the code to head manually after exporting the code for the site. I am building a site for a podcast series, and each episode page needs to have a unique image for social media sharing. Let me know if there are any other options when you guys have discussed it. Thanks A Lot for all your help.

Yes for this particular need, that is the best approach. We’ll look at adding more support for this in future updates.

Okay - at least i know that is what i need to do, so eleviate wasting any more time trying to figure it out!

Thanks for your response, hopefully something can be added in future updates :smile:

+1 to this for Webflow to support individual page meta information and Styling

1 Like

+1

Just to give another example where I need to add a custom code to head individually.

I am trying to run a Google Analytics Experiment in one of my page and the instruction is to add the experiment code "immediately after the ".

Hope to have this soon. Webflow has been the best tool I ever used for website optimization (lead generation). But Google Experiment is an important missing step here.

Best,

Hi @guihnz you should also be able to drag an embed widget on your target page, then paste the google analytic code into your embed widgrt, and it should work. Try that and see how it works for you.

Hi Dave,

Not sure if I understood your suggestion (or if you understood my need). Anyway, let me try to explain better.

I am trying to run an Experiment test from Google Analytics (i.e. A/B test) on one page of my site. Example: http://www.programanex.com.br/automacao-comercial

More About Google Analytics Experiment here: https://support.google.com/analytics/answer/2364634?hl=en

The GA instruction is to place the Experiment code just after on the 2 pages (and only on them) to be tested. As far as I understand the Experiment code must be before the GA (UI-XXXXXXXX-X) code, which is normally placed on head. I am using the Custom Code section on webflow to place the Universal GA code to all pages of my website

Using the HTML embed Widget I can only place code in the section, right? Therefore, following your suggestion (if I did understand correctly) I would end up with the Experiment code after the GA Universal code, and it won’t work.

Please let me know if I am assuming all right here or if there is anything else that I missed.

Best,

Hi @guihnz, if you need to put the Google Experiment Code just on two pages, then you can remove your GA analytics code from Site Settings (which puts it in the head), and place on each of your pages a GA analytics code snippet as an Embed (you can get that script snippet from Google), and on those two pages where you need to put the Google Experiment code, then just update the same Embed widget that has the GA analytics code on those two pages and add the Google Experiment code before the GA analytics code for just those two pages…

If you use the Google Analytics code in Site settings, it will be used on each page, and you would not be able to control the order of the script… If you use only embed widgets on each page with GA code, then you can customize this, the way those load…

Try that and see if it helps you…

Cheers, Dave

Hi @cyberdave,

I have implemented as your suggestion and it seems to be working fine, even though Google Analytics Experiment warns that the code is in the wrong session (it should be placed just after the ).

Another issue is that implement Google Analytics code manually in all pages are not the best way to handle it. And it is also placed in the wrong session.

Anyway, I appreciate your help and it has accomplished my need. It is a work around though.

I will still leave my +1 for a nice way to implement code on of pages individually.

:smile:

2 Likes

+1 – we would also like to have different og:image tags on different pages and haven’t found a way to do this yet.

2 Likes

+1 I would also like to have the simple ability to add custom code on a per page basis.
This would be killer for 301 redirects and canonical situations.

Webflow rocks - this would be much appreciated.
Thanks Chris

2 Likes

+25 :smiley: - This would be really useful.

1 Like

@guihnz, sorry, I know this is a little late for you but just in case you still want to do this in the header one of our programmers showed me a way. Paste the google experiment tag in the header which will run it on every page but then edit the last script of it like so:

if (window.location.pathname == ‘/page-you-want-it-to-run-on’) {
utmx(‘url’,‘A/B’);
}

It seems to be working for us (the experiment is only being invoked when people go to the page we want to test it on). Hope this is helpful to somebody out there!

2 Likes

Hi @pwily, it is not late, still a very useful tip. I will try.

Thank you so much!

I second and third the capability of adding head code on a page per page basis.

  • Opengraph
  • Custom Meta - Canonical url, / Schema etc.
  • Javascript “I don’t need certain scripts on certain pages, etc.”

For know, I will just export the site and custom it out as needed.

But this would be a great feature and a time saver.

Not sure the best route to do this, I know giving access to live code on the WF platform would add a ton of issues as to how it gets interpreted by WF… etc.

Just a B-day wish for now.!

You guys are doing fantastic…!

FBM.

2 Likes

+1 This not only necessary it’s essential, I planned to use the excellent WF hosting but without this it’s really impossible.
It shouldn’t be a hard feature to implement, any timeline on completion / availability?

Everything said here is said with love for a product that COULD revolutionize coding. Not designing…coding. There are some of us that would like to use Webflow as a serious development alternative. The visual UI is HUGE and we feel it’s much faster than hand-coding HTML, CSS, and Javascript.

But not prioritizing custom head code on a per-page basis seems to signal an abandonment of the serious developer in favor of Webflow’s primary market: designers who don’t know or don’t want to mess with code.

This is such a shame because when this started out, tons of people in the industry expected it to mature into a serious development alternative. Some of us are still holding onto that, and we sincerely hope your team hasn’t given up on that chunk of the market.

It’s 2015, and clients demand features that Webflow just doesn’t support. Putting Open Graph tags in the header is standard. Canonical URLs are huge. Schema.org markup is essential for a lot of sites. It’s 2015 and Webflow does not have the ability to add custom code to headers on a page-by-page basis.

We’re told to export an ENTIRE site and modify each HTML page by hand. And forget using Webflow’s hosting solutions for this. In that case, per-page HTML head changes seem to be impossible.

Weebly has had this for a while. Even Squarespace supports per-page code injection. Somehow Webflow has a giant spot for meta-keywords (which Google and Bing don’t even use as a ranking factor) but doesn’t have this basic functionality. The competition has this feature and Webflow has been silent regarding the timeline for implementing this feature.

It’s 2015 and those of us who want to use Webflow as a serious development alternative are waiting. This product has the ability to change development for good and forever, and we’re waiting. Our credit cards are getting billed each month, and I don’t know how much longer we can wait.


Sources:

Weebly supports it: http://support.hostgator.com/articles/hosting-guide/publish-your-site/weebly/advanced-settings-and-premium-features-in-weebly

Squarespace supports it: https://support.squarespace.com/hc/en-us/articles/205815908-Using-Code-Injection

Google on meta-keywords: https://www.youtube.com/watch?v=jK7IPbnmvVU

Bing on meta-keywords: https://blogs.bing.com/webmaster/2014/10/03/blame-the-meta-keyword-tag/

2 Likes

I completely agree.

We need this feature.

3 Likes