Stop Mailchimp from mangling CSS / HTML in templates - mailchimp

tldr: Mailchimp is processing and 'fixing' my html template and ruining it in Gmail in browsers. Help!
I have an html template that gets updated by API after generating in my CMS. It works great in all browers, tests perfectly in Litmus for gmail, works with my previous email sender.. and migrating to Mailchimp, some kind of processing happens to it.
It reorders where an inline declaration appears, and attempts to add a bunch of annoying inline styles I don't want ( I already have inline styles as well).
It looks like they used to allow you to switch 'inlining' tools on or off, but you can't turn it off anymore. That's right: you can't just have Mailchimp send off the html you provide.
If I upload (paste) the correct html directly into a template it still fails & changs, so there isn't an issue with the api call or charset etc as far as Ic an tell. Just hoping someone out there has a tip or clue
It should look like this
https://www.dropbox.com/s/k5qeh4cl7n3lwol/Screen%20Shot%202022-09-21%20at%201.48.46%20PM.png?dl=0
but it looks like this:
https://www.dropbox.com/s/c9304uxw4yxb0o7/Screen%20Shot%202022-09-21%20at%201.46.57%20PM.png?dl=0

Related

eliminate render-blocking JavaScript

I have a strange issue with google page speed insights. I am receiving this error even though I have moved all my scripts to footer, and critical css is inlined in header. Mobile results are very good, and desktop is receiving this error. anyone has some idea on how to solve this?
This is the url for test: google page speed insights
I had a look at the source for the URL that you provided and it seems like there is a script tag inside the HEAD.
<script>
sessionStorage.setItem('BASEURL', 'http://test.bigcat.rs/mirokredit/wp-content/themes/mirobuild');
sessionStorage.setItem('LANG', 'de');
</script>
You should also move that to just before the closing BODY tag add the "async" attribute to the tag. It will notify the browser to run the script asynchronously as soon as it becomes available and remove the blocking.
Hope that helps!
I have found the problem and the solution! In my original css I have a BG image for top content on desktop. In critical css I have included only bg-color and I wanted to serve this bg-image later. Once I have included bg-image in critical css( in header) desktop results improved and render blocking script error message disappeared. Google pagespeed insights examined the final result picture with the one generated with only critical css, And it found out that the pictures were not similar enough, and That's why it said that I had blocking content.

Remove extra </div> tags from in front of </body> tag? (Google dynamic remarketing api)

I'm trying to enable dynamic remarketing tags, Fooman dynamic remarketing is installed. Google's Tag assistant reports that the script should be immediately before the closing tag, the Google api seems to add twice after
The data is all good, it's simply not working because of these extra s from what I can see. How can I locate and remove these? I've done some investigation in the relevant files but can't find anything likely to cause the problem.
The issue may be part of the Google api, if I disable this then the additional tags disappear.
My other option is to manually add the remarketing snippet, I've tried this through Design -> Footer -> Miscellaneous html, whilst this is correctly placed before the and has no extra tags the dynamic data fields are not populated. Am I missing something? Is it being treated as flat html rather than dynamic?
Magento 1.9.0
Hoping someone can help.
Thanks
Rob
Want to try this one? Also regarding script should be immediately before the closing tag, this is not a big issue. http://ecommppc.com/2014/09/05/setting-up-dynamic-remarketing-on-your-magento-webstore-using-google-tag-manager/

Load JS widget in Angular View

