GoogleOptimizeIntegration (optional)

Owned by Tomasz Drabik
Last updated: Jan 30, 2023
3 min read

https://github.com/magesuite/google-optimize-integration

This modules provides simple integration of Google Optimize and anti flickering scripts.

After providing a Google Optimize container ID, it automatically puts initialization and (optionally) anti-flickering scripts in proper order and place of the DOM.

Prereuquisites

  1. Google Tag Manager for Magento 2 by MagePal
    The module requires free Google Tag Manager for Magento 2 by MagePal, because the most of our projects use it’s dataLayer integration and we have to place Google Optimize scripts in relation to dataLayer initialization.

  2. Google Optimize container configured

Installation

This module is optional

composer require "creativestyle/magesuite-google-optimize-integration" ^1.0.0

Detailed information and User Manual

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.