Setup von Google Optimize mit Gatsby JS/ React JS

Um Google Optimize bei einer Gatsby JS oder auch React JS Progressive Web App einzusetzen, muss man beachten, dass derartige Progressive Webanwendungen etwas anders funktionieren und dass diese somit einen anderen Auslöse-Zeitpunkt für Google Optimize benötigen. Ansonsten werden die konfigurierten Änderungen einer Variante gegebenenfalls direkt wieder mit den Original-Werten überschrieben oder gar nicht erst korrekt dargestellt.

Um Google Optimize bei einer Gatsby JS Anwendung zu installieren, kann man folgende Schritte durchführen:

Schritt 1 - Optimize Container Code einbinden

Hinzufügen des Google Optimize Container Codes in der public/index.html Datei.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123456789-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-133379047-1', { 'optimize_id': 'GTM-XXXXXXX'});
</script>

Schritt 2 - Optimize Komponente erstellen

Setup einer neuen Komponente „optimize.js“ im src/components Verzeichnis, die folgenden Code enthält:

import React, { Component } from "react" 

class Optimize extends Component { 
  async componentDidMount() {
    if (window.dataLayer) {  
      await window.dataLayer.push({ event: "optimize.activate" });
    }
  }  
  render() {
    return (
       <Optimize />
    )
  }
}
export default Optimize

Schritt 3 - Optimize Komponente in Seite einbinden

Einfügen der Optimize Komponente in der bzw. den entsprechenden Gatsby JS Seiten. Code für Beispiel–Seite:

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
import Optimize from "../components/optimize"

const IndexPage = () => (
 <Layout>
  <SEO title="Home" />
  <h1>Hi people</h1>
  <p>Welcome to your new Gatsby site.</p>
  <p>Now go build something great.</p>
  <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
  <Image />
  </div>
  <Link to="/page-2/">Go to page 2</Link>
  <Optimize />
 </Layout>
)

export default IndexPage

Schritt 4 - Optimize Aktivierungs-Ereignis konfigurieren

Umstellen des Aktivierungs-Ereignisses auf den Event optimize.activate im Google Optimize Web Interface.

Anschließend kann man Optimize Tests wie gewohnt durchführen.