Skip to content

Instantly share code, notes, and snippets.

@woutersf

woutersf/dropsolid_personalisation_manual.md

Last active July 23, 2023 12:27
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save woutersf/27a879ee90b3a91ba4fbd9861612cae5 to your computer and use it in GitHub Desktop.
Save woutersf/27a879ee90b3a91ba4fbd9861612cae5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dropsolid_personalisation_manual.md

Dropsolid Personalisation 1 on 1

Required

php working preferrably composer working too

Installation

Install drupal

mkdir drupal && cd drupal && curl -sSL https://www.drupal.org/download-latest/tar.gz | tar -xz --strip-components=1

installing compser

Fetch the unomi module module

composer require drupal/unomi:2.x-dev

Fetch the personalisation module module

composer require drupal/dropsolid_personalisation:1.x-dev

Fetch the mautic paragraph module

composer require drupal/mautic_paragraph:1.x-dev

Fetch the asset injector module

composer require drupal/asset_injector

or fetch them all in one go:

composer require drupal/asset_injector drupal/mautic_paragraph:1.x-dev drupal/dropsolid_personalisation:1.x-dev drupal/unomi:2.x-dev

Start the Drupal site!

Command that gives you the admin login link: php ./core/scripts/drupal quick-start demo_umami Command that is more stable without login link: php ./core/scripts/drupal quick-start demo_umami -s -vvv

Check Page cache

Internal Page Cache module Should be disabled

Surf to : http://127.0.0.1:8888/en/admin/modules/uninstall

Disable the module.

Enable the fetched modules

Manually enable modules dropsolid_personalisation & mautic_paragraph & asset_injector

http://127.0.0.1:8888/en/admin/modules

This should give you no errors.

Inject Scripts

Add the personalisation script

Navigate to http://127.0.0.1:8888/en/admin/config/development/asset-injector/js on your website. Click "Add js injector" Enter a name for the script e.g. "personalisation". Under 'Code', paste the following javascript code

  (function(d) {
    // attach script tag and defer
    function downloadJSAtOnload() {
      var wf = d.createElement('script'), s = d.scripts[0];
      wf.src = 'https://datacapture.dropsolid.com/8ac23bbf-5e59-4635-92f6-a477ea45542b/capture.js'
      wf.defer = true;
      wf.setAttribute( 'data-cdp-uuid', '8ac23bbf-5e59-4635-92f6-a477ea45542b' );
      wf.setAttribute( 'data-region', 'europe-west1' );
      s.parentNode.insertBefore(wf, s);
    }
    downloadJSAtOnload();
  })(document);

Add the UTM script

 window.dsdc = window.dsdc || function() {(dsdc.q = dsdc.q || []).push(arguments)}; dsdc.l = +new Date;
 window.dsdc('beforeRequest', function(data) {
     changedCapture = data.requestData;
     urlParams = new URLSearchParams(window.location.search);
     utmCampaign = urlParams.get('utm_campaign');
     utmSource = urlParams.get('utm_source');
     changedCapture.te__utmCampaign = utmCampaign;
     changedCapture.te__utmSource = utmSource;
     dsdc.updateCapture(changedCapture);
 });

Save mautic script

Navigate to http://127.0.0.1:8888/en/admin/config/development/asset-injector/js on your website. Click "Add js injector" Enter a name for the script e.g. "mautic tracking script". Under 'Code', paste the javascript code without the <script> tags

(function(w,d,t,u,n,a,m){w['MauticTrackingObject']=n;
    w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},a=d.createElement(t),
    m=d.getElementsByTagName(t)[0];a.async=1;a.src=u;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://mautic4rctest.staging.sites.dropsolid-sites.com/mtc.js','mt');

mt('send', 'pageview');

Couple Mautic to Drupal

Generate Mautic credentials

Navigate in Mautic to https://mautic4rctest.staging.sites.dropsolid-sites.com/s/credentials or '⚙️' > 'API credentials' Click on New

  • Select Oauth 2,
  • add a Name (Drupal)
  • and a redirect URI http://127.0.0.1:8888/mautic/callback

Configure Mautic in Drupal

Navigate to http://127.0.0.1:8888/en/admin/config/services/mautic in your Drupal site.

  • toggle the Oauth radio input field.
  • Enter the Site base url mautic4rctest.staging.sites.dropsolid-sites.com
  • Enter the client ID and secret
  • You should see Succesfully connected with OAuth2 authorization!

Couple Dropsolid personalisation to Drupal

Save Personalisation credentials

Navigate to http://127.0.0.1:8888/en/admin/config/services/unomi on your drupal installation.

  • select Dropsolid platform
  • Select https
  • florista01-unomi-florista.dropsolid-sites.com
  • Enter the Host, port, Cliend ID and Client Secret
    • Host: unomi-004.dropsolid-sites.com
    • Port: 443
    • Client ID: a9178f26-e7bd-443c-9a47-9ac091bb407e
    • Client Secret: 7bcnBKnCrNbt96242LAe
  • You should see "Connection successfully established via dropsolid_platform!"

Clear all the cache!

Add Mautic Block

  • Navigate to http://127.0.0.1:8888/en/admin/structure/block
  • Click on PLace block next to Highlighted
  • Select Add custom block
  • Choose the Type Mautic You are now creating your mautic block.
  • Input relevant block description and title e.g. "Download certificate"
  • In the "Form" Field, start typing "Drupal Expert Certificate"
  • Select the form "Drupal Expert Certificate"
  • Select the Personalisation "Segment" Inbound from Campaign for Drupalcon PDX
  • "Save"
  • Select "Highlighted" in region
  • Hit save again

Test

Go to an incognito window and open http://127.0.0.1:8888/en/recipes/crema-catalana Notice the form not being there Now open http://127.0.0.1:8888/en/recipes/crema-catalana?utm_campaign=pdx Refresh the page Notice the form being there!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment