https://www.crazyegg.com./n
  • You'll need an Optimizely Web project with at least one experiment set up.</li>\n<li>The <a href=https://www.optimizely.com/"https://help.optimizely.com/QA_Campaigns_and_Experiments/Force_behaviors_in_Optimizely_X_using_query_parameters/">force variation parameter</a> needs to be enabled. It can be enabled by going to the Settings tab in Optimizely, then make sure the &quot;Disable force variation parameter&quot; box is unchecked.</li>\n</ul>\n<h2>Optimizely Setup</h2>\n<ol>\n<li>Navigate to the Optimizely project in which you want to use the integration.</li>\n<li>Click on <strong>Settings</strong> in the left navigation bar, and then <strong>Integrations</strong>.</li>\n<li>Click on the blue button titled <strong>&quot;Create New Analytics Integration&quot;</strong>.</li>\n<li>In the dropdown menu select <strong>Using JSON</strong>.</li>\n<li>Copy and paste the following code into the <em>JSON Code</em> window in Optimizely and click <strong>Create Integration</strong>.</li>\n</ol>\n<pre><code>{\n &quot;plugin_type&quot;: &quot;analytics_integration&quot;,\n &quot;name&quot;: &quot;Crazy Egg&quot;,\n &quot;form_schema&quot;: [\n {\n &quot;default_value&quot;: &quot;off&quot;,\n &quot;field_type&quot;: &quot;dropdown&quot;,\n &quot;name&quot;: &quot;heatmaps&quot;,\n &quot;label&quot;: &quot;Heatmaps&quot;,\n &quot;options&quot;: {\n &quot;choices&quot;: [\n {\n &quot;value&quot;: &quot;off&quot;,\n &quot;label&quot;: &quot;Off&quot;\n },\n {\n &quot;value&quot;: &quot;on&quot;,\n &quot;label&quot;: &quot;On&quot;\n }\n ]\n }\n }\n ],\n &quot;description&quot;: &quot;This integration allows you to see heatmaps with Optimizely data.&quot;,\n &quot;options&quot;: {\n &quot;track_layer_decision&quot;: &quot;if(extension.heatmaps === \\&quot;on\\&quot;) {\\n if(!isHoldback) {\\n window.CE_SNAPSHOT_NAME = '' + variationId;\\n }\\n}\\n&quot;\n }\n}\n</code></pre>\n<ol start=\"6\">\n<li>Select <strong>Crazy Egg</strong> in the integration list and <strong>enable</strong> the integration.</li>\n<li>Click on <strong>Experiments</strong> in the left navigation bar, click on the <strong>Name</strong> of the experiment.</li>\n<li>Click on <strong>Integrations</strong> in the submenu, and make sure the Crazy Egg Heatmaps field is <strong>On</strong>.</li>\n<li>Next you will need to find your experiment's variation IDs. Click on <strong>API Names</strong> in the submenu.</li>\n<li>Find the <strong>variation ID's</strong> for the control and any variants, you will need these for the Crazy Egg setup.</li>\n</ol>\n<h2>Crazy Egg Setup</h2>\n<p>In Crazy Egg, you will need to create a separate snapshot for each ID.</p>\n<ol>\n<li>The <strong>Snapshot URL</strong> will need to have the experiment page URL appended with <code>optimizely_x</code> query param. Example: https://www.example.com/my-page/?optimizely_x=VARIATIONID.</li>\n<li>The <strong>Snapshot name</strong> will need to be the <strong>variant ID</strong>.</li>\n<li>Under the <strong>Advanced settings</strong>, select the Tracking Option of <strong>Track by name</strong>. Note: You just need to select this option, you won't need to add the additional code on your page since the integration automatically handles it.</li>\n</ol>\n","labels":"web, analytics, crazyegg, forms, heatmap","revisionDate":"2021-04-05","resourceFile":null,"resourceFileName":null,"author":null,"repositoryUrl":"https://raw.githubusercontent.com/optimizely/labs/master/labs/crazyegg-integration/README.md","labelsLabel":"Labels","publishedLabel":"Published","resourcesLabel":"Resources","repositoryLabel":"Repository","authorLabel":"Author"}" data-redux="false" data-router="false">

    Crazy Egg Integration

    The Crazy Egg integration allows you to see heatmaps with Optimizely data.

    Pre-requisites

    • You'll need a Crazy Egg account. Head here to get started: https://www.crazyegg.com.
    • You'll need an Optimizely Web project with at least one experiment set up.
    • The force variation parameter needs to be enabled. It can be enabled by going to the Settings tab in Optimizely, then make sure the "Disable force variation parameter" box is unchecked.

    Optimizely Setup

    1. Navigate to the Optimizely project in which you want to use the integration.
    2. Click on Settings in the left navigation bar, and then Integrations.
    3. Click on the blue button titled "Create New Analytics Integration".
    4. In the dropdown menu select Using JSON.
    5. Copy and paste the following code into the JSON Code window in Optimizely and click Create Integration.
    {
  "plugin_type": "analytics_integration",
  "name": "Crazy Egg",
  "form_schema": [
    {
      "default_value": "off",
      "field_type": "dropdown",
      "name": "heatmaps",
      "label": "Heatmaps",
      "options": {
        "choices": [
          {
            "value": "off",
            "label": "Off"
          },
          {
            "value": "on",
            "label": "On"
          }
        ]
      }
    }
  ],
  "description": "This integration allows you to see heatmaps with Optimizely data.",
  "options": {
    "track_layer_decision": "if(extension.heatmaps === \"on\") {\n  if(!isHoldback) {\n    window.CE_SNAPSHOT_NAME = '' + variationId;\n  }\n}\n"
  }
}
    1. Select Crazy Egg in the integration list and enable the integration.
    2. Click on Experiments in the left navigation bar, click on the Name of the experiment.
    3. Click on Integrations in the submenu, and make sure the Crazy Egg Heatmaps field is On.
    4. Next you will need to find your experiment's variation IDs. Click on API Names in the submenu.
    5. Find the variation ID's for the control and any variants, you will need these for the Crazy Egg setup.

    Crazy Egg Setup

    In Crazy Egg, you will need to create a separate snapshot for each ID.

    1. The Snapshot URL will need to have the experiment page URL appended with optimizely_x query param. Example: https://www.example.com/my-page/?optimizely_x=VARIATIONID.
    2. The Snapshot name will need to be the variant ID.
    3. Under the Advanced settings, select the Tracking Option of Track by name. Note: You just need to select this option, you won't need to add the additional code on your page since the integration automatically handles it.
    Additional links