I have a widget that I want to plug into my angular view. I'm not sure I'm explaining it right but the code I get from the site that makes/hosts the widget is below:
<script src="http://www.somesite.com/widgetfile.js"></script>
This works perfectly fine on a standard html site (just a simple html file loaded locally in my browser). It loads the external JS file and does a document.write onto my DOM as far as I can tell.
The problem I'm having is putting this on a view in an Angular app I've built. I thought it would be the same thing as just copy/pasting the single line of script that the site gave me, but it doesn't work... error i get is below (Chrome).
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
I can't use something other than document.write because I don't have access to the file itself, the site that generates the widget does that for me. I've tried doing $http get request in my controller than putting that to a scope variable to be put on the DOM, but I get an error about cross domain security.
Any thoughts? This seems super basic to me since there are thousands of sites that offer "One line of code to embed a widget"... and it works in basic HTML pages. Am I missing something stupid (keep in mind that yes, I did copy and paste the widget script directly from the site that hosts it).
Thanks for the help. I'm pretty new with coding and newer at angular, but this seems like something that should be borderline plug-n-play and not need some complex cross domain workaround.
Try these with these two links.
http://ngmodules.org/modules/angular-widget
https://github.com/cztomsik/ng-widgets

CKEditor: How to manually trigger ACF(Advanced Content Filter)

With older version of CKEditor, I use following code to manually trigger Advanced Content Filter before submitting the content to server, but this stopped working for Version 4.4. I wonder is there a way to manually trigger the ACF and/or other kinds of content validation in CKEditor?
editor.setData(editor.getData(););
Your solution actually worked for me! To be more precise, I used CKEDITOR.instances['instance_name'].setData( CKEDITOR.instances['instance_name'].getData() ) and it worked!
To other people asking: this can be very useful even if you have ACF turned ON; in our app there's a number of situations that we manipulate the DOM inside CKEditor directly using jQuery for some very custom features we have (we actually create some UI inside the editor area), but we don't want that forbidden HTML going to the server and this solution works perfectly.
(Of course we always sanitize on the server as well)
For us this
CKEDITOR.instances['instance_name'].setData( CKEDITOR.instances['instance_name'].getData() )
didn't work, but getting the data with 1 in the arguments worked.
CKEDITOR.instances['instance_name'].setData( CKEDITOR.instances['instance_name'].getData(1) )

Javascript: achieving the Google Ad AJAX effect

I need to create a portable script to give to others to implement on their websites that will dynamically show content from my database (MySQL).
I know AJAX has a cross-site problem, but it seems that Google's ad's somehow manage the effect in a cross-browser / cross-site fashion.
Knowing that I have to give people a simple cut/paste snippet to put in their website...how can I achieve this? How did Google?
They use an <iframe>, so the ad is served from their server, and can talk to their database. I'm not actually sure that they use any sort of AJAX from their ads, though; they appear to just be mostly static content, with a few scripts for tweaking the formatting (which are optional, since they want their ads to be visible even if users have JS turned off).
Remember, you can always look into this on your own, and see what they did. On Firefox, use Firebug to explore the html, css, and scripts on a site. On WebKit based browsers (Safari, Chrome, and others), you can use the Web Inspector.
Google's ad code is loaded via a script tag that calls a remote javascript file. The AJAX restrictions that are generally enforced with xmlhttp, iframe, and similar AJAX requests don't apply when it comes to loading remote javascript files.
Once you've loaded the javascript file, you can create iframes in your page that link back to the actual hosted content on your server (and feed them any data about the current page that you wish).
jQuery has built in support for jsonp in their ajax calls. You may want to lookin in to using that if you are really needing to use ajax.
http://api.jquery.com/
http://docs.jquery.com/Ajax
You don't need iFrames and you don't need AJAX. It's really, really simple!
You pull in a remote JS file that is actually a constructed file from php/asp/whatever. In your JS file you have a document.write script that writes the content. It's that simple.
We do this all the time with media stored on separate sites. Here's an example.
YOUR SERVER: file.php (which outputs js)
<script>
document.write("I'm on a remote server");
</script>
OTHER SITE:
<script src='http://www.yourserver.com/file.php'></script>
And it will output the content generated by the script. To make the content customized you can put in script vars above the script call that will adjust what your file pulls out. From there it's pretty straightforward.
I realize this question is a year old, but I've written a library that can help with the document.write part of the problem (whether this is a TOS violation, I don't know) writeCapture.js. It's pretty simple:
$('#ads').writeCapture().html('<script src="whatever-your-adsense-code-is"> </script>');
The example uses jQuery, but you can use it standalone as well.

Resources