In order to integrate Google Optimize properly, we’ve prepared a module, that simplifies configuration and automatically puts initialization and anti-flickering scripts in proper order and place of the DOM.
Add this to your project’s composer.json:"creativestyle/magesuite-google-optimize-integration": ^1.0.0
The module requires free Google Tag Manager for Magento 2 by MagePal, because the most of our projects use it and we have to place Optimize scripts in relation to dataLayer initialization.
This module allows integration of the Google Optimize script, as described in the official documentation:
It also offers additional features which are described below.
After the module installation, the following options appear in the admin panel:
Stores → Configuration → MageSuite → Google Optimize
It consists of two separate sections. The first one allows integrating Google Optimize script directly in your project (without GTM involvement). It is as simple as enabling it and defining your GO container name taken from the GO account. Async script is optional but not recommended - enabling this option will increase performance, but also delay script execution and your experiments will be loaded later, which might not be intended. See attached documentation from the current section for details.
The anti-flicker script is responsible for hiding the page content until the GO experiment is fully loaded and ready to be shown. Optimize Container ID defines what the anti-flicker script should wait for. If GO is integrated directly, using “Integration” settings, then here we have to pass GO container ID. If GO setup is based on Google Tag Manager, here we need to pass GTM container ID instead, to make it wait for GTM to be loaded.
Use anti-flicker wisely, as it is not the best impression for the users to see the loading process before page starts. Script should be used only if you use asynchronous GO setup (direct async integration or GTM integration) and your experiments are changing the layout significantly, what might be noticeable for the users.
By default, the anti-flicker script shows a blank page before the content is loaded. We’ve extended that to make it “more friendly”, displaying a progress indicator instead.
Also, we’ve introduced a possibility to restrict the anti-flicker script execution only to specific pages and media queries.
Include in paths option stands for part of the URLs, like “/cms-page” or Magento controllers, like “catalog_product_view” to be able to target specific page types.
Include for provided match media stands for media query, that will allow the script to run if matches. For example: “(max-width: 600px)” or “(min-width: 768px) and (max-width: 1024px)” what would stand for tablets only.
Info about GDPR/Consent Management involvement
Google Optimize stores data in cookie and uses it to get proper experiments and remember it, that probably should be permitted by the customer. Our module does not provide integration, but the file structure allows overwriting a part of the code, to “connect” third parties like User Centrics and block the script execution until consent is given. This should be done by dev team